【译】CSSOM 介绍

原文链接：点击

作者：Patrick Sexton

什么是CSSOM？

CSSOM对于页面渲染起着至关重要的作用。

CSSOM是critical rendering path的基本和核心，并且，它会有助于我们理解web性能优化中的原理。

CSSOM将样式表中的规则映射到页面对应的元素上。

虽然CSSOM采取了复杂的措施来做这件事，但是CSSOM最终的功能还是将样式映射到它们应该对应的元素上去。

更确切地说，CSSOM识别tokens并把这些tokens转换成一个树结构上的对应的结点。所有结点以及它们所关联的页面中的样式就是所谓的CSS Object Model

Web浏览器为了展示页面，需要经历以下四个步骤：

从上述四个步骤可以看出，CSSOM对于Web页面的展示起着重要作用

你不必为了优化你的Web页面而去了解CSSOM是怎样工作的，这里有几个关于CSSOM的关键点你需要知道，利用这些关键点可以优化页面的加载速度。

让我们快速看一下这几个关键点，然后来看怎么优化我们的页面。

所有的CSS都是阻塞渲染的（意味着在CSS没处理好之前所有东西都不会展示）。

真的原因是，如果浏览器在CSS检查之前展示了页面，那么每个页面都是没有样式的，等一会之后又突然有了样式，整个页面的体验就会很糟糕。

由于CSSOM被用作创建render tree，那么如果不能高效的利用CSS会有一些严重的后果。

主要的后果就是你的页面在加载时白屏。

这可能对你来说，或明显或不明显，但这是一非常关键的点。

这意味着即使你的CSS文件被缓存了，也并不意味着这个已经构建好了的CSSOM可以应用到每一个页面。

当用户跳到你的另一个页面时（即使浏览器缓存了所有需要的CSS），CSSOM也必须重新构建一遍。

也就是说，如果你的CSS文件写得很蹩脚，或者体积很大，这也会对你页面加载产生负面的影响。

javascript的加载可能会阻塞CSSOM的构建

简单来说，CSSOM是展示任何东西的必需品。在CSSOM构建之前，所有东西都不会展示，如果你阻塞了CSSOM的构建，CSSOM的构建就会消耗更长的时间，这就意味着页面的渲染也需要更长的时间。
如果你的javascript阻塞了CSSOM的构建，你的用户就会面对更长时间的白屏。

这里有几个首屏优化的最佳实践，可以帮助你让CSSOM构建地快一些（也就是让页面加载更快）