网站建设飠金手指排名十三,网站首页加载特效,seo专家是什么意思,教育网站平台建设浏览器是个极其复杂的程序#xff0c;这里只是挑几个和前端息息相关的重要内容来说 在学习如何渲染之前需要知道一个浏览器浏览器会有多个进程#xff0c;其中主要进程有浏览器进程#xff0c;网络进程#xff0c;渲染进程这里我们主要学习内容就发生在渲染进程。当渲染进程…浏览器是个极其复杂的程序这里只是挑几个和前端息息相关的重要内容来说 在学习如何渲染之前需要知道一个浏览器浏览器会有多个进程其中主要进程有浏览器进程网络进程渲染进程这里我们主要学习内容就发生在渲染进程。当渲染进程启动后会开启一个渲染主线程用来执行HTML,CSS,JS代码每打开一个新标签页都会新加一个渲染主线程来保证每个标签页互不干扰。
渲染时间点
当网络线程接收到一个HTML后会生成一个渲染任务放到消息队列排队在事件轮询的机制下渲染主线程会取出渲染任务执行至此渲染流程开始。
渲染流水线
渲染流程又分为多个阶段解析HTML计算样式布局分层绘制分块光栅化画。 每个阶段都有明确的输入和输出上一步的输出会作为下一步的输入这样环环相扣就形成了一条完整的渲染流水线。
解析HTML
渲染的第一步是解析 HTML来生成domcssom树生成树的原因是为了方便后续操作不然一直在HTML字符串取值是一个很痛苦的事情。 解析过程中遇到js执行js遇到css解析css。为了提高效率浏览器会开启一个预解析线程率先下载HTML中的外部css和js文件。 解析到link位置时css文件还没下载好主线程不会等待继续解析后面的HTML这是因为css下载是在预解析线程完成的这也是css不会阻塞HTML解析的根本原因。 解析到script位置时会停止解析HTML转而去等待js文件下载完成且全局解析执行完成后才会继续解析HTML。因为js在执行过程中会改变DOM树所以 DOM 树的生成必须暂停。这就是js会阻塞HTML解析的根本原因
样式计算
主线程会遍历得到的DOM树依次为树的每个节点计算出最终样式也叫做computed style。 在这一过程中会把预设值变为绝对值比如red转换为rgb(255,0,0)em转换为px等最后会得到一个带有样式的DOM树。
布局
主线程会依次遍历DOM树计算出每一个节点的几何信息列如宽高相对于包含块的位置等等。 之后浏览器会用layout树来保存这些几何信息layout树并不是js里的树是浏览器内部的。往往DOM树和layout树并不一一对应比如display:none;的节点就不会有任何几何信息又比如使用伪类虽然DOM树没有这些节点但是这些节点是有几何信息的还有匿名行盒块盒这些都会导致DOM树和layout树并不一一对应。
分层
主线程使用一套复杂的逻辑进行分层。 这样带来的好处就是将来某一层内容变化后只用改变当前层从而提高效率。 滚动条堆叠上下文opacity 等都可以影响分层也可以使用will-change更大程度的影响分层结果。 使用chrome浏览器f12点击图层就可以看到当前页面的分层
绘制
主线程会为每一层生成指令集用于描述这一层如何画出来。
分块
绘制完成后接下来会交给合成线程来处理合成线程会把每一层进行分块处理分成更小的区域 分块过程会启用多个线程来处理。
光栅化
接下来会交给GPU进程处理优先处理靠近视图窗口的块处理后的结果就是一个个位图。(此过程会⽤到 GPU 加速 )
画
合成线程拿到每个块后会生成一个个 quad指引信息。 指引会标记出每个位图应该画到屏幕的某个位置还会考虑缩放旋转变形等。 变形发生在合成线程说于主线程无关之所以transform效率高也是因为于此。 合成线程会把quad交给GPU进程再由GPU进程交给GPU硬件处理最后画到了屏幕上。
完整过程 网络线程接收到一个HTML会添加一个渲染任务到消息队列后经过事件轮询主线程会取出执行渲染任务开启渲染流程渲染流程分为多个阶段 解析HTML解析css执行js生成DOM,CSSOMS树。 计算样式遍历DOM树计算出最终样式生成一个带有样式的DOM树。 布局遍历DOM树生成几何信息的layout树layout树和DOM树通常不一一对应。 分层为了提高效率使用一套复杂的策略分层滚动条transform都会影响分层will-change会更大程度的影响分层结果。 绘制为每一层生成指令集用于描述如何画出它。 到这里主线程已处理完毕接下来交给其他线程处理 分块接下来由合成线程会使用多个线程把每一层分成更小的区域。 光栅化会使用GPU进程把每个块生成位图。 画合成线程拿到块层后生成一个个指引之后交给GPU线程GPU线程产生系统调用交给GPU硬件显示到屏幕上。
面试题
看完以上浏览器是渲染页面的全流程那么下面的几道经典面试题也就迎刃而解了。不懂得可以多看几遍流程加深理解。 什么是 reflow回流 回流的本质就是重新计算layout树 浏览器为了尽可能减少reflow和repaint操作会合并这些操作等到js全部执行完成后再去重新计算所以回流改变是异步的。 那么什么时候会产生同步的layout呢? 当 JS 获取布局属性时比如getComputedStyle()或currentStyle、offsetTop、offsetLeft、offsetWidth、offsetHeight等等。因为异步会导致获取到错误的值浏览器在反复权衡下最终决定获取属性立即 reflow。 什么是 repaint重绘 repaint的本质就是根据分层信息计算了绘制指令。 当改动了可见样式后就会触发重绘。 由于布局样式也是可见样式所以reflow一定会触发repaint。 为什么transform效率高 因为transform不涉及到reflow和repaint它只影响最后一个画的阶段所以效率高。 由于画draw阶段在合成线程中所以几乎不影响主线程反之主线程哪怕在忙也不会影响到transform的变化。
有问题的地方还请大佬及时指出我会及时修改谢谢
