如何推迟加载大型 CSS 文件以提高页面性能？

优化 CSS 传递：了解延迟 CSS 加载

优化 CSS 传递时，在页面加载后延迟加载大型 CSS 文件可以显着提高页面性能。虽然 Google 开发人员提供的示例演示了内联小型 CSS 文件以实现关键样式，但它留下了如何推迟较大 CSS 文件的问题。

加载后访问原始 CSS 文件

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

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

此函数会在 HTML 头部动态创建一个链接标记，并在将 href 属性设置为所需的 CSS 文件。要激活样式表，只需调用 $(document).ready() 或 window.onload 事件处理程序中的函数即可。

验证延迟结果

验证如果页面加载后 CSS 文件真正加载，您可以在浏览器中禁用 JavaScript。如果 CSS 文件没有出现在页面上，则确认它正在动态加载。此外，建议使用 Google PageSpeed Insights 等工具来测试性能改进，以量化对页面加载时间的影响。

通过采用此技术，我们可以优化 CSS 交付并增强网络的整体性能页。延迟加载大型 CSS 文件可以让页面快速渲染并提供更流畅的用户体验。

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