前端性能优化10个方面

转载文章：前端性能优化10个方面 作者：等风来 博客园
1.加载优化
  1. 压缩合并
  2. 代码宰割(code spliting)，能够基于路由或动静加载
  3. 第三方模块放在CDN
  4. 大模块异步加载，例如: Echarts，能够应用require.ensure，在加载胜利后，在显示对应图表
  5. 小模块适度合并，将一些零散的小模块合并一起加载，速度较快
  6. 能够应用pefetch预加载，在分步场景中非常适合
2.图片优化
  1. 小图应用雪碧图，iconFont，base64内联
  2. 图片应用懒加载
  3. webp代替其余格局
  4. 图片肯定要压缩
  5. 能够应用的img的srcset，依据不同分辨率显示不同尺寸图片，这样既保证显示成果，又能节俭带宽，进步加载速度
3. css优化
  1. css写在头部
  2. 防止css表达式
  3. 移除空置的css规定
  4. 防止行内style款式
4.js优化
  1. js写在body底部
  2. js用defer放在头部，提前加载工夫，又不阻塞dom解析
  3. script标签增加crossorigin，不便谬误收集
5.渲染优化

  1. 尽量减少reflow和repaint，波及到款式，尺寸，节点增减的操作，都会触发reflow和repaint。

    1.1 用变量缓存dom款式，不要频繁读取
    1.2 通过DocumentFragment或innerHTML批量操作dom
    1.3 dom暗藏，或复制到内存中，相似virtual dom，进行批改，实现后再替换回去
    1.4 动画元素肯定要absolute，脱离文档流，不影响其余元素。动画不要用left，top等操作，要应用transform和opacity，同时开启渲染层(will-change或translate3d(0,0,0))
    1.5 动画尽量用requestAnimationFrame，不要用定时器
    1.6 挪动端硬件加速，触发GPU渲染，还是translate3d(0,0,0)

  2. 尽量用css动画代替js动画，canvas动画代替js动画
  3. 初始渲染，能够应用骨架屏或loading，晋升体验
  4. PWA，能够本地缓存资源，晋升体验
  5. 频繁触发的事件，防抖、节流，例如：scroll，input等
  6. 长列表，应用分页或滚动加载，虚构列表，移除屏外dom
6.首屏优化

准则：显示快，滚动晦涩，懒加载，懒执行，渐进展示

  1. 代码拆散，将首屏不须要的代码拆散进来
  2. 服务端渲染或预渲染，加载完html间接渲染，缩小白屏工夫
  3. DNS prefetch，应用dns-prefetch缩小dns查问工夫，PC端域名发散，挪动端域名收敛
  4. 缩小要害门路css，能够将要害的css内联，这样能够缩小加载和渲染工夫
7.打包优化

次要是webpack优化

  1. 拆包 externals dllPlugin
  2. 提取公共包 commonChunkPlugin或splitChunks
  3. 放大范畴 各种loader配置include和exclude，noParse跳过文件
  4. 开启缓存 各种loader开启cache
  5. 多线程减速 happypack或thead-loader
  6. tree-shaking ES模块剖析，移除死代码
  7. Scope Hoisting ES6模块剖析，将多个模块合并到一个函数里，缩小内存占用，减小体积，提醒运行速度

  8. webpack长缓存优化

    8.1 js文件应用chunkhash，不应用hash

    8.2 css文件应用contenthash，不应用chunkhash，不受js变动影响

    8.3 提取vendor，公共库不受业务模块变动影响

    8.4 内联webpack runtime到页面，chunkId变动不影响vendor

    8.5 保障module Id稳固，不应用数字作为模块id，改用文件内容的hash值，应用HashedModuleIdsPlugin，模块的新增或删除，会导致其前面的所有模块id从新排序，为防止这个问题

    8.6 保障chunkhash稳固，应用webpack-chunk-hash，代替webpack本人的hash算法。webpack本人的hash算法，对于同一个文件，在不同开发环境下，会计算出不必的hash值，不能满足跨平台需要。

8.vue优化
  1. 路由懒加载组件
  2. keep-alive缓存组件，放弃原显示状态
  3. 列表项增加key，保障惟一
  4. 列表项绑定事件，应用事件代理(v-for)
  5. v-if和v-for不要用在一个标签上，它会在每个项上进行v-if判断

9. react优化

  1. 路由组件懒加载，应用react-loadable
  2. 类组件增加shouldComponent或PureComponent
  3. 函数组件增加React.memo
  4. 列表项增加key，保障惟一
  5. 函数组件应用hook优化，useMemo，useCallback

10. SEO优化

  1. 增加各种meta信息
  2. 预渲染
  3. 服务端渲染