Javascript 这个CSS渲染块是如何实现的？

我正在尽我最大的努力遵循谷歌PageSpeed指南，指导如何设计我的网站以获得最佳性能

在分析了网站之后，谷歌根据这些准则给了我一个分数或排名

让我的分数保持在较低水平的一个准则是：

消除折叠内容上方的渲染阻塞JavaScript和CSS

您的页面有1个阻止CSS资源。这会导致页面呈现延迟。

我为解决这个问题做了很多工作

这包括将CSS的一部分嵌入HTML本身（仅限于第一次呈现所需的部分），并尝试通过内联脚本加载CSS

我在HTML正文的末尾添加了以下代码：

(function (document) {
    if(!document) return;
    var stylesheet = document.createElement('link');
    stylesheet.href = 'http://www.my-website.com/bundles/styles/125/core';
    stylesheet.rel = 'stylesheet';
    stylesheet.type = 'text/css';
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(stylesheet);
})(document);

然而，谷歌PageSpeed仍然抱怨它被渲染阻塞

这是为什么？我如何解决这个问题？

关键部分是“在折叠内容之上。”

确保在

标题中加载的CSS仅适用于网页部分中的元素

例如，这不应该包括任何用于页脚的CSS，可以使用javascript在渲染后加载


但是，您不应该在文档末尾加载所有CSS。如果在呈现后加载CSS，这会影响已设置样式的HTML元素，则必须将它们重新绘制到页面上，这将降低性能。
请查看