浏览器运作的原理总结

浏览器的组成部分

用户界面（我们浏览网页呈现出来的界面）

浏览器引擎（里面有数据持久层，比如cookie）

渲染引擎（里面有请求网络得程序，JS解析器）

浏览器向服务器请求网页，浏览器拿到网页并渲染网页的过程。

1.浏览器创建了一个渲染器进程来渲染页面。

浏览器通过IPC管道将网页数据传递给渲染器进程，渲染器进程的主线程将HTML进行解析，构造DOM数据结构。

它的过程是这样的：

渲染器进程的主线程首先经过tokeniser标记化，通过词法分析将输入的HTML内容解析成多个标记，根据识别后的标记进行DOM树的构造，在这个过程中会创建document对象，然后以document为根节点的对象不断进行修改，向其中添加各种元素（孩子）。（dom树的形成）

HTML代码中往往有一些额外的资源，例如css,js,图片等，图片和CSS这些资源不会阻塞HTML的解析，因此它们不会影响DOM树的生成。但如果遇到JS脚本则会停止html解析流程，去加载解析并且执行JS。此时dom树已经构建完毕了，但是它上面的每个节点还没有确定的模样，就比如有了骨架，但是缺少肉等组织。这时候主线程会开始根据每个节点的计算样式来解析CSS并渲染每个节点，此时构成的树称为layoutTree。（layout树的形成）

此时我们知道了每个节点的大下形状，但是它每个节点的位置应该放在页面哪里以及占用页面多大区域浏览器还不清楚，当layoutTree构成完毕后，主线程会遍历layoutTree创建一个绘制记录表（paint record），该表记录了每个节点的绘制顺序。之后主线程根据这个绘制顺序将元素转换成像素点显示在屏幕上（称为栅格化），此时生成了layerTree（图层树）。（layer树的形成）

此时layerTree从主线程传给合成器线程，合成器线程将其转换成更小的图块(tiles)后传给栅格化线程进行栅格化，并在栅格化线程生成了图块信息（draw quads）。再将其传给合成器线程生成帧（frame）此时该帧将传给浏览器进程，浏览器进程再传给gpu渲染，之后页面就展示在你的浏览器上了。（页面的形成）

总结：

 

面试常问问题：

 JS如果占用了主线程的时间过长，导致动画效果出现卡帧现象，请问如何优化？

答：通过requestAnimation()这个API来进行优化。当在一帧的时间内布局和绘制结束后，如果还有剩余的时间，JS将会拿到主线程。requestAnimation()是按帧执行的，在每一帧时间用完前暂停JS。通过这个API将会把JS的任务分成多个小任务来完成，从而不占用主线程超过一帧的时间。

为什么要用transform这个来执行重复的动画效果？

因为该属性不会经过布局和绘制，而是直接在合成器线程与栅格线程中运行。不会占用主线程。

资料总结来自：

https://www.bilibili.com/video/BV1x54y1B7RE