序言
一直以来，所以我对浏览器3D渲染过程全是不求甚解一样的认知能力，在自身看过几篇出色的blog后，用更为简单的表达写出本文，愿大家还有自己对3D渲染过程有一个彻底的了解。
步骤
浏览器过程
浏览器过程现阶段一般分为五种（以chrome为例子)，3D渲染过程是在其中开发设计触碰工作频率数最多的。
-
3D渲染过程。核心工作是把 HTML、CSS 和 JavaScript 转换成用户可与其互动的网页页面，排版设计模块和 JavaScript 模块全是运行在该过程中，默认设置前提下，Chrome 能为每一个 Tab 标识创建一个3D渲染过程。为了安全起见，3D渲染过程全是运行在沙盒模式中。
-
GPU 过程。实际上，Chrome 一开始公布时是并没有 GPU 进度的。而 GPU 的应用初衷是要实现 3D CSS 效果，仅仅接着网页页面、Chrome 的 UI 页面都会选择选用 GPU 来制作，这也使得 GPU 变成电脑浏览器普遍存在的要求。最终，Chrome 则在多线程架构设计上都引进了 GPU 过程。
-
互联网过程。主要从事界面的互联网资源载入，以前是作为一个控制模块运行在浏览器进程里边的，直到最近新独立出来，成为一个独立的进程。
-
软件过程。通常是承担软件的运转，因软件易奔溃，因此需要根据软件过程来防护，以确保软件过程奔溃也不会对电脑浏览器和网页页面产生影响。
步骤介绍
- 解决 HTML 并搭建 DOM 树
- 解决 CSS 搭建 CSSOM 树
- 将 DOM 与 CSSOM 合拼成一个3D渲染树
- 测算合理布局
- 涂层分层次
- 制作并分层
- 光栅化
从 HTML 到 DOM
浏览器进程推送字节数据给3D渲染过程
电脑浏览器通过互联网过程取得数据后，寻找相对应的3D渲染过程，然后把传送数据进来。此刻3D渲染过程拿到最原始数据信息，但也只是字节数据，尚不能被浏览器使用。
字节数据变为标识符
依据字符集将字节数据编解码成标识符数据信息,这个时候的数据信息是我们敲键盘卸下来的代码了。
标识符进一步转化为标识（token）
最初原以为电脑浏览器模块可以直接鉴别html编码并分析，并非如此，而标识是让整理的html编码变成电脑浏览器模块能分析的表达。也可以把标识解读为包括了某一Html标签信息一种算法设计。
连接点
这一步，在线解析把标识转化为连接点，其实就是DOM目标里边的每个单独的实体线，但不是最后的情况，所以这些独立的个体还没有构建起联络
产生DOM树
在线解析把每个连接点相互连接，全部构造就像一个树一样，也就是我们所说的DOM树终于产生。在这样一个树形结构中，每个节点父子兄弟关联就会被过程分析了。
po一张前辈们的流程表让大家都体会更加直观：
搭建CSS树
从html中获得css文档并分析
当分析DOM树过程中出现这一CSS文档，就会造成堵塞随后去获取并分析CSS文档。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="test.css" />
</head>
<body>
test
</body>
</html>
相同的分析体制，电脑浏览器接收到的或是css文档数据库的初始字节数，然后和搭建DOM树一样的操作流程把字节转换为标识符-标识-连接点，最终产生树形结构，也就是大家常谈的CSSOM或CSS树。
但CSS树对比DOM树得多下列对CSS的处理方法：
- 把页面布局的基础属性规范化，如色调全变为rgb格式，em/rem转换成px企业，文字的bold变为700
- 传承父节点的样式，填补或是遮盖，实在找不到父节点的样式，会使用浏览器默认的样式
3D渲染树
如今DOM跟CSSOM都已准备就绪了，但二棵树都相互不认得，此刻浏览器合理布局系统将赋值DOM树每个节点，并且在CSSOM上寻找相对应节点款式，把两者结合成最后的3D渲染树（Render Tree），或者叫合理布局树(Layout Tree)。但并非所有连接点都能被参与到3D渲染树中。
- 看不到的节点（display:none），及其脚本制作script不被3D渲染
- head,meta等不可视标识
扒一张出色时尚博主的图片来给大家更直观感受
测算合理布局
在这过程中，电脑浏览器会算出每一个页面元素大小跟地方，用以后续制作全过程。计算方式涉及到重点知识更加难懂，我们一般只要搞清楚这一过程得到的结果就可以了，感兴趣的可查看下边文章内容作更深层次的掌握。
- 每个人FED团队文章内容-从Chrome源代码看电脑浏览器怎样layout合理布局
分层次
在制作网页页面以前，还有一个分层次的流程，换句话说电脑浏览器页面能被分为许多涂层，而非只有一个涂层包括每一个页面元素。我在使用openlayer开发设计地图板块时对于此事深有感触，像公路网跟地图底图就拿2个涂层各自来操作，公路网的等级要比背景图高，所以我们才能看清世界地图上街道社区或是交通信息。
每个节点都是属于其中一个涂层，要是没有本身相对应的涂层，那么就归属于父节点的涂层。
在浏览器微信开发工具设置中挑选more tools的layers，就能看到截屏里的分层次展现了。
制作
制作目录
电脑浏览器把涂层拆分为一个个小的制作命令，如下图可以看得出，每一个命令涵盖了元素实际操作，部位，特性等。依照次序把命令连在一起便是我们说的制作目录。
分层
3D渲染过程能把精心准备的制作目录递交给生成进程，而这就是专门用来绘制图层进程。生成进程能把涂层划分成较小的图块，先将客户可视距离的图块制作出去。倘若涂层太大，例如根据下拉列表往下拉许多才能看清详细页面，那样彻底绘制图层耗费的成本过高。
在这个过程中涉及到了一个首屏加快这个概念，当涂层较大的情况下，等所有载入完全部耗费更多的资源及其时长，这时候，电脑浏览器会展现一个画面质量版本照片，与此同时顺利进行生成，当图块制作结束后，然后把画面质量的照片替换为正常的图片，这种情况在日常打开网页也常常能够感受到。
光栅化
简单点来说，就是把上面提到的图块，转为位图文件其实就是屏幕上清晰度(pixel)。
- 通常是在栅格化的一个过程，系统将应用GPU来加快，这一过程称为迅速栅格化或GPU栅格化，产生的位图文件也由此保存在GPU内存中了
- 栅格化后，生成进程根据IPC把制作命令发送至浏览器进程，混音器帧传达给 GPU 过程，随后网页页面就制作凸显出来。
别的
重新排列与重绘
重绘(Repaint)
重绘一部分显示屏，款式更改，原素结构尺寸及其部位不会改变。
以下这些实际操作也会导致重绘：
更改 color、background 有关特性
更改 outline 有关特性
更改 border-radius、visibility、box-shadow 等特性
由图可以看得出，重绘并不一定生成DOM，合理布局及其涂层，因而重绘成本比较小。
重新排列(Reflow)：
DOM构造转变，原素结构尺寸更改，必须重新走一遍3D渲染的操作流程，成本费比例绘高，
以下这些实际操作也会导致重新排列：
1. 浏览器窗口尺寸产生变化
2. 原素具体内容、规格、部位、文字大小等产生变化
3. 查看一些特性或是启用一些方式
4. 加上或是删掉看得到的 DOM 原素
能够得知重新排列一定会产生重绘，重绘不一定会引起重新排列
降低重新排列跟重绘
那样怎样减少重新排列跟重绘呢，都是招聘者最统考重点知识之一：
1. 实际操作 DOM 时，一定要在低层次的 DOM 连接点来操作
2. 尽量不要用 table 合理布局，小一点修改可以让table再次合理布局
3. 不必经常实际操作原素款式，针对静态网页，能够改动类名，而非款式
4. 防止经常实际操作 DOM，可以通过建立 documentFragment，则在运用 DOM 程序后，再导入到文本文档
5. 将原素先设为 display:none，实际操作完成后再把它表明
6. 应用visiblity取代display来操作自动隐藏
分析html过程中遇到Javascript脚本制作
在分析html文件信息情况下碰到js，html就会将过程交到Javascript引擎，后面一种会先将js载入并执行完，然后把权利交还给3D渲染过程再次后边html的分析。那为什么堵塞html而先实行javascript，我觉得是javascript的落实会严重影响html的DOM和CSS搭建。
但是这样的体制，如果遇见javascript实行时间太长，或需要互联网过程去要求外界js文档，那载入DOM的时间也将大大减缓，为了解决这个问题，html加入2个特性。
- async: 先到获取文件，这时3D渲染过程执行，等相关资料加载完成后，再堵塞3D渲染并实施JS文件信息具体内容
- defer: 先到获取文件，直至3D渲染过程进行分析html后，再执行JS文件信息具体内容
但是必须注意的是，async跟defer只能用于外界script，不太适合html文档内部script。
同时为了首屏能更有效地3D渲染进行，也有很多人习惯把Javascript放到html的后才。
汇总
尽管在开发过程中，浏览器一些具体3D渲染或者其它过程不会影响大家具体的代码，但是对于剖析及其提升特性的情况下，对3D渲染基本原理的掌握能有助于我们能够更好地向前走一步。看了十几乃至几十篇有关3D渲染过程的讲解，选了在其中三篇自身最喜爱的版本号，并尝试通过自己的语言表达去归纳，希望能帮助到更多阅读者。