https://xinyuli.blog/tags/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E5%8E%9F%E7%90%86/Recent content in 浏览器渲染原理 on Xinyu's Bloghttps://xinyuli.blog/og.pnghttps://xinyuli.blog/og.pngHugoen-USThu, 16 Feb 2017 16:52:20 +0800https://xinyuli.blog/2017/02/16/%E6%96%87%E7%AB%A0/%E3%80%90%E8%AF%91%E3%80%91CSSOM%E4%BB%8B%E7%BB%8D/Thu, 16 Feb 2017 16:52:20 +0800https://xinyuli.blog/2017/02/16/%E6%96%87%E7%AB%A0/%E3%80%90%E8%AF%91%E3%80%91CSSOM%E4%BB%8B%E7%BB%8D/<p>原文链接：<a href="https://varvy.com/performance/cssom.html">点击</a></p> <p>作者：Patrick Sexton</p> <h2 id="什么是cssom">什么是CSSOM？</h2> <ul> <li>CSSOM是CSS Object Model的缩写</li> <li>大体上来说，CSSOM是一个建立在web页面上的 CSS 样式的映射</li> <li>它和DOM类似，但是只针对CSS而不是HTML</li> <li>浏览器将DOM和CSSOM结合来渲染web页面</li> </ul> <p><img loading="lazy" src="https://xinyuli.blog/images/cssom-defined.png"></p> <p>CSSOM对于页面渲染起着至关重要的作用。</p> <p>CSSOM是<a href="https://varvy.com/pagespeed/critical-render-path.html">critical rendering path</a>的基本和核心，并且，它会有助于我们理解web性能优化中的原理。</p> <h2 id="cssom是做什么的">CSSOM是做什么的？</h2> <p>CSSOM将样式表中的规则映射到页面对应的元素上。</p> <p>虽然CSSOM采取了复杂的措施来做这件事，但是CSSOM最终的功能还是将样式映射到它们应该对应的元素上去。</p> <p>更确切地说，CSSOM识别tokens并把这些tokens转换成一个树结构上的对应的结点。所有结点以及它们所关联的页面中的样式就是所谓的CSS Object Model</p>