Chromium 最新渲染引擎--RenderingNG

真正的救赎，是能在苦难之中，找到生的力量和心的安宁 --阿尔贝·加缪

前言

大家好，我是柒八九。好久没有更文了(2周)，一来是项目活比较多，二来空余时间在系统学习其他的东西，现在还未达到写文章总结的阶段，先做一个剧透，是关于WebAssembly和Vue3原理的，后期会有一些列总结和教程。 👉 敬请期待。

所以总而言之，最近更文懈怠了。

但是，但是，但是，转折来了。今天给大家带来了一个关于Chromium最新渲染架构 RenderNG的译文。(其实这是一些列文章中一篇，后期也会有另外文章的择重翻译)。

1. Chromium本身就是一个浏览器
2. Chrome浏览器一般选择Chromium的稳定版本作为它的基础

既然，Chromium和Chrome之间存在_不清不楚_的关系。所以，针对Chromium的研究其实就是对Chrome后续最新技术方向的_尝鲜_。毕竟，Chrome在当前浏览器份额中一家独大。掌握了它，就相当于掌握了，浏览器最新技术的发展脉络。

last but not least，也不知道大家在平时页面开发之余，是否对浏览器渲染页面的内部机制产生过兴趣。如果有的话，想必大家肯定查阅过很多资料。

例如：

文章地址	年份	推荐⭐️数
How Browsers Work	2011	⭐️
Inside look at modern web browser	2018	⭐️⭐️⭐️
需要🪜
Life of a Pixel	2020	⭐️⭐️⭐️⭐️
有点晦涩难懂
需要🪜
页面是如何生成的(宏观角度)	2022	⭐️⭐️⭐️⭐️⭐️

其实页面是如何生成的(宏观角度)是参考各种资料的一个汇总，也算是自我总结。然后，见文知意，该篇文章是从宏观角度讲述了浏览器是如何处理页面的。

而这篇文章的原文是负责Blink中渲染引擎研发的主管所写。无论是从_专业角度_和_时间新鲜程度_(2021年)都墙裂推荐。

同时，为了行文方便，并且这也算是知识的二次加工，此篇文章不会原封不动的进行机械式翻译。会有一些其他资料的补充和修改。望周知。如果想看原文，文章最后会保有连接。(但是需要🪜)

时间不早了，干点正事哇。(👉 郭德纲语言包)

---

简明扼要

1. 每个tab中被渲染的页面内容是一个树形结构的数据格式(frame)
2. 每一个frame结构包含：
   - DOM 数据信息
   - CSS
   - {画布信息|Canvas}
   - 其他资源，例如 {图片|image}/{视频|video}/{字体|font}/SVG等
3. 渲染过程主要涉及到
   1. 渲染进程中的主线程
   2. 渲染进程中的合成线程
   3. viz进程(也叫GPU进程）
4. 使用一些CSS3的属性,可以在渲染最开始的阶段(Animate)开启硬件加速
   1. transform
   2. opacity
   3. filter
   4. will-change
5. {布局|Layout}阶段 一些非可视化的 DOM 元素不会插入布局树中
   例如“head”元素/如果元素的 display 属性值为“none”，那么也不会显示在呈现树中（但是 visibility 属性值为“hidden”的元素仍会显示）
6. {图层化|Layerize}/{栅格化/图片解码|Raster/Decode} 都是发生在渲染进程的合成线程中
7. 在同一时刻只有被唤起的页面才会占用浏览器进程
8. 线程有助于实现管道并行化和多重缓冲
9. 渲染进程{主线程|Mian Thread}:
   1. 主要负责运行脚本
   2. 管理{事件循环|vent loop}、
   3. 负责文档生命周期
   4. 脚本事件调度
   5. 解析HTML、CSS和其他数据格式
10. 渲染进程{合成线程|Compositor Thread}:
    1. 处理事件的输入
    2.优化页面的内容的滚动和动画效果
    3. 对页面内容进行图层化处理
    3.对图片进行解码处理
    4. 绘画工作单元代码
    5. 进行栅格化操作
11. 渲染进程主线程 {Blink 渲染器|Blink renderer}:
    * {本地frame树|loc