浏览器:一个浏览器是如何工作的?(阶段五)
该思维导图由 AI 生成,仅供参考
渲染
- 深入了解
- 翻译
- 解释
- 总结
浏览器渲染过程涉及将网页元素转化为位图的复杂过程,包括图形和文字两大类。渲染过程生成的位图尺寸通常与排版时占据的尺寸相同,但实际情况中会受到各种属性的影响。合成过程为提高性能,通过减少绘制次数原则来确定合成的策略。主流浏览器一般根据position、transform等属性来决定合成策略,而新的CSS标准中规定了will-change属性,可以由业务代码来提示浏览器的合成策略,从而提升合成策略的效果。 绘制是把位图最终绘制到屏幕上的过程,需要按照z-index依次绘制到屏幕上。然而,频繁的绘制会带来性能问题,因此采用“脏矩形”算法,将屏幕均匀地分成若干矩形区域,只重新绘制受影响的矩形区域,以控制绘制时的消耗。 总结来说,浏览器的位图操作包括渲染、合成和绘制三个部分,最终将一个URL变成可以看的网页图像。对浏览器工作原理的感性认识可以帮助理解前端技术的设计和应用技巧,尤其在性能优化方面。文章内容涉及浏览器工作原理和性能优化,对于想深入了解前端技术的读者具有一定的参考价值。
《重学前端》,新⼈⾸单¥59
全部留言(29)
- 最新
- 精选
- 大漠重绘,重排~都蛋疼
编辑回复: 老师好呀,谢谢留言支持呀。
2019-02-20251 - 逆风浏览器渲染出的结果如果是位图,请问输入框是怎么实现的?
作者回复: 这个问到点子上啦,这块太复杂我故意没讲,实际上渲染过程除了位图,最终绘制上去还产生一个"热区",这个“热区”不但跟你说的input相关,还跟用户选择、鼠标事件和scroll等交互相关。
2019-02-2045 - wz是用canvas模拟一个iframe吗
作者回复: 嗯 差不多是这个意思吧
2019-02-199 - 宅。为什么我们专业老师说windows重绘机制下,只有窗口遮盖会产生无效矩形,鼠标划过是不会导致重绘的?
作者回复: 我们学习的时候,需要有个基本的逻辑判断能力,而不是根据“谁说的”来判断对错。 如果鼠标划过不会重绘,那么鼠标遮盖住的内容是怎么出来的呢?
2019-11-0567 - espelansa老师您好!在合成这边您写道“如果我们所有的元素都不合成,那么必须要重新绘制所有的元素”,这里我不是特别明白,为什么会需要重新绘制呢?
作者回复: 你最终把元素画到屏幕上,当然所有元素都要重新绘制了。
2019-02-2243 - Geek_eea87d作者大大,我想知道如果想深层次了解这方面知识应该查看的书籍或者是方向是什么
作者回复: 书我不知道,可以看看chromium项目的邮件组,自己挑选阅读一些它的源代码。
2019-04-091 - oillie跟developers.google上的用词有点不太一样,developers.google上是paint(绘制),对应本文中的render(渲染) 另外合成这块有点出入,以文中的例子来说,我的先前的认知是页面默认只有一个layer(chrome里的GraphicsLayer),c元素有transform样式属性,则单独生成一个layer,而合成是指gpu把两张layer合成一张位图
作者回复: 合成的位图不可能就叫位图吧……
2019-02-2121 - Hulk你好,我理解客户端在使用基于webkit的webView控件的时候,‘浏览器’的工作流程也是这样的吧? 大神能否明确一下浏览器在完成哪个节点以后会让webView控件发出webViewLoadFinish的通知? 此前遇到过一下问题,比如H5前端同学所言js是在页面加载成功后立马调用的,而客户端的同学未收到加载成功(收到webViewLoadFinish回调)却也看到了js的执行效果;所以这两端同学所言的加载成功,想必不是一回事?
作者回复: 没记错的话LoadFinish应该是跟js里的onload同时发出的。 你可以让你们前端把performance全都打印出来跟你对一下。
2019-02-211 - 全林聪如果每个盒子都会绘制一张位图, 父子盒子不合并成一张位图, 那么会占据大量的内存, 在把位图渲染到界面的时候, 又会花费大量的GPU, CPU. 所以怎么去合并位图就等同减少内存占用和减少CPU/GPU耗能了, 至于原文说, "可以保证渲染的结果能够最大程度被缓存", 我想指的是, 比如js改变了某一个元素, 不需要绘制位图->合成位图2步,而是只需要绘制位图这一步就可以了, 而原来存在的位图任然有效, 至于渲染成界面, 原文说, "那么如果我们所有的元素都不合成,会怎样呢?结果就是,相当于每次我们都必须要重新绘制所有的元素", 这里的每次都要必须绘制所有的元素, 我觉得有问题, 如果是第一次绘制, 那么会把所有的元素都绘制一次到UI界面上, 如果用js只修改了一个元素, 那么只影响到一个位图的变化, 那么也只会增量绘制一个位图的内容吧?
作者回复: 怎么增量呢,这个位图可能被别人盖住了一半,你怎么算它的增量区域?
2019-08-10 - Geek_28f1ae注意,我们这里讲的渲染过程,是不会把子元素绘制到渲染的位图上的,这样,当父子元素的相对位置发生变化时,可以保证渲染的结果能够最大程度被缓存,减少重新渲染。老师,您好,渲染过程不会把子元素渲染到位图中,那渲染完岂不是子元素还没有位图信息?
作者回复: 有啊 所有元素都要被渲染啊
2019-04-05