前端性能优化（最全总结）

2019-03-18 by laifeipeng

前言

看了N多篇性能优化之后归纳总结出自己的一套性能优化方案。如果觉得好，记得点赞！

前端性能优化从发送url开始到渲染，每一步都可以优化，后续的用户交互体验也可以优化，最后就是打包构建优化和编码优化。

一、资源请求过程优化

• 浏览器缓存
  • 强缓存
  • 协商缓存
  • localstorage缓存
  • service workers
• 减少 DNS 查找次数
• 配置多个域名
• http 改用http2（多路复用合并请求）
• 合并请求
• 减少资源字节数
• 采用cdn

二、首屏渲染优化

• css放在头部、js放在底部
• 减少首屏加载的资源
  • 只加载关键的资源
  • 对关键资源进行资源提示（详见资源提示）
  • 其他非关键资源懒加载lazyload
• 异步无阻塞加载JS
  • defer
  • async
  • 动态创建script
• 资源提示（Resource Hints）
  • dns-prefetch
  • preconnect
  • prefetch
  • prerender
  • preload

三、构建优化

• 使用预编译
• 使用 Tree-shaking、Scope hoisting、Code-splitting
  • 使用Tree-shaking可以减少构建后文件的体积
  • 使用Scope Hoisting可以让代码体积更小并且可以降低代码在运行时的内存开销，同时它的运行速度更快
  • code-splitting可以打包成多个chunk，以便按需加载资源
• 开启gzip
• 使用CDN加速静态资源加载（加快资源访问速度，而且减少打包体积）
• 多页面应用提取页面间公共代码，以利用缓存
• 压缩js\css\html，移除注释、空格等，小图片使用base64嵌入减少一次http请求
• 服务端渲染（SSR）
• 使用import函数动态导入模块
• 使用HTTP缓存头

四、编码优化

• JS
  • 数据访问速度
  • 减少DOM操作
    • 缓存已经访问过的元素；
    • 使用DocumentFragment暂存DOM，整理好以后再插入DOM树；
    • 操作className，而不是多次读写style；
    • 避免使用JavaScript修复布局。
  • 单线程限制
    • 异步回调
    • 多线程API（Web Worker）
  • 优化算法，减少运行时间
  • js动画使用requestAnimationframe函数
  • 对高频触发的事件进行节流或消抖
  • 善于使用事件委托
  • 将渐变或者会动画元素放到单独的绘制层中
• CSS
  • 减少cssom构建时间(少用通用选择符，多用特定选择符)
  • 开启GPU加速
  • 少用css表达式、少用filter
  • 针对一些场景采用css内联的方式
• 图片
  • 图片格式（webp>png>jpeg、gip）
  • 字体图标代替图片
  • css绘制图片
  • 使用雪碧图
  • 不要在HTML中缩放图片
  • 使用体积小、可缓存的favicon.ico

结语

• 1、长路漫漫唯剑作伴，前端学习仍需努力。
• 2、其中资源提示参考：嗨，送你一张Web性能优化地图
• 3、其中webpack优化参考:三十分钟掌握Webpack性能优化