本系列到第七期了，这一期和下一期都来看一下灵犀互娱二面遇到的一些问题。二面过程中的技术问题不多，但是个个都深入原理，而且由于灵犀互娱这边是游戏公司，所以涉及到很多渲染优化的知识点，因此能够学习到很多原理。涉及到原理的部分我的理解比较有限，大家看的时候辩证的看哈。今天我们就看一个问题吧。 Q：浏览器渲染原理是怎么样的，gpu进程和渲染进程之间如何协调配合，如何通信？在问这个问题之前，面试官问了一个大家都被问过的问题：url输入到渲染全流程。没错，整个渲染全流程大家基本都知道，但是想要回答后面的问题就需要更加细致的了解中间的一些概念（先来背一遍进程和线程的概念）。（面试过程肯定不用说下面这么多，但是我觉得借此机会了解整个过程还是很重要的，知道全过程才能用自己的语言描述出来，并且也不怕面试官详细到某个点）

首先来回顾一下浏览器的多进程架构。浏览器的四个主要进程是主进程、第三方插件进程、GPU进程和渲染进程，其中主进程只有一个，负责浏览器界面显示与用户交互，负责各个页面的管理，创建和销毁其他进程等等；第三方插件进程有多个，每种类型的插件对应一个进程，仅当使用该插件时才创建；GPU进程最多一个，与其他进程隔离处理 GPU 任务，用于加速绘制；渲染进程（也就是我们常说的浏览器内核Webkit等）有多个，默认每个 Tab 页面都会产生一个渲染进程，互不影响，他的内部是多线程的，渲染页面、脚本执行之类的就靠他。其中渲染进程有五个主要线程：1.GUI 渲染线程：负责渲染浏览器界面，解析 HTML，CSS，构建 DOM 树和 RenderObject 树，布局和绘制等。需要注意的是GUI 渲染线程与 JS 引擎线程是互斥的。2.JS 引擎线程：JS 引擎线程负责解析 Javascript 脚本，运行代码。JS 引擎一直等待着任务队列中任务的到来，然后加以处理，一个 Tab 页（renderer 进程）中无论什么时候都只有一个 JS 线程（单线程）在运行 JS 程序。3.事件触发线程：他不受JS引擎线程控制，主要用于控制事件（例如鼠标，键盘等事件），当该事件被触发时候，事件触发线程就会把该事件的处理函数添加进任务队列中，等待JS引擎线程空闲后执行。4.定时器触发线程：也就是setTimeout，setInterval所在的线程。浏览器的定时器并不是由JavaScript引擎计数的，因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响计时的准确，因此通过单独的线程来计时并触发定时器，计时完毕后，满足定时器的触发条件，则将定时器的处理函数添加进任务队列中，等待JS引擎线程空闲后执行。5.异步HTTP请求线程：当HttpRequest连接后，浏览器会新开的一个线程，当监控到readyState状态变更时，如果设置了该状态的回调函数，则将该状态的处理函数推进任务队列中，等待JS引擎线程空闲后执行。具体这些线程之间的关系从帖子中找了个图（图1）

然后我们看下渲染原理。浏览器接收到返回的html之后就会开始渲染流程，输入的 HTML 经过一些子阶段，最后输出像素。看看图2，有整个渲染过程。这个过程涉及到渲染进程中的主线程，合成线程和光栅线程池。主线程：1.浏览器接收到HTML后，主线程开始解析HTML并转为DOM结构，在这个过程中，如果遇到script标签会挂起渲染线程，让js线程进行解析，因此script标签会阻碍DOM的解析。2.DOM解析完成后会进行CSS解析，计算样式，在计算过程中需要遵守 CSS 的继承和层叠（层叠的规则不记得的回去抄书）两个规则，这个阶段会构建CSSOM树。3.有了DOM树和CSSOM树就要创造渲染树了，因为有了DOM和component style（每个元素对应的样式）之后还不足以绘制页面，需要知道每个元素的位置和几何属性，这个阶段叫做布局（Layout）。4.有了渲染树之后，由于CSS中有复杂的效果，以及各元素之间有z-index等层级关系，因此下一步是分层。对于这些场景为了页面展示的正确性，渲染引擎还会为特定的节点生成专用的图层，并生成一棵对应的图层树。5.有了渲染树，图层树之后，主线程会遍历这些树并确定一个绘制顺序，创建绘制记录。合成线程：分块，光栅化，合成。上面主线程的步骤走完之后，会将信息提交给合成线程，合成线程中会走光栅化（栅格化）这个步骤。什么叫光栅？大家可以搜一下，就跟栅栏一样，很多很多狭小的缝隙，那么光栅化的过程其实就是把整个页面分割成很多很多小的块去处理。为什么要进行这个处理，就是因为页面很长的时候，用户只能看到视口内容，有些图层可能超过视口很多，一次性渲染整个图层未免有些浪费，因此合成线程会对图层进行分块处理。栅格化之后，每一块会送给光栅线程池中的一个线程。合成线程的最后一个过程就是合成，会创建合成帧通过 IPC 通信（进程通信）提交给浏览器进程。浏览器进程接收到指令后会将内容绘制在内存中并展示在屏幕上。光栅线程：上面提到光栅线程要去处理每个块，这个阶段会和GPU进程进行通信协调，会光栅化每一个图块并存在GPU内存中。至此，浏览器渲染的完整原理就完全结束了

（里面还有很多细节，这里帖一个参考帖：https://segmentfault.com/a/1190000041840526#item-2-8）。到这里也基本可以回答“gpu进程和渲染进程之间如何协调配合”这个问题了，配合的阶段就在光栅化这一步骤。

最后就是主进程，GPU进程和渲染进程三者如何通信。浏览器进程收到用户请求，首先需要获取页面内容（譬如通过网络下载资源），随后将该任务通过 RendererHost 接口传递给渲染进程，渲染进程的 Renderer 接口收到消息，简单解释后，交给渲染线程，然后开始渲染。渲染线程接收请求，加载网页并渲染网页，这其中可能需要浏览器进程获取资源和需要 GPU 进程来帮助渲染，当然可能会有 JS 线程操作 DOM（这样可能会造成回流并重绘）。最后渲染进程将结果传递给浏览器主进程。浏览器进程接到结果并将结果绘制出来。上面都提到了整个流程，那么从这个流程的角度去理解一下重绘和重排。当我们通过 js 或者 css 属性更新了元素的几何属性会触发重排，此时浏览器会触发图3中布局及以后的所有步骤；当我们通过 js 或者 css 更新元素的绘制属性而不改变几何外观的时候，浏览器会触发图3中绘制及以后的所有步骤。因此重绘的开销相比重排会小很多。为什么我们为了避免重排和重绘而去采用 css3 的 transform 等属性呢？因为此时整个主线程的流程会被全部跳过，执行后续的流程，而后续的流程交给了在执行线程、光栅线程和 GPU 进程上执行没有占据主线程的资源，因此效率是最高的。这个问题到这基本就完整结束了，一个小小的问题，其实考察对于浏览器内核的渲染原理，在被问到之前我自己从来静不下心去看这个只是点，因为实在是低频。但是实习过程中又总是听到其他同时讨论渲染进程的优化问题，直到自己被问到不会了才沉的下气去看这些问题。还是要逼自己多看点东西。如果大家觉得有用，欢迎大家点赞收藏关注送花！！！该系列往期链接：第一期：https://www.nowcoder.com/feed/main/detail/a79cb52ce00c4f6d874683e65b8eb718?sourceSSR=users 第二期：https://www.nowcoder.com/feed/main/detail/04aee48cc23f4b09a04d0dba327f0c5d?sourceSSR=users 第三期：https://www.nowcoder.com/feed/main/detail/0195906f12dd4fc0826251e9ceee19ab?sourceSSR=users 第四期：https://www.nowcoder.com/feed/main/detail/2c0a525fa04240778e6c43d7d355a7ca?sourceSSR=users 第五期：https://www.nowcoder.com/discuss/673869939018588160?sourceSSR=users 第六期：https://www.nowcoder.com/feed/main/detail/ebead4b4e5da48439388aab5d4be290d?sourceSSR=users #阿里##灵犀互娱##前端##24届软开秋招面试经验大赏##我的求职思考#

全站热榜