浏览器工作原理与实践
李兵
前盛大创新院高级研究员
56402 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 46 讲
浏览器工作原理与实践
15
15
1.0x
00:00/00:00
登录|注册

06 | 渲染流程(下):HTML、CSS和JavaScript,是如何变成页面的?

思考时间
相关概念
渲染流水线
渲染流程

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

上篇文章中,我们介绍了渲染流水线中的 DOM 生成、样式计算布局三个阶段,那今天我们接着讲解渲染流水线后面的阶段。
这里还是先简单回顾下上节前三个阶段的主要内容:在 HTML 页面内容被提交给渲染引擎之后,渲染引擎首先将 HTML 解析为浏览器可以理解的 DOM;然后根据 CSS 样式表,计算出 DOM 树所有节点的样式;接着又计算每个元素的几何坐标位置,并将这些信息保存在布局树中。

分层

现在我们有了布局树,而且每个元素的具体位置信息都计算出来了,那么接下来是不是就要开始着手绘制页面了?
答案依然是否定的。
因为页面中有很多复杂的效果,如一些复杂的 3D 变换、页面滚动,或者使用 z-indexing 做 z 轴排序等,为了更加方便地实现这些效果,渲染引擎还需要为特定的节点生成专用的图层,并生成一棵对应的图层树(LayerTree)。如果你熟悉 PS,相信你会很容易理解图层的概念,正是这些图层叠加在一起构成了最终的页面图像。
要想直观地理解什么是图层,你可以打开 Chrome 的“开发者工具”,选择“Layers”标签,就可以可视化页面的分层情况,如下图所示:
渲染引擎给页面多图层示意图
从上图可以看出,渲染引擎给页面分了很多图层,这些图层按照一定顺序叠加在一起,就形成了最终的页面,你可以参考下图:
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文深入介绍了渲染流水线中的DOM生成、样式计算、布局、图层、绘制、光栅化、合成和显示等多个阶段,以及与渲染流水线相关的概念——“重排”“重绘”和“合成”。通过生动的图示和详细的解释,读者可以全面了解HTML、CSS和JavaScript是如何经过渲染流程最终呈现为页面的。文章以深入浅出的方式,适合技术人员快速了解和掌握相关知识。此外,文章还提到了优化Web性能的方法,强调了减少重绘、重排对性能优化的重要性,并鼓励读者思考如何实践减少重绘、重排的具体方法。整体而言,本文内容丰富、深入,对于理解和优化Web页面渲染性能具有重要参考价值。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《浏览器工作原理与实践》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(143)

  • 最新
  • 精选
  • Hurry
    减少重排重绘, 方法很多: 1. 使用 class 操作样式,而不是频繁操作 style 2. 避免使用 table 布局 3. 批量dom 操作,例如 createDocumentFragment,或者使用框架,例如 React 4. Debounce window resize 事件 5. 对 dom 属性的读写要分离 6. will-change: transform 做优化

    作者回复: 总结的很好,很有经验👍

    2019-08-18
    16
    206
  • Luke
    关于浏览器渲染的知识点讲的很细致,我想问下,关于浏览器的渲染细节的知识老师是从哪里学到的?,是通过研究源码学习的吗?有没有一些好的学习资料或者学习方法推荐?能否专门出一篇“授人以渔”的文章,谢谢!

    作者回复: 主要几个途径: 1:chromium源码 2:chromium源码里面的一些注释和文档 3:还有油管上blinkon上有一些深入讲解内核的视频 目前基本没有系统介绍浏览器知识的文档,而且网上很多文档还是比较早期的,很多内容都不太适合新版的浏览器了。 这里将浏览器知识和前端系统下结合起来是一件工作量非常大的事。

    2019-09-27
    121
  • 渲染进程里的帧的概念是什么样子的呢?一个page是一帧吗

    作者回复: 可以拿放电影电影来解释,通常,电影的帧速是24,也就是说每秒切换24幅画面,其中的每幅画面就是一帧。 理解什么是帧后,我们在回过头看看我们的页面。由于目前大多数设备的屏幕刷新率为 60 次/秒。因此,如果页面中有一个动画、或一个渐变效果、或者用户正在滚动页面,那么浏览器渲染动画的频率至少要和刷新频率保持一致,也就是每秒需要更新60次,这样我们就能计算出来生成每帧的预算只有(1/60)毫秒,也就是16毫秒多一点(1 秒/ 60 = 16.66 毫秒)。如果超过16毫秒,帧率将下降,并且会出现画面抖动现象,此现象通常被称为卡顿,会对用户体验产生负面影响。 所以,如果想要保证画面的流畅,就需要尽量降低每帧的渲染时间,所以局部更新流水线显得非常重要了,能大大减少处理每帧所消耗的时间。

    2019-08-17
    6
    60
  • mfist
    减少重排重绘,相当于少了渲染进程的主线程和非主线程的很多计算和操作,能够加快web的展示。 1 触发repaint reflow的操作尽量放在一起,比如改变dom高度和设置margin分开写,可能会出发两次重排 2 通过虚拟dom层计算出操作总得差异,一起提交给浏览器。之前还用过createdocumentfragment来汇总append的dom,来减少触发重排重绘次数。

    作者回复: 很赞

    2019-08-17
    3
    41
  • Geek_East
    渲染流程的最后,应该是浏览器进程将Compositor Frame发送到GPU, GPU进行显示吧?

    作者回复: 这块我没深入将了,因为结构比较复杂,chromium团队还在重构大的架构,既然你问到了,我就简要介绍下: 1:首先渲染进程里执行图层合成(Layer Compositor),也就是生成图层的操作,具体地讲,渲染进程的合成线程接收到图层的绘制消息时,会通过光栅化线程池将其提交给GPU进程,在GPU进程中执行光栅化操作,执行完成,再将结果返回给渲染进程的合成线程,执行合成图层操作! 2:合成的图层会被提交给浏览器进程,浏览器进程里会执行显示合成(Display Compositor),也就是将所有的图层合成为可以显示的页面图片。 最终显示器显示的就是浏览器进程中合成的页面图片

    2019-11-28
    8
    28
  • 杨陆伟
    最后的一段话非常经典,赞!大道至简,这真是做软件该秉持的原则,如果实现功能时感受到复杂和无序,那一定是那里错了

    作者回复: 说的好,如果感觉到复杂和无序,那一定是哪里错了

    2019-08-17
    26
  • ytd
    请教下老师,canvas的渲染流程是什么样的呢?它不涉及dom,也就不涉及dom树、样式计算、布局、分层,canvas的绘制过程也是在渲染进程中进行的吗?

    作者回复: canvas绘制流程很简单,就是调用api直接在画布上绘制,没有DOM,也没有太多套路! 所有的绘制都是自己程序控制的

    2019-08-17
    6
    18
  • tokey
    老师您好! 我想问以下两个问题: 问题1:手机端开发,body 被内容撑开了,超过一屏,在滑动的过程中会不会触发重排,为什么? 问题2:如果 body 高度设置了100%

    作者回复: 现代浏览器做了优化,把滚动操作交给了合成线程来处理,也就是说滚动的内容会被当成一个单独的图层,发生滚动的事件的时候,图层直接由合成线程来生成,也就是说这种情况下没有占用主线程,所以通常情况下不会产生重排和重回操作,只是简单合成就可以了,这样效率是最高的! 为什么说“通常”呢? 这是因为目前渲染流程还是很复杂的,在滚动页面时,有些情况下,如果合成线程搞不定的,那么还要交给主线程去处理,这时候就涉及到重拍了,不过技术是往前发展的,渲染流程会变得越来约简单高效!

    2019-08-17
    4
    11
  • 不存在的
    什么叫既不要布局也不要绘制的属性呢?

    作者回复: 比如CSS3的实现的一些动画效果

    2019-10-20
    9
  • Warrior
    重排是否只在当前分层中,会不会影响其他分层的重排?

    作者回复: 目前会的,不过未来应该会解决这个问题

    2019-09-20
    5
收起评论
显示
设置
留言
99+
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部