浏览器是如何渲染UI的

1. 浏览器获取HTML文件，然后对文件进行解析，形成DOM Tree.
2. 与此同时，进行css解析，生成style Rules.
3. 接着将DOM Tree与style Rules合成Render Tree.
4. 进入布局阶段（Layout）,也就是为每个节点分配一个应出现在屏幕上的确切坐标
5. 调用Gpu进行绘制（Paint）,遍历Render Tree的节点，并将元素呈现出来

DOM Tree是如何构建的

1. 转码：浏览器将接受的二进制数据按照指定编码格式转化为HTML字符串
2. 生成Tokens:之后parser，浏览器会将HTML字符串解析成Tokens
3. 构建Nodes：对Node添加特定的属性，通过指针确定Node的父子兄弟关系和所属的treeScope
4. 生成DOM Tree:通过node包含的指针确定的关系构建出DOM Tree