整理-前端性能优化

减小静态资源文件大小

• 1. 压缩html、静态资源js、css、字体文件、图片（或使用webp图）
• 2. gzip压缩

减少请求

• 1. 合并js、css
• 2. 合并小图片（雪碧图）

优先首屏加载

• 1. 非首屏模块、图片懒加载
• 2. 服务端渲染
• 3. css放在body前，js放在body后（或者script标签使用defer或async）

加快二次加载

• 1. js、css使用外联
• 2. js、css使用http强缓存
• 3. 接口请求数据使用webStorage

高频事件优化

• 1. 防抖、节流

体验优化

• 1. 骨架屏优化体验

其他

• 使用http2（解析快、多路复用、首部压缩、设置优先级、流量控制、服务器推送）
• 使用DNS预解析dns-prefetch
• 使用资源预加载preload和资源预读取prefetch
• 静态资源使用CDN
• 尽可能使用css3效果代替图片
• 减少重绘重排（更改dom使用document.createDocumentFragment(),通过更改className批量修改样式。。。）
• 使用事件委托减少内存
• 注意程序的局部性（复杂计算的变量以及dom需要多次使用可通过局部变量缓存下来）
• 太多if-else转为switch，更多则用数据或对象匹配查找
• 海量数据使用requestAnimationFrame渲染
• 使用web worker
• 设置viewport：HTML的viewport可加速页面的渲染

webpack（可能与以上有重复）

• 1. 组件按需加载
• 2. 提取公共代码（webpack4 的 splitChunk）
• 3. 使用contenthash
• 4. tree shaking剔除无用代码
• 5. 使用image-webpack-loader压缩图片
• 6. 通过babel-plugin-transform-runtime减少 ES6 转为 ES5 的冗余代码

React（可能与以上有重复）

• 1. 继承自PureComponent的纯组件会进行浅层比较再决定是否渲染，也可以在组件内通过shouldComponentUpdate自定义浅层比较；函数组件memo(配合useCallback、useMemo)效果与其相似
• 2. Suspense 配合 lazy

import React, { lazy, Suspense } from "react";
ComponentToLazyLoad = lazy(() => import("./mayankComponent"));
<Suspense fallback={<div>Loading...</div>}>
    <ComponentToLazyLoad />
</Suspense>

• 3. 使用<React.Fragment>或<>减少不必要的标签
• 4. 不要使用内联函数定义（每次调用 render 函数时都会创建一个函数的新实例，）
• 5. 避免使用内联样式
• 6. 列表渲染添加key
• 7. useEffect、useCallback、useMemo中按需要加上依赖
• 8. 服务端渲染
• 9. 使用不可变数据（不可变的一个主要优点是它可以浅层平等检查，大大提高了性能。如Immutable.JS：doc.codingdict.com/redux/recip…

Vue（可能与以上有重复）

• 1. v-if和v-show区分使用场景，需要频繁切换再使用v-show
• 2. computed 和 watch 区分使用场景
• 3. v-for为item添加key
• 4. v-for不要和v-if一起使用，可以用computed代替
• 5. 纯展示性的长列表通过Object.freeze阻止vue进行数据劫持，进而减少组件初始化的时间
• 6. 组件销毁时解绑addEventListene，清除定时器，以免造成内存泄露
• 7. 配置vue-lazyload 插件懒加载图片
• 8. 路由懒加载
• 9. 第三方插件的按需引入
• 10. 参考开源项目 vue-virtual-scroll-list 和 vue-virtual-scroller 来优化无限列表的场景
• 11. 服务段渲染或预渲染

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
<img v-lazy="/static/img/1.png">

参考资料： www.infoq.cn/article/kve…