JS：渲染引擎执行原理（*****高阶五颗星）

1.问题：输入URL按下回车发生了什么？（可看谷歌官网）

浏览器主进程的UI线程（负责监控用户的行为）会判断在浏览器地址栏输入的是查询还是URL。如果是URL，则UI线程发现输入的是URL就会调度网络进程的网络线程，让网络线程处理一下URL，网络线程开始处理，网络线程处理完成，它根据IRL发送的请求以及接受了响应拿到了数据。把数据返回给UI线程，UI线程收到数据，把数据包装成一个渲染任务，就会通知渲染进程，让渲染进程来渲染一些页面（页面就是UI线程发送给渲染进程的渲染任务），把渲染任务给渲染进程的主线程（主线程在页面一启动就一直在查询任务），来了任务渲染进程的主线程开始执行任务。即：

UI线程判断是不是URL，如果是，则统治者网络进程处理。
UI线程得到数据后，包装成渲染任务放入任务队列，渲染进程的主线程开始渲染任务。

2.渲染任务具体怎么进行？

渲染任务是渲染引擎处理的。

3.什么是浏览器的渲染？

浏览器的渲染就是把HTML字符串通过一个程序（程序就是渲染引擎，还有其它东西相互配合的）生成像素信息（绘制指令）。当确定了像素的颜色就确定了显示器上的图像。然后把像素信息交给硬件（GPU显卡），最后真正的信息显示在显示器上。

1.UI线程拿到的数据是什么？

是HTML（HTML包含了所有的CSS和JS）

2.HTML本质是什么？

HTML本质是字符串，所有语言本质上都是字符串。

4.渲染引擎的工作

渲染引擎的第一步：已经拿到HTML字符串了，第一步就是解析HTML文本（PSRESE HTML）（牵扯到编译原理），通过HTML固定的规则把HTML字符串转换成可用的信息。

对HTML文本进行解析，他可能遇到那些标签？----元素标签，CSS（link、style标签等），JS（script标签，解析HTMl过程中遇到JS脚本要停止解析HTML，把渲染引擎挂起，转去执行JS 脚本，如果遇到外部的JS脚本，需要先把JS脚本先下载好才行，否则会一直等，等JS执行之后，才能继续解析HTML，所以js会堵塞HTML解析，把HTML文本字符串转换成需要的信息）

1.解析HTML遇到元素标签

生成DOM树（查看和尝试绘制）（C++对象）

如：

js是可以被宿主环境所拓展的，这时候主线程会包装一下C++对象，就包装成为JS对象。然后注入到整个JS里，实现拓展。

console.dir(document)//可以查看document对象内容，

上图可以一直往下看children，就能看到dom树上那些元素。

浏览器F12后显示的红框内容就是DOM树，不是HTML。

可用下面方式验证：

2.解析HTML遇到CSS

浏览器对CSS解析在另一个线程进行，不和HTML解析在一个线程，不在主线程。

为什么解析HTML和解析CSS不在一个线程呢？

为了提高效率，因为解析HTML和解析CSS是相互不干扰的。

有一个预解析线程，它会提前浏览一遍HTML文档，把里面的style标签（CSS内容）进行预处理，发现lin标签也会提前去下载，下载CSS和解析HTML是不冲突的，但是不代表CSS不会影响HTML解析，CSS最后会应用到每个节点上，又一个attachment（合并）的过程，如图：HTML解析和CSS解析过程

CSS解析会生成CSSOM tree，他也是一个树型的结构，也是一个C++对象。C++对象可以用document.styleSheets节点来展示style的内容，有几个style就会有几个长度，解析每个style的css变成CSSOM对象。styleSheets节点是每个子节点的是所有CSS的来源。