重学前端
程劭非(winter)
前手机淘宝前端负责人
105348 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 57 讲
开篇词+学习路线+架构图 (3讲)
重学前端
15
15
1.0x
00:00/00:00
登录|注册

浏览器:一个浏览器是如何工作的?(阶段五)

控制绘制时的消耗
提高性能
will-change属性
最大限度减少绘制次数
优化处理
受影响的属性
Freetype
像素字形和矢量字形
底层库支持
盒的背景、边框、SVG元素、阴影等特性
图形和文字
脏矩形算法
最终绘制到屏幕上
合成层
合成策略
性能考量
位图尺寸
字体库
渲染过程
实现一个玩具浏览器
性能优化
前端技术的设计和应用技巧
浏览器的最终任务
绘制
合成
渲染
结语
URL -> 字符流 -> 词流 -> DOM树 -> 应用CSS规则 -> 计算位置和大小 -> 渲染
浏览器工作原理

该思维导图由 AI 生成,仅供参考

你好,我是 winter。我们的浏览器系列已经进行到最后一篇。
在之前的几篇文章中,我们已经经历了把 URL 变成字符流,把字符流变成词(token)流,把词(token)流构造成 DOM 树,把不含样式信息的 DOM 树应用 CSS 规则,变成包含样式信息的 DOM 树,并且根据样式信息,计算了每个元素的位置和大小。
那么,我们最后的步骤,就是根据这些样式信息和大小信息,为每个元素在内存中渲染它的图形,并且把它绘制到对应的位置。

渲染

首先我们来谈谈渲染这个词,渲染也是个外来词,它是英文词 render 的翻译,render 这个词在英文里面,有“导致”“变成”的意思,也有“粉刷墙壁”的意思。
在计算机图形学领域里,英文 render 这个词是一个简写,它是特指把模型变成位图的过程。我们把 render 翻译成“渲染”,是个非常有意思的翻译,中文里“渲染”这个词是一种绘画技法,是指沾清水把墨涂开的意思。
所以,render 翻译成“渲染”,我认为是非常高明的,对 render 这个过程,用国画的渲染手法来概括,是颇有神似的。
我们现在的一些框架,也会把“从数据变成 HTML 代码的过程”称为 render,其实我觉得这是非常具有误导性的,我个人是非常不喜欢这种命名方式,当然了,所谓“文无第一”,在自然语言的范围里,我们很难彻底否定这种用法的合理性。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

浏览器渲染过程涉及将网页元素转化为位图的复杂过程,包括图形和文字两大类。渲染过程生成的位图尺寸通常与排版时占据的尺寸相同,但实际情况中会受到各种属性的影响。合成过程为提高性能,通过减少绘制次数原则来确定合成的策略。主流浏览器一般根据position、transform等属性来决定合成策略,而新的CSS标准中规定了will-change属性,可以由业务代码来提示浏览器的合成策略,从而提升合成策略的效果。 绘制是把位图最终绘制到屏幕上的过程,需要按照z-index依次绘制到屏幕上。然而,频繁的绘制会带来性能问题,因此采用“脏矩形”算法,将屏幕均匀地分成若干矩形区域,只重新绘制受影响的矩形区域,以控制绘制时的消耗。 总结来说,浏览器的位图操作包括渲染、合成和绘制三个部分,最终将一个URL变成可以看的网页图像。对浏览器工作原理的感性认识可以帮助理解前端技术的设计和应用技巧,尤其在性能优化方面。文章内容涉及浏览器工作原理和性能优化,对于想深入了解前端技术的读者具有一定的参考价值。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《重学前端》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(29)

  • 最新
  • 精选
  • 大漠
    重绘,重排~都蛋疼

    编辑回复: 老师好呀,谢谢留言支持呀。

    2019-02-20
    2
    51
  • 逆风
    浏览器渲染出的结果如果是位图,请问输入框是怎么实现的?

    作者回复: 这个问到点子上啦,这块太复杂我故意没讲,实际上渲染过程除了位图,最终绘制上去还产生一个"热区",这个“热区”不但跟你说的input相关,还跟用户选择、鼠标事件和scroll等交互相关。

    2019-02-20
    45
  • wz
    是用canvas模拟一个iframe吗

    作者回复: 嗯 差不多是这个意思吧

    2019-02-19
    9
  • 宅。
    为什么我们专业老师说windows重绘机制下,只有窗口遮盖会产生无效矩形,鼠标划过是不会导致重绘的?

    作者回复: 我们学习的时候,需要有个基本的逻辑判断能力,而不是根据“谁说的”来判断对错。 如果鼠标划过不会重绘,那么鼠标遮盖住的内容是怎么出来的呢?

    2019-11-05
    6
    7
  • espelansa
    老师您好!在合成这边您写道“如果我们所有的元素都不合成,那么必须要重新绘制所有的元素”,这里我不是特别明白,为什么会需要重新绘制呢?

    作者回复: 你最终把元素画到屏幕上,当然所有元素都要重新绘制了。

    2019-02-22
    4
    3
  • Geek_eea87d
    作者大大,我想知道如果想深层次了解这方面知识应该查看的书籍或者是方向是什么

    作者回复: 书我不知道,可以看看chromium项目的邮件组,自己挑选阅读一些它的源代码。

    2019-04-09
    1
  • oillie
    跟developers.google上的用词有点不太一样,developers.google上是paint(绘制),对应本文中的render(渲染) 另外合成这块有点出入,以文中的例子来说,我的先前的认知是页面默认只有一个layer(chrome里的GraphicsLayer),c元素有transform样式属性,则单独生成一个layer,而合成是指gpu把两张layer合成一张位图

    作者回复: 合成的位图不可能就叫位图吧……

    2019-02-21
    2
    1
  • Hulk
    你好,我理解客户端在使用基于webkit的webView控件的时候,‘浏览器’的工作流程也是这样的吧? 大神能否明确一下浏览器在完成哪个节点以后会让webView控件发出webViewLoadFinish的通知? 此前遇到过一下问题,比如H5前端同学所言js是在页面加载成功后立马调用的,而客户端的同学未收到加载成功(收到webViewLoadFinish回调)却也看到了js的执行效果;所以这两端同学所言的加载成功,想必不是一回事?

    作者回复: 没记错的话LoadFinish应该是跟js里的onload同时发出的。 你可以让你们前端把performance全都打印出来跟你对一下。

    2019-02-21
    1
  • 全林聪
    如果每个盒子都会绘制一张位图, 父子盒子不合并成一张位图, 那么会占据大量的内存, 在把位图渲染到界面的时候, 又会花费大量的GPU, CPU. 所以怎么去合并位图就等同减少内存占用和减少CPU/GPU耗能了, 至于原文说, "可以保证渲染的结果能够最大程度被缓存", 我想指的是, 比如js改变了某一个元素, 不需要绘制位图->合成位图2步,而是只需要绘制位图这一步就可以了, 而原来存在的位图任然有效, 至于渲染成界面, 原文说, "那么如果我们所有的元素都不合成,会怎样呢?结果就是,相当于每次我们都必须要重新绘制所有的元素", 这里的每次都要必须绘制所有的元素, 我觉得有问题, 如果是第一次绘制, 那么会把所有的元素都绘制一次到UI界面上, 如果用js只修改了一个元素, 那么只影响到一个位图的变化, 那么也只会增量绘制一个位图的内容吧?

    作者回复: 怎么增量呢,这个位图可能被别人盖住了一半,你怎么算它的增量区域?

    2019-08-10
  • Geek_28f1ae
    注意,我们这里讲的渲染过程,是不会把子元素绘制到渲染的位图上的,这样,当父子元素的相对位置发生变化时,可以保证渲染的结果能够最大程度被缓存,减少重新渲染。老师,您好,渲染过程不会把子元素渲染到位图中,那渲染完岂不是子元素还没有位图信息?

    作者回复: 有啊 所有元素都要被渲染啊

    2019-04-05
收起评论
显示
设置
留言
29
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部