DOM的解析渲染过程

Posted 2021-11-30 summerlist

获取到html文件

第一步当用户在url中输入网址时

1. 浏览器会检查缓存中有没有这个域名对应的解析过的IP地址，如果缓存中有，这个解析过程就结束。

2. 如果在本地没有找到对应的ip地址，就到本地域名服务器中去找。

3. 如果本地域名服务器没找到就向根域名服务器发起请求去找。

第二步：找到IP地址后浏览器和服务器建立连接(属于传输层，涉及TCP，UDP协议，TCP的三次握手和松手过程，TCP支持的应用协议主要有：Telnet、FTP、SMTP等；UDP支持的应用层协议主要有：NFS（网络文件系统）、SNMP（简单网络管理协议）、DNS（主域名称系统）、TFTP（通用文件传输协议）等。)

第三步： 浏览器发起HTTP(属于五层网络模型中的应用层，涉及HTTP协议，TODO: 《图解HTTP》)请求（属于五层模型中的应用层），服务器发送回HTTP报文。 
接下来就会释放TCP链接。

构建DOM树

由于浏览器采用自上而下的方式解析，在遇到这两种元素时都会阻塞浏览器的解析，直到外部资源加载并解析或执行完毕后才会继续向下解析html。对于样式与脚本的先后顺序同样也会影响到浏览器的解析过程，究其原因主要在于：script脚本执行过程中可能会修改html界面（如document.write函数）；DOM节点的CSS样式会影响js的执行结果。

DOM树创建完成后DOMContentLoaded事件即触发，这时候可以用过script来操作DOM节点。

构建呈现树

HTML解析完毕后，开始构建呈现树RenderTree，这一步的主要工作在于将css样式应用到DOM节点上，WebKit内核将这一过程称为附着，其他浏览器有不同的概念。对前端工程师而言这个过程会涉及到CSS层叠问题。

呈现树的每一个节点即为与其相对应的DOM节点的CSS框，框的类型与DOM节点的display属性有关，block元素生成block框，inline元素生成inline框。每一个呈现树节点都有与之相对应的DOM节点，但DOM节点不一定有与之相对应的呈现树节点，比如display属性为none的DOM节点，而且呈现树节点在呈现树中的位置与他们在DOM树中的位置不一定相同，比如float与绝对定位元素。

布局

呈现树之后进入“布局”处理阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。

为达到更好的用户体验，呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时，呈现引擎会将部分内容解析并显示出来。

绘制

在绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。绘制工作是使用用户界面基础组件完成的。