# 网站性能优化都有哪些点
Issue
欢迎在 Gtihub Issue 中回答此问题: Issue 84 (opens new window)
Author
减少 http 请求次数： CSS Sprites, JS、CSS 源码压缩、图片大小适当控制； 网页 Gzip，CDN 托管，data 缓存 ，图片服务器。 尽量减少内联样式 将脚本放在底部 少用全局变量、缓存 DOM 节点查找的结果 图片预加载 按需加载
Author
可参考 Google 的文档 https://developers.google.com/web/fundamentals/performance/get-started (opens new window)
Author
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，独立构成一个图层