CSS and Network Performance

Despite having been called CSS Wizardry for over a decade now, there hasn’t been a great deal of CSS-related content on this site for a while. Let me address that by combining my two favourite topics: CSS and performance.

尽管已经被称为 css 魔法十多年了, 但在网站上一段时间以来, 与css 相关的内容已经不多了。让我通过结合我最喜欢的两个主题来解决这个问题: css 和性能。

CSS is critical to rendering a page—a browser will not begin rendering until all CSS has been found, downloaded, and parsed—so it is imperative that we get it onto a user’s device as fast as we possibly can. Any delays on the Critical Path affect our Start Render and leave users looking at a blank screen.

CSS 对于渲染页面是至关重要的，浏览器只有等 CSS 全部加载和解析完全以后才会开始渲染。所有，在用户的界面上尽快的显示就是必要的，任何在关键页面的延迟都会影响开始渲染的进程，这会导致用户看到一个空白的屏幕

What’s the Big Problem

最 严重 的问题

Broadly speaking, this is why CSS is so key to performance:

从广义上讲, 这就是为什么 css 是性能的关键:

1. A browser can’t render a page until it has built the Render Tree;
2. the Render Tree is the combined result of the DOM and the CSSOM;
3. the DOM is HTML plus any blocking JavaScript that needs to act upon it;
4. the CSSOM is all CSS rules applied against the DOM;
5. it’s easy to make JavaScript non-blocking with async and defer attributes;
6. making CSS asynchronous is much more difficult;
7. so a good rule of thumb to remember is that your page will only render as quickly as your slowest stylesheet .

1. 浏览器在构建 Render Tree 前无法渲染页面
2. Render Tree 是结合 DOM 和 CSSDOM 的结果
3. DOM 是 HTML 加上任何对其执行不阻塞的 js
4. CSSDOM 是适用于所有的 DOM 规则
5. 使用异步和延迟属性很容易使 javascript 不阻塞;
6. 要使 css 异步要困难得多;
7. 因此, 需要记住的一个很好的经验法则是, 您的页面的渲染速度只能与加载最慢的样式表一样快

With this in mind, we need to construct the DOM and CSSOM as quickly as possible. Constructing the DOM is, for the most part, relatively fast: your first HTML response is the DOM. However, as CSS is almost always a subresource of the HTML, constructing the CSSOM usually takes a good deal longer.

出于这个目的，我们需要尽可能快的构建 DOM 和 CSSDOM。大多数情况下，构建 DOM 是很快的，第一个 HTML 响应就是 DOM，然而，CSS 总是作为 HTML 的子资源，构建 CSSDOM 通常需要花费更长的时间

In this post I want to look at how CSS can prove to be a substantial bottleneck (both in itself and for other resources) on the network, and how we can mitigate it, thus shortening the Critical Path and reducing our time to Start Render.

在这篇文章中, 我想看看 css 如何能够证明是一个实质性的瓶颈 (本身和其他资源) 上的网络, 以及我们如何可以减轻它, 从而缩短关键路径和减少我们的时间开始渲染。