这个 CSS 渲染是如何阻塞的？答案

【问题标题】：How is this CSS render blocking?这个 CSS 渲染是如何阻塞的？
【发布时间】：2015-11-27 14:02:31
【问题描述】：

我正在尽最大努力遵循有关如何设计我的网站以获得最佳性能的 Google PageSpeed 指南。

在分析网站后，Google 会根据这些准则给我一个分数或排名。

让我保持低分的一条准则是：

消除首屏内容中的渲染阻塞 JavaScript 和 CSS。

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

http://www.my-website.com/bundles/styles/125/core

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

这包括将部分 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);

但是，Googe PageSpeed 仍然抱怨它被渲染阻塞。

为什么会这样，我该如何解决这个问题？

【问题讨论】：

看看link

标签： javascript html css pagespeed front-end-optimization

【解决方案1】：

关键部分是“首屏内容。”

确保您在 head 中加载的 CSS 仅适用于网页的 above-the-fold 部分中的元素。

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

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

【讨论】：