DOM和CSS渲染过程摘录-021

DOM和CSS渲染过程DOM上面显示了一个简单的html页面。DOM有两个概念：解析和渲染DOM解析DOM解析：就是把你写的各种html标签生成一个DOMTREE，可以认为生成最原始的页面，没有任何样式和CSS修饰。DOM渲染：浏览器会把自己的默认样式+用户自己的样式整合成一个CSSTREE，DOM渲染是指DOMTREE和CSSTREE结合生成RenderTREE，展示一个样式页面。1）浏览器会解析三种东西：一种是HTML/SVG/XHTML，其实Webkit有3个C++类对应这三种文档。解析这三个文件会生成一个DOMTree。CSS，解析CSS会生成一个CSS规则树。Javascript，脚本，主要是通过DOMAPI和CSSOMAPI来操作DOMTree和CSSRuleTree。2）解析完成后，浏览器引擎会通过DOMTree和CSSRuleTree构建RenderingTree。注意：RenderingTree不等同于DOM树，因为像Header或display:none这样的东西没有必要放在渲染树中。CSS的RuleTree主要是完成匹配，将CSSRule附加到RenderingTree上的每个Element上。那就是DOM节点。这就是所谓的框架。然后，计算出每个Frame（也就是每个Element）的位置，也称为layout和reflow过程。3)最后调用操作系统NativeGUI的API进行绘制。Threadjs是单线程的，而浏览器是多线程的。浏览器会有不同的线程，比如GUI渲染线程、JS线程、定时器触发线程（setTimeout）、浏览器事件线程（onclick）、http异步线程……同一时刻只有上述线程中的一个线程工作，又名互斥。比如浏览器正在执行GUI渲染线程，那么其他4个进程都处于挂起状态，一直在队列中。DOM渲染对应GUI渲染过程；JS执行对应JS线程；所以DOM渲染和JS代码执行只能同时执行！封杀XXX就是停止XXX。比如JS的执行阻塞DOM解析，即DOM解析-->JS执行（此时暂停DOM解析）-->JS执行完成-->DOM继续解析DOM和CSS。首先看它们之间的关系，即分析CSS加载对DOM解析和渲染的影响。很明显，DOM解析DOMTREE和css样式是什么关系，所以css不影响DOM解析。也很明显，DOM渲染就是生成样式，肯定跟css有关系，所以css影响DOM渲染。结论：css的加载不会阻塞DOM的解析css的加载会阻塞DOM的渲染DOM和JSJS（加载和执行）会阻塞DOM的解析，因为JS可能会对DOM进行操作，可能会改变DOM的结构DOM，所以JS的加载和执行会阻塞DOM解析。JS（加载和执行）会阻塞DOM的渲染，如上，因为在JS中可能会操作样式。注意：每次在html中遇到