https://xinyuli.blog/zh/categories/%E6%96%87%E7%AB%A0/Recent content in 文章 on Xinyu's Bloghttps://xinyuli.blog/og.pnghttps://xinyuli.blog/og.pngHugozh-CNThu, 16 Feb 2017 16:52:20 +0800https://xinyuli.blog/zh/2017/02/16/%E8%AF%91cssom%E4%BB%8B%E7%BB%8D/Thu, 16 Feb 2017 16:52:20 +0800https://xinyuli.blog/zh/2017/02/16/%E8%AF%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>https://xinyuli.blog/zh/2017/02/10/%E8%B0%88%E4%B8%80%E8%B0%88javascript%E7%BB%A7%E6%89%BF/Fri, 10 Feb 2017 15:07:43 +0800https://xinyuli.blog/zh/2017/02/10/%E8%B0%88%E4%B8%80%E8%B0%88javascript%E7%BB%A7%E6%89%BF/<p>最近在复习一些JavaScript基础的东西，碰到js的原型和继承这一块总是感觉不悟其中精髓。因此，这篇文章算是从我自己理解的角度对js继承进行总结和剖析。</p> <h2 id="什么是继承">什么是继承</h2> <p>大多数人使用继承不外乎是为了获得这两点好处，<em><strong>代码的抽象</strong></em>和<em><strong>代码的复用</strong></em>。 代码的抽象就不用说了，交通工具和汽车这类的例子数不胜数，在传统的OO语言中(比如Java)，代码的抽象更多的是使用接口(interface)来实现，而使用继承更多地是为了代码的复用(虽然现在强调使用组合而不是使用继承)。</p> <p>怎么复用的？打个比方，class A 继承了 class B，class A便拥有了class B 的public 和 protected类型的变量和方法，用最简单的方法去想，便是 class B 将 这些属性和方法直接copy给class A，这样便实现了继承。</p> <p>因此我们可以这样说，继承实际上是一种<strong>类与类</strong>之间的copy行为。</p>