零散专题15 网页性能优化

发表于 更新于 分类于 阅读次数：

性能优化从以下几个角度来考虑

  1. 页面性能优化
  2. 网络性能优化

网络性能优化

网络性能优化主要从以下几个角度：

  1. 加快请求速度（使用CDN， keep-alive，Websocket，避免重定向，优先加载CSS文件） – 加快速度
  2. 增多请求并发（Domian-Hash） – 增大并发
  3. 减小请求数目（合并文件、雪碧图） – 减少次数
  4. 减小资源体积（压缩图片和文件，Gzip，懒加载，JS包按需加载、Cookie-Free（减少不必要的cookie），Cache-Control，合理设置缓存，使用Webp格式图像减小图像体积、使提供响应式图像，谨慎使用第三方库）– 减小体积

响应式图像：在<img>中使用secret属性指定浏览器选择的一组图像，或者使用<picture>标签帮助浏览器选择最佳格式，传送不同屏幕尺寸下不同格式的图像

页面性能优化

  1. 优化DOM性能（减少DOM操作，拼接DOM操作，事件委托，使用合理的CSS选择器，多用原生方法）
  2. 优化CSS性能（使用CSS动画代替JS动画，使用tranform完成动画，利用GPU渲染单独的复合层、提高z-index避免隐式合成过多的复合层，使用will-change属性，利用scale减小纯色复合层的尺寸）
  3. 优化JS性能（减少循环次数，合理缓存变量，减少全局变量，使用局部变量，操作节流）
  4. 优化用户体验（加载状态）

参考