1.浏览器3D渲染基本原理
-
#电脑浏览器是怎样渲染页面的1.什么是3D渲染 render
在我们键入一个url地址情况下,拿到手的其实是一个字符串数组,3D渲染的本质就是把一个字符串数组通过一 系列相对高度计算变为一个个像素数传达给独立显卡开展表明。2.3D渲染的时间节点
当浏览器互联网进程接到html文本文档时,也会产生一个3D渲染每日任务,并把它传达给3D渲染任务主线程的线程池中等候下一次3D渲染的主线程轮循。
全部3D渲染大约分成下边几个方面：html分析 ->款式测算->合理布局->制作->分裂->光护栏->
-
#分析html - Parse html电脑浏览器分析html的操作流程分成三步,第一最先看到这个字符串数组的html,而且再度开一个进程，称为预解析 进程，由于免费下载分析css是会需要一段时间的，假如都放在主线程做会出现时长焦虑，为了能提高工作效率所 以开始预解析过程协助3D渲染主线程开展css的预下载和分析，分析好啦返给3D渲染主线程，让主线程 去形成cssom，这便是css不容易堵塞html的主要原因。第二当遇到js文件信息情况下电脑浏览器会怎样做，他 首先会中止浏览器一切个人行为，等候预解析进程给回到提早手机下载的js，js都是预解析进程提早免费下载 的，假如主线程分析到`script`部位，会终止分析 HTML，继而等候 JS 压缩文件下载好，并把全局性编码 分析实行结束后，才可以分析 HTML。主要是因为 JS 程序代码实施过程可能改动现阶段的 DOM 树，所 以 DOM 树形成务必中止。这便是 JS 会堵塞 HTML 分析的主要原因。最终分析结束后，也会得到 DOM 树和 CSSOM 树，浏览器默认设置款式、内部结构款式、外界款式、业内款式都将包含于 CSSOM 树 中。 -
#款式测算 - Recalculate Style第一步大家拿到产生的DOM 树和 CSSOM 树，这一步便是需要对DOM 树中每个节点含有什么资料开展 测算，这一过程中，许多设定值就会变成平方根，例如`red`就会变成`rgb(255,0,0)`；相对性企业就会变成 肯定企业，例如`em`就会变成`px`,这一步结束后，也会得到一棵含有测算后款式的 DOM 树。 -
#合理布局 - Layout上一步大家把每一个DOM节点款式都测算了出去，这一步的就是按照上一步给予的样式计 计算它的所在位置连接点在哪儿大多数时候，DOM 树和合理布局树并不是一一对应。例如`display:none`的节 点并没有几何图形信息内容，因而不容易形成到合理布局树；再比如采用了伪元素选择符，尽管 DOM 树当中存有这种 伪元素节 点，但是它们有着几何图形信息内容，因此会形成到合理布局树中。也有密名行盒、密名块盒等都会造成 DOM 树 和规划树没法一一对应。 -
#分层次 - Layer浏览器分层次模式在一些旧版本浏览器并没有，提议升级谷歌搜索到最新浏览器探寻 分层次设计理念就是为了避免客户经常刷新网页页面而打造出来的，客户变更这一层的信息只 会让这一层进行更新进而提升工作效率。下拉列表、层叠前后文、transform、opacity 等 款式都是会或多或少危害分层次结论，还可以通过`will-change`特性更多方面产生的影响分 层结论。 -
#制作 - Paint在做完涂层的搭建以后就开展到制作环节,制作环节会将每一个涂层分为许多小一点制作命令,就像大家 如今要画画你也是一点点画得出去的不是一下都出来的,每一步都是在你脑子里展现每一条的指令 -
#分层 - Tiling分层会把每一层分为好几个小一点地区
8. #光栅化 - Raster
光栅化会把每一个块变为位图文件,尽快处理接近视口的块
生成进程会把块信息内容交到 GPU 过程，以非常高的速率进行光栅化。
GPU 过程会打开好几个进程去完成光栅化，而且尽快处理接近视口区域内的块。
光栅化得到的结果，便是一块一块的位图文件
9. #画 - Draw
生成进程算出每一个位图文件在屏幕上部位，最后交到GPU展现
10. #课下小窍门
1.在前端工程师中,div、p等怎么是块种类是由于依照w3c其默认CSS款式标准被划分成两类,默认设置就
给他设定display:block。而并非她们本来就是为块种类
2.在css中可以使用js来控制css。应用document.styleSheets能够为css创建一个新规去执行,并
document.styleSheets 能够掌握到现阶段除开里外联款式和内嵌默认全部css(外部环境)款式
3.什么叫 reflow(逆流)？
reflow 本质上就是重算 layout 树。
当展开了会影响到合理布局树程序后，必须重算合理布局树，会引起 layout。
为了防止连续不断的数次实际操作造成合理布局树反复计算，电脑浏览器会合拼这种实际操作，当 JS 编码所有结束后再进入
行统一测算。因此，修改特性所造成的 reflow 是多线程完成。也是一样由于这般，当 JS 获得合理布局特性
时，就可能导致未获取到最新合理布局信息内容。 电脑浏览器在多次衡量下，最后决定获得特性立reflow。
4.什么叫 repaint(重绘)？
repaint 本质上就是再次依据分层次信息计算了制作命令(Paint)。
当修改了由此可见款式后，那就需要重算，会引起 repaint。
因为元素合理布局信息内容也是属于由此可见款式，因此 reflow 一定会造成 repaint。
5.为何 transform 的高效率？
由于 transform 不仅不会危害合理布局也不影响制作命令，它危害的是3D渲染步骤的最后一个「draw」阶
段因为 draw 环节在生成进程中，因此 transform 的改变基本上也不会影响3D渲染主线程。相反，3D渲染主线任务
程不管怎样繁忙，也不影响 transform 的改变。