应用程序的图形操作方式过程谜样吗？为何复试的这时候老是拿那些小东西来问？坚信看完这首诗，你就能认知大部份你想晓得的小东西，把辩手按在天花板磨擦也全然不是难题。
当浏览两个中文网站的这时候，有许多不利因素会负面影响采用者新体验。比如说加载天然资源耗费天数太长，井字表明前等候不须要的文档浏览之类，他们要要晓得应用程序的图形操作方式过程。这样他们就能去Listary，就能写下高效率的标识符。
L文档格式，伺服器N43EI243SL十进制流的方式回到两个事实上是数组的文档格式。 它的积极响应Amou增设Content-Type为text/html; charset=UTF-8
这儿的text/html是MIME TYPE，它会说应用程序这是两个HTML文档格式，因此是用UTF-8标识符的。采用那些重要信息，应用程序才能把十进制统计数据转换成复本的解释器。
假如运转成功不然，应用程序能已经开始加载HTML文档格式，众所周知的文档格式看上去是这模样的
在下面的文档格式中，页面倚赖style.css来提供更多式样给文档格式原素，main.js 来继续执行JS操作方式。他们的页面看上去是那个样
那难题来了，应用程序是是不是依照那些单纯的字符串就能图形出那么很漂亮的页面呢？要弄清楚这个，他们须要先弄清楚那些小东西，DOM，CSSOM和图形树 Render Tree.
文档格式对象模型 – Document Object Model (DOM)
当应用程序加载HTML标识符时， it会遇到HTML原素html, body, div等，它就创建JavaScript对象叫两个节点(Node)。 最终， 大部份HTML原素都被转换成JavaScript对象。 因为每隔HTML原素都有不同的属性， 所以节点会从不同类的构造函数被创建。比如说div节点被从HTMLDivElement创建，因此它是继承自Node类。 像他们之前的HTML文档格式，他们能采用两个小试验来证明那些。
应用程序已经内置了那些原素类，像HTMLDivElement, HTMLScriptElement, Node之类。 在应用程序通过HTML文档格式创建了那些节点后，它们会被组织成树形结构。
文档格式树Dom Tree
他们之前的文档格式，建立的树形结构，就像下面这样。那个文档格式树从最下面的HTML原素，向下边搜索边创建。当HTML原素被找到，两个文档格式节点就会被创建，直到大部份节点被全然创建。（注意：两个DOM节点不一定是被HTML原素创建，注释，属性， 文字，它们也会被创建成节点，这儿为了简化，他们就仅仅列出了原素节点）
你能采用Chrome Dev Tool去看他们详细的重要信息。
JavaScript其实不认知什么是DOM，它并不是JavaScript规范。DOM是应用程序高级Web API，用来给开发人员操作方式DOM的接口。
层叠式样表模型 CSS Object Model （CSSOM）
当要给他们的中文网站很漂亮的式样，他们须要它来装饰他们的HTML原素。采用CSS选择器，他们能给DOM原素增设不同的式样属性，比如说color或者font-size之类的。
他们有不同的方式来加载式样表，比如说采用外部式样文档，嵌入<style>标签，或者写inline的css，他们还能用JS来动态增设它。
比如说他们采用下面的CSS作为示例。
在构造DOM之时，应用程序会从大部份可能的地方加载CSS（inline，外部css文档，嵌入tag之类的地方）来构造CSSOM。它也是树形结构，每个节点上的式样都将会被应用到DOM原素上。注意，CSS不会被应用到不会表明到屏幕上的原素（比如说<meta>, <title>）
他们晓得，大多数应用程序都有自己的默认式样，他们叫它user agent stylesheet 应用程序会依照采用者输入的CSS覆盖默认式样，从而生成CSS Node。假如某些属性没有被增设，它会依照W3C标准增设成默认值，或继承自父节点。
参见上图，他们的CSSOM树不包括任何非可见原素，因此一些属性都是继承自上层的值。
图形树 Reder Tree
图形树也是树型结构，它会结合DOM和CSSOM而生成。通过图形树，应用程序才能计算每个可见的原素布局，然后就能把他们表明出来。这样不然，假如没有图形树，那页面什么也不会表明，这就是为何他们须要DOM和CSSOM。
图形树代表了底层的图形统计数据，假如不会表明的原素是不会在图形树中存在的。比如说有些原素增设了display:none, 或者他们的宽高为0px，那些都不会出现在图形树中。
正如你所看到上图那样，DOM+CSSOM=RenderTree，它最终会控制页面的表明。
好了，今天就写这儿吧，下一次他们重点讨论一下图形顺序。
接下来更详细的，更重要的流程请看下面一篇：
