共计 1908 个字符，预计需要花费 5 分钟才能阅读完成。
前端性能优化 10 个方面
转载文章：前端性能优化 10 个方面 作者：等风来 博客园
1. 加载优化
- 压缩合并
- 代码宰割 (code spliting)，能够基于路由或动静加载
- 第三方模块放在 CDN
- 大模块异步加载，例如: Echarts，能够应用 require.ensure，在加载胜利后，在显示对应图表
- 小模块适度合并，将一些零散的小模块合并一起加载，速度较快
- 能够应用 pefetch 预加载，在分步场景中非常适合
2. 图片优化
- 小图应用雪碧图，iconFont，base64 内联
- 图片应用懒加载
- webp 代替其余格局
- 图片肯定要压缩
- 能够应用的 img 的 srcset，依据不同分辨率显示不同尺寸图片，这样既保证显示成果，又能节俭带宽，进步加载速度
3. css 优化
- css 写在头部
- 防止 css 表达式
- 移除空置的 css 规定
- 防止行内 style 款式
4.js 优化
- js 写在 body 底部
- js 用 defer 放在头部，提前加载工夫，又不阻塞 dom 解析
- script 标签增加 crossorigin，不便谬误收集
5. 渲染优化
尽量减少 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)- 尽量用 css 动画代替 js 动画，canvas 动画代替 js 动画
- 初始渲染，能够应用骨架屏或 loading，晋升体验
- PWA，能够本地缓存资源，晋升体验
- 频繁触发的事件，防抖、节流，例如：scroll，input 等
- 长列表，应用分页或滚动加载，虚构列表，移除屏外 dom
6. 首屏优化
准则：显示快，滚动晦涩，懒加载，懒执行，渐进展示
- 代码拆散，将首屏不须要的代码拆散进来
- 服务端渲染或预渲染，加载完 html 间接渲染，缩小白屏工夫
- DNS prefetch，应用 dns-prefetch 缩小 dns 查问工夫，PC 端域名发散，挪动端域名收敛
- 缩小要害门路 css，能够将要害的 css 内联，这样能够缩小加载和渲染工夫
7. 打包优化
次要是 webpack 优化
- 拆包 externals dllPlugin
- 提取公共包 commonChunkPlugin 或 splitChunks
- 放大范畴 各种 loader 配置 include 和 exclude，noParse 跳过文件
- 开启缓存 各种 loader 开启 cache
- 多线程减速 happypack 或 thead-loader
- tree-shaking ES 模块剖析，移除死代码
- Scope Hoisting ES6 模块剖析，将多个模块合并到一个函数里，缩小内存占用，减小体积，提醒运行速度
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 优化
- 路由懒加载组件
- keep-alive 缓存组件，放弃原显示状态
- 列表项增加 key，保障惟一
- 列表项绑定事件，应用事件代理 (v-for)
- v-if 和 v -for 不要用在一个标签上，它会在每个项上进行 v -if 判断
9. react 优化
- 路由组件懒加载，应用 react-loadable
- 类组件增加 shouldComponent 或 PureComponent
- 函数组件增加 React.memo
- 列表项增加 key，保障惟一
- 函数组件应用 hook 优化，useMemo，useCallback
10. SEO 优化
- 增加各种 meta 信息
- 预渲染
- 服务端渲染