如何推迟加载大型 CSS 文件以优化网站性能？

通过推迟加载大型 CSS 文件来增强 CSS 交付

Google 的开发人员文档建议优化 CSS 交付以提高网站性能。推荐的策略之一是在头部内联关键 CSS，同时在页面加载后加载原始的较大 CSS 文件。

页面加载后加载大型 CSS 文件

提供的示例有效地处理了内联一个小的 CSS 文件，但留下了如何处理更大的 CSS 文件的问题。

要将大型 CSS 文件的加载推迟到页面加载之后，您可以使用如下代码片段：

<code class="javascript">function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='"+src+" />"));
    }
};</code>

只需在 $(document).ready() 或 window.onload 函数中调用此函数即可实现大型 CSS 文件的延迟加载。

另一种选择是在浏览器中禁用 JavaScript 并观察由此产生的行为。通过这样做，您可以验证 CSS 是否已异步加载，从而提高网站的整体性能。

请记住，进行快速 Google 搜索通常可以提供有关编程挑战的宝贵见解。例如，查询“post load css”会产生有用的结果，例如响应中提到的结果。

以上是如何推迟加载大型 CSS 文件以优化网站性能？的详细内容。更多信息请关注PHP中文网其他相关文章！