如何使用谷歌页面速度CSS加载脚本延迟多个CSS文件

How to defer multiple CSS files with Google Page Speed CSS load script

本文关键字：CSS 延迟 脚本 文件 加载 谷歌 速度 何使用      更新时间：2023-09-26

我使用Google Page Speed CSS加载脚本来延迟我较大的css文件。

<script async>
    var cb = function() {
        var l = document.createElement('link');
        l.rel = 'stylesheet';
        l.href = '<?php echo $root; ?>css/custom.css';
        var h = document.getElementsByTagName('head')[0];
        h.parentNode.insertBefore(l, h);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
</script>

如何也延迟这些脚本？

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

扩展代码示例：

var loadCSSFiles = function() {
    var links = ["//example.com/css/custom.css", "//fonts.googleapis.com/css?family=PT+Sans", "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"],
        headElement = document.getElementsByTagName("head")[0],
        linkElement, i;
    for (i = 0; i < links.length; i++) {
        linkElement = document.createElement("link");
        linkElement.rel = "stylesheet";
        linkElement.href = links[i];
        headElement.appendChild(linkElement);
    }
};
var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) {
    raf(loadCSSFiles);
} else {
    window.addEventListener("load", loadCSSFiles);
}

注意：我将insertBefore更改为appendChild，前者似乎不正确，因为它会将样式表放在文档头之外。

相关文章：