《关于前端的性能优化》

发表于 分类于 Valine：

前端的性能优化永远是前端开发逃不开的东西，那么如何进行前端的性能优化也是一个比较重要的事情，下面分享一些前端性能优化的指标；

加载优化

  • 减少 HTTP 请求，尽量减少向服务器发送的请求数，节省网络资源，所有静态资源都要放在服务器端并设置缓存，并且要尽量使用长缓存；
  • 压缩代码，头部的内联样式和脚本会阻塞页面的渲染，对代码进行压缩，并在服务器端开启 Gzip 加速；
  • 无阻塞；头部内联的样式和脚本会阻塞页面的渲染，样式放在头部使用 link 引入，脚本放在尾部并使用异步方式加载；
  • 首屏加载：首屏快速显示可大大的提升用户对页面速度的感知，应尽量针对首屏的快速显示做出相应的优化；
  • 按需加载：将不影响首屏的资源和当前屏幕不使用的资源放到用户需要时才加载，可大幅度提升显示速度和降低总体流量。但是按需加载会导致大量重绘，影响渲染性能；
  • 预加载：大型资源页面可使用 Loading，资源加载完成后再显示页面，但是加载时间过长，会造成负体验；
  • 压缩图像：使用图像时选择最合适的格式和大小，然后使用工具压缩，同时在代码中进行图片懒加载；
  • 减少 Cookie：Cookie 会影响加载速度，所以尽量减少不必要的 Cookie；
  • 异步加载第三方资源：第三方资源不可控，会影响页面加载，所以要异步加载第三方资源；

执行优化

  • css 写在头部，js 写在尾部并异步；
  • 避免 img,iframe,等标签的 src 属性为空，原因是空的 src 会重新加载当前页面，影响速度和效率；
  • 尽量避免重置图像的大小；多次重置图像大小会引发图像的多次重绘，影响性能；
  • 图像尽量避免使用 DataURL,原因是 DataURL 图像没有使用图像压缩算法，文件会变大，并且要解码后再渲染，加载慢耗时长；

渲染优化

  • 设置 Viewport：HTML 的 viewport 可加快页面的渲染；
  • 减少 DOM 结点：DOM 结点太多会影响页面的渲染；
  • 尽量使用 css3 动画，合理使用 requestAnimationFrame 动画代替 setTimeout；
  • 优化高频事件：scroll、touchmove 等事件尽量使用函数防抖节流等进行限制；

样式优化

  • 避免在 HTMl 中书写 style；
  • 避免 css 表达式：css 表达式的执行需要跳出 css 树的渲染；
  • 移除 css 空规则：css 空规则增加了 css 文件的大小；
  • 正确使用 display：display 会影响页面的渲染；
  • 不滥用 float：float 在渲染时计算量较大，尽量减少使用；
  • 不滥用 WEB 字体：WEB 字体需要下载、解析、重绘当前页面，尽量减少使用；

脚本优化

  • 尽量减少回流和重绘；
  • 缓存 DOM 选择与计算：每次 DOM 选择都要计算和缓存；
  • 缓存.length 的值：每次.length 计算使用一个变量保存值；
  • 尽量使用事件代理：避免批量绑定事件 ；
  • 尽量使用 id 选择器：id 选择器选择元素是最快的。