渲染树如何形成的

1. 什么是DOM

DOM是Document Object Model（文档对象模型）的缩写，是中立于平台和语言的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。是对HTML文档结构化的表述。
后端服务器返回的HTML文件字节流，浏览器的渲染引擎无法直接理解，需要将其转换为可以理解的内部结构，即DOM。
DOM的作用：^[1]

• DOM是生成可展示页面的基础数据结构；
• DOM提供给Javascript脚本操作的接口，Javascript可以通过这些接口对DOM结构进行访问，从而改变文档的结构和样式；
• DOM是一道安全防线，DOM解析阶段会过滤掉一些不安全的DOM内容。(webkit内核的浏览器有XSS过滤功能.通过模糊匹配 输入参数(GET query| POST form data| Location fragment ) 与 dom树,如果匹配中的数据中包含跨站脚本则不在输出到上下文DOM树中)^[2]
  Chrome和Safari是webkit内核，Firefox是Gecko内核

2. 渲染树形成过程

输入网址
dns解析
tcp连接
发送请求
接收server的返回（html）
解析html文件生成DOM树（下载js css， cssom ，dom和cssom形成渲染树）
Javascript和css对DOM形成的影响

1. html页面中只有内嵌Javascript时， DOM树构建遇到Javascript 会暂停DOM解析，执行Javascript，执行完后再继续DOM解析

2. html页面中只有内嵌css和内嵌Javascript时，执行Javascript时 会判断cssom是否解析完成，确认cssom解析完成后 才会执行Javascript 然后再继续DOM树的创建(因为Javascript可能会操作CSSOM节点？？)，此处可以认为css解析间接影响DOM树创建。
   css如果在js之前，会阻塞js的执行，从而阻塞DOM tree构建
   要想不阻塞DOM tree构建，需要将js在body底部或者使用defer^[3]

3. 当html页面中有外部引入的Javascript、css时，WebKit 和 Firefox 都进行了这项优化。在执行脚本时，其他线程会解析文档的其余部分，找出并加载需要通过网络加载的其他资源。通过这种方式，资源可以在并行连接上加载，从而提高总体速度。请注意，预解析器不会修改 DOM 树，而是将这项工作交由主解析器处理；预解析器只会解析外部资源（例如外部脚本、样式表和图片）的引用。^[4]

3. HTML解析器

server返回给client的html文件字节流，由渲染引擎中的HTML解析器，流式地进行解析（边下载边解析为DOM）

• 字节流转换为字符（character）
  读取HTML的原始字节流，根据文件的指定编码（UTF-8等）将字节流转换为字符；
• 将字符串转换成w3c h5标准规定的各种令牌（token）
  startTag
  text
  endTag
• 将token解析为DOM节点，将DOM节点添加到DOM树中
  • HTML解析器维护了一个token栈结构，用来计算节点间的父子关系，生成的token会被顺序压到栈中。
  • 若压入的是sartTag，（若栈顶是text 则弹出该text 再压入）则创建一个DOM节点 加入到DOM树中，此DOM节点的父节点就是栈中相邻的元素生成的DOM节点。
  • 若即将压入的是endTag（若栈顶是text 则先弹出该text），则查看Token栈顶的元素是否为对应的startTag，若是则将startTag从栈中弹出，若不是则有相应的规则
  • 若即将压入的是text，则查看栈顶元素是否也为text，是则将两个text合并，否则入栈并创建一个text节点

4. CSS解析器

cssom的构建与dom树构建流程基本相同

5. 构建渲染树

css文件不阻塞dom树创建但阻塞页面渲染（render tree）

参考文章

1. 渲染树怎么形成的你真的很懂吗 ↩

2. 如何避免被浏览器 xss过滤 ↩

3. 浏览器加载解析渲染机制的全面解析 ↩

4. 聊聊浏览器的渲染机制
   页面生命周期：DOMContentLoaded, load, beforeunload, unload ↩