在前端开发中，页面性能一直是一个非常重要的问题。尤其是在移动设备上，性能的优化更是至关重要。其中一个重要的问题就是 JS 和 CSS 文件的加载阻塞了页面的渲染，导致页面加载缓慢。本文将介绍如何防止 JS、CSS 阻塞页面渲染，从而提高页面的性能。
为什么 JS、CSS 会阻塞页面渲染
在浏览器渲染页面时，会按照 HTML 文件中的顺序依次下载并解析 JS、CSS 文件。如果遇到 JS 或 CSS 文件，浏览器会立即停止 HTML 文件的解析，等待 JS 或 CSS 文件下载并解析完毕后才继续解析 HTML 文件。这就导致了 JS、CSS 文件的加载阻塞了页面的渲染。
如何防止 JS、CSS 阻塞页面渲染
1. 将 JS 文件放在底部
将 JS 文件放在 HTML 文件底部，可以让 HTML 文件先解析完毕，再去下载和解析 JS 文件。这样可以防止 JS 文件阻塞页面的渲染。但是这种方法只适用于需要在页面加载完毕后才执行的 JS 代码。
示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ --------- ------------ ----- ---------------- ----------------- ------- ------ --------- ----------- ------- ------------------------- ------- -------
2. 使用 async 和 defer 属性
HTML5 中新增了 async 和 defer 属性，可以让浏览器异步加载 JS 文件，从而不阻塞页面的渲染。
async 属性表示异步加载 JS 文件，下载和解析 JS 文件时不会阻塞页面的渲染，但是 JS 文件下载完成后会立即执行。如果多个 async 属性的 JS 文件之间有依赖关系，可能会导致执行顺序错误。
defer 属性表示延迟加载 JS 文件，下载和解析 JS 文件时不会阻塞页面的渲染，但是 JS 文件会在 HTML 文件解析完毕后按照顺序执行。如果多个 defer 属性的 JS 文件之间有依赖关系，会按照顺序执行。
示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ --------- ------------ ----- ---------------- ----------------- ------- --------------- --------------- ------- ---------------- --------------- ------- ------ --------- ----------- ------- -------
3. 压缩 JS、CSS 文件
压缩 JS、CSS 文件可以减小文件大小，从而加快文件下载和解析的速度，提高页面的性能。
示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ --------- ------------ ----- ---------------- --------------------- ------- ------ --------- ----------- ------- ----------------------------- ------- -------
总结
JS、CSS 文件的加载阻塞了页面的渲染是前端开发中一个常见的问题。为了提高页面的性能，我们可以将 JS 文件放在底部、使用 async 和 defer 属性以及压缩 JS、CSS 文件等方法来防止 JS、CSS 阻塞页面渲染。在实际开发中，我们需要根据具体情况来选择合适的方法来优化页面性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c9928fadd4f0e0ff363b7a