极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。
每天晚上九点 B站讲解前端工程化直播,并解答相关问题。

# 网站性能优化都有哪些点

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 84 (opens new window)

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

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

Author

回答者: hwb2017 (opens new window)

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 记录整个站点和各个资源的加载时长
    • 优化资源大小(字节数)
      • 评估各资源的用途并评估是否可以直接移除
      • 通过压缩技术(minimize 和 compress)减少文本类资源(CSS,JavaScript,HTML)大小
      • 选择合适的图片格式、裁剪图片、懒加载图片等,通过 picture 标签响应式地返回图片,参考 https://www.jianshu.com/p/607567e488fc
      • 预加载和长期缓存字体,参考 https://web.dev/optimize-webfont-loading/
    • 减少 HTTP 请求次数
      • 合并文本资源,比如使用 webpack 这样的 bundle 技术
      • 合并图片资源,比如雪碧图
      • 内联内容较小的资源到 html 中,比如 data url
    • 善用 HTTP 缓存
      • 本地缓存命中顺序,内存缓存 => Service Worker 缓存 => HTTP 缓存(磁盘缓存) => HTTP/2 Push 缓存,参考 https://calendar.perfplanet.com/2016/a-tale-of-four-caches/
      • https://web.dev/http-cache/
    • 优化 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,独立构成一个图层
Last Updated: 11/27/2021, 10:11:48 AM