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

2019-03-18 by laifeipeng

前言

看了N多篇性能优化以后概括总结出本身的一套性能优化方案。若是以为好，记得点赞！

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

1、资源请求过程优化

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

2、首屏渲染优化

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

3、构建优化

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

4、编码优化

• 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

结语

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