2021-01-24 简述网页在浏览器中渲染全过程

①当你在地址栏中输入网址的时候，浏览器进程的UI线程会捕捉你的输入内容。如果输入的是关键词，则会使用默认的搜索引擎进行搜索。

②然后UI线程启动一个网络线程请求。

③网络进程会对DNS进行域名解析，并连接服务器请求资源。

④网路线程获取到网络数据之后，浏览器会检测你请求的站点是否安全，如果不安全会进行提示，当然你可以继续访问。当数据准备好了之后，网络线程会通知UI线程数据准备好了。

⑤这时，UI进程开启一个渲染进程。

⑥渲染进程收到HTML内容之后，会通过html解析器进行词法分析将html解析为token流，通过解析后的token构造了dom树，同时生成了document对象，如果中间有js加载会阻塞html的解析。但是我们还不知道dom渲染的样式，所以主线程会解析css样式，并确定dom的计算样式。

通过计算好的样式和dom tree，主线程会生成一个layout tree。

要注意的地方就是，dom tree上设置的display: none属性的节点不会出现在layout tree上。并且::before等伪元素的content会出现在layout tree上，不会出现在dom tree上。主线程通过计算样式记录绘制顺序表，并遍历layout tree生成layer tree。

⑦在记录绘制顺序和layer tree生成后，主线程会将这些信息传递给合成器线程。

⑧合成器将其分割成多图块，分别传递给多个栅格进程。

⑨栅格进程栅格化每个图块并将其存放在GPU内存中。

⑩在栅格完之后会生成一个draw quads的图块信息传给合成器线程，这些信息记录了图块在内存中的位置和页面的位置，根据这些信息生成一个合成器帧。

⑪然后合成器线程会通知渲染进程。

⑫渲染进程将的信息通过IPC传给浏览器进程，

⑬浏览器进程传给GPU进程，GPU进程将页面渲染到屏幕上。

当我们改变样式布局时，会重新计算样式，并重排和重绘。当我们改变颜色属性时，则只会发生重绘。

个人理解大概就是网络域名---->DNS解析----->服务器资源----->渲染DOM tree ---->渲染cssOM tree 同时js会阻碍cssOM tree的渲染---->底层CPU渲染