CSSOM

转自：链接

• CSSOM是CSS Object Model的缩写
• 大体上来说，CSSOM是一个建立在web页面上的 CSS 样式的映射
• 它和DOM类似，但是只针对CSS而不是HTML
• 浏览器将DOM和CSSOM结合来渲染web页面

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

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

CSSOM是做什么的？

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

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

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

Web浏览器使用CSSOM去渲染页面

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

1. 检查HTML并构建DOM
2. 检查CSS并构建CSSOM
3. Web浏览器将DOM和CSSOM结合，并构建出render tree
4. 展示Web页面

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

好消息

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

1. CSSOM 阻止任何东西渲染
2. CSSOM 在加载一个新页面时必须重新构建
3. 页面中CSS的加载和页面中javascript的加载是有关系的

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

1. CSSOM 阻止任何东西渲染

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

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

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

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

2. CSSOM 在加载一个新页面时必须重新构建

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

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

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

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

3. 页面中CSS的加载和页面中javascript的加载是有关系的

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

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

如果你的javascript阻塞了CSSOM的构建，你的用户就会面对更长时间的白屏。