JayFate 的个人博客

# 前端性能优化的常用手段

优化 http 请求方面的：

  1. HTML 文档结构层次尽量少，最好不深于 6 层

  2. 脚本尽量放后边，避免组织页面加载

  3. 少量首屏样式可以放在便签内

  4. 编写高效率的 CSS，CSS 层级不超过 3 层

  5. 脚本减少 DOM 操作，减少回流，尽量缓存访问 DOM 的样式信息

  6. 尽量减少 JS 修改样式，可以通过修改 class 名的方式解决

  7. 减少 DOM 查找，缓存 DOM 查找结果

  8. 动画在屏幕外或页面滚动时，尽量停止

  9. CSS 放到<head>里面、js 放到</body>前面，以及 js 的异步加载（async、defer）等

  10. 减少 HTTP 请求

    • CSS/JS 合并打包
    • 用 iconfont 代替小图标
    • 小图片使用 base64 编码

  11. 减少静态资源的体积

    • 压缩 CSS、js
    • CSS、js treeShaking

  12. 服务端（node、express 或 NGINX）开启gzip压缩

  13. 设置 HTTP header 使用缓存

  14. 使用防抖、节流减少操作

async 与 defer 的区别, 当浏览器碰到 script 脚本的时候：

  1. <script src="script.js"></script>

    没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

  2. <script async src="script.js"></script>

    有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

  3. <script defer src="myscript.js"></script>

    有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

在线客服