如何让页面加载更快
请求优化
主要有3个方向
减少 HTTP 请求的资源
- 静态资源文件进行304缓存
- 启用文本压缩 gzip
- 压缩图片的大小（webp 或 avif 的压缩效果优于 png 或 jpeg）
代码优化
- 延迟或异步加载非必要的 CSS 和 JS 文件，避免阻塞页面渲染
- 减少冗余代码，模块化
- 图片懒加载
网络优化
- 使用 CDN 加速静态资源的获取
重绘和回流
- 重绘 repaint：样式改变
- 回流 reflow：布局改变
回流必定会发生重绘，而重绘不一定会引发回流。
减少回流是为了提高页面性能的重要策略之一，可以通过以下方式
CSS优化
- 使用
transform代替top，transform属性可以触发硬件加速，而不会引发回流 - 使用
will-change，告诉浏览器哪些元素将要发生变化，以便浏览器可以优化性能 - 使用
visibility:hidden代替display:none，因为前者只触发重绘，而后者触发回流 - 在 DOM Tree 末端修改样式
- 控制动画速度，使用 requestAnimationFrame 来调度动画
- 使用 CSS3 动画和过渡，其通常会触发硬件加速，提供更流畅的动画效果
JS优化
- 对复杂动画使用绝对定位，使其脱离文档流，减少回流的发生
- 缓存变量，如果需要多次访问某个 DOM 元素或计算值，将这些值缓存在变量中，以避免重复查询和计算