在优化页面加载性能的过程中，我们通常会优化 JavaScript、图片等资源的加载，但往往忽视了 CSS 对于页面加载的影响。实际上，CSS 也可能成为页面加载速度的瓶颈。
与 JavaScript 不同，CSS 是属于渲染引擎渲染时才会被解析的。如果 CSS 文件较大或者网络状况不好，那么浏览器在解析 CSS 文件的过程中会被阻塞，从而造成页面卡顿或渲染延迟。因此，我们需要采取措施来防止 CSS 代码阻塞页面加载。
1. 使用 async 和 defer 属性
在加载 JS 脚本时，我们可以用 async 和 defer 属性异步加载脚本，使得浏览器同时可以处理其他资源的加载和渲染。同样地，我们也可以使用 async 和 defer 属性来加载 CSS 文件。
async 和 defer 属性的区别在于，defer 属性会在页面渲染完成后再执行脚本，而 async 属性则是加载完毕后立即执行，不等页面渲染。在使用 defer 属性时，浏览器会按照 HTML 页面中的顺序加载脚本，而 async 属性则是按照网络请求的顺序加载。
<link rel="stylesheet" href="style.css" async> <link rel="stylesheet" href="style2.css" defer>
2. 压缩 CSS 文件
CSS 文件压缩可以减少文件大小，进而提高加载速度。我们可以借助一些工具（如 CSSNano、Clean CSS）将 CSS 文件进行压缩。
-- -------------------- ---- ------- -- ---- --- -- ---- - ----------------- ----- ------ ----- ------- -- -------- -- - -- ---- --- -- ---------------------------------------------------------
3. 将 CSS 文件放到页面底部
将 CSS 文件放到页面底部可以避免阻塞页面的首次渲染，让页面更快地加载出来。当然，这种做法只适用于那些不依赖 CSS 的内容（如图片、文字），否则可能会出现页面闪烁的情况。
-- -------------------- ---- ------- --------- ----- ------ ------ ----------- ------------- ------- ------ ----------- --- ------- ------- ---------------------- ----- ---------------- ----------------- ------- -------
4. 使用 CSS Sprites
CSS Sprites 可以将多个图片合并成一张图片，这样只需加载一次图片即可实现多个图片的显示，从而减少了网络请求的次数，提高页面加载速度。
-- -------------------- ---- ------- ------- - -------- ------------- ----------------- ---------------- - ------ - ------ ----- ------- ----- -------------------- - -- - ------ - ------ ----- ------- ----- -------------------- ----- ------ -
5. 使用 media 属性
我们可以通过 media 属性将 CSS 文件分成多个文件，每个文件用于响应不同的设备或屏幕大小。这样只需在相应的设备上加载相应的 CSS 文件，避免了载入整个 CSS 文件的额外开销。
<!-- 小屏幕 CSS --> <link rel="stylesheet" media="(max-width: 767px)" href="small.css"> <!-- 中大屏幕 CSS --> <link rel="stylesheet" media="(min-width: 768px)" href="large.css">
结论
防止 CSS 代码阻塞页面加载有多种方法：使用 async 和 defer 属性、压缩 CSS 文件、将 CSS 文件放到页面底部、使用 CSS Sprites 和 media 属性。当然，我们也可以通过减少不必要的 CSS 代码、使用 CSS3 动画代替 JavaScript 动画等方式来优化页面加载性能。综上所述，我们需要针对不同的情况采取不同的措施，以使页面更加快速地加载出来。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fad258447136260150fb28