open开放式问题【Q083】网站性能优化都有哪些点

网站性能优化都有哪些点

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 84

Author 回答者: wjw-gavin

减少http请求次数: CSS Sprites, JS、CSS源码压缩、图片大小适当控制; 网页Gzip,CDN托管,data缓存 ,图片服务器。 尽量减少内联样式 将脚本放在底部 少用全局变量、缓存DOM节点查找的结果 图片预加载 按需加载

Author 回答者: shfshanyue

可参考 Google 的文档 https://developers.google.com/web/fundamentals/performance/get-started

Author 回答者: hwb2017

https://developers.google.com/web/fundamentals/performance/get-started

根据谷歌Web开发者网站总结的性能优化点:

  • 资源加载优化
    • 衡量性能指标
      • Lab Data, 在规范的特定条件下,对Web应用的各项指标进行评估,典型工具如谷歌的 lighthouse
      • RUM,基于真实用户的性能指标监控,包括FCP,FID,CLS等,参考 https://web.dev/user-centric-performance-metrics/
      • 瀑布图,借助 performance API 记录整个站点和各个资源的加载时长
    • 优化资源大小(字节数)
    • 减少HTTP请求次数
      • 合并文本资源,比如使用webpack这样的bundle技术
      • 合并图片资源,比如雪碧图
      • 内联内容较小的资源到html中,比如data url
    • 善用HTTP缓存
    • 优化JavaScript
      • JavaScript的处理过程:下载(fetch) => 解压 => 解析(代码转换为AST) => 编译(AST转换为字节码) => 执行
      • 死代码消除(Tree Shaking),减小总体传输文件大小
      • Code Spliting + 基于路由的按需加载,减小首次渲染的传输文件大小
    • 优化首次渲染路径
      • 渲染路径: DOM树构建 => CSSOM树构建 => Render Tree构建 => 样式计算 => 布局 => 绘制位图 => 合成图层
      • 通过媒体查询避免首次渲染时加载不必要的CSS文件
      • 将对页面结构无影响的JS文件标记为 async 和 defer,避免阻塞html解析
  • 渲染优化
    • 使用 requestAnimationFrame 代替 setTimeout 和 setInterval 来更新视图,减少卡顿
    • 将计算密集型的JavaScript代码移动到 Web Worker 中执行,避免占用主线程
    • 使用复杂度更低、class风格的CSS选择器;减少频繁变动的CSS样式的影响元素个数
    • 使用性能更高的 flex 布局代替 float 布局
    • 避免对 offsetHeight 等dom属性的频繁访问,导致重绘和重排操作队列的频繁同步执行
    • 在 performance profiling 之后,将频繁变动的动画部分所属的dom元素标记为 will-change,独立构成一个图层