CSS工作原理

CSS工作原理：

	当一个浏览器在显示文档的时候，需要将文档内容和样式内容结合到一起，以此在
处理文档的时候包含两个阶段：
	1、浏览器将HTML和CSS装换为DOM(Document Object Model),DOM在计算机内
存中表示文档，使得文档和CSS结合。
	2、浏览器显示DOM的内容。

       如图所示，计算机从上至下加载HTML文件并进行解析后产生DOM树，并在解析HTML后加载解析CSS文档，接着将解析后的CSS样式赋给DOM树中的对应元素，最后在浏览器中展示出来。

---

       这也可解释在编译CSS采用外部引入方法时，<link>元素方法要比<style>中@import url()方式好。
       这是因为在解析HTML文档时<style>作为HTML标签，计算机会解析其内部元素将@import url()解析，从而引入了CSS样式，然而此时HTML中标签元素不一定很快会解析出来。而在解析至link标签中href属性时，系统会识别出引入的CSS文档链接，而后跳过先解析其他元素，这样待解析CSS文档时，HTML标签元素都已解析。

DOM简介：

       DOM是一个树形结构，在HTML中的每一个元素，属性，甚至于文本都可以被转换为DOM中的一个节点。每个节点在节点树中都有对应的关系节点(比如父节点，兄弟节点)

---

浏览器是如何渲染页面的
       根据html文件构造DOM树根据css文件构造CSSOM树。构建树期间，如果遇到JS，则阻塞DOM树和CSSOM树的构建，优先加载JS文件，加载完毕后再继续构建DOM树和CSSOM 树。(JS会对DOM节点进行操作，浏览器无法预测未来的DOM节点的具体内容，为了防止无效操作，节省资源，只能阻塞DOM树的构建。譬如，若不阻塞DOM树的构建，若JS删除了某个DOM节点A，那么浏览器为构建此节点A花费的资源就是无效的。)
       HTML 文档中的所有内容皆是节点，各节点之间拥有层级关系，如父子关系、兄弟关系等，彼此相连，构成DOM树。
       CSS文档中，所有元素皆是节点，与HTML文件中的标签节点一一对应。CSS中各节点之间同样拥有层级关系，如父子关系、兄弟关系等，彼此相连，构成CSSOM树。