06 | 渲染流程（下）：HTML、CSS和JavaScript，是如何变成页面的？
该思维导图由 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-1816206
Luke关于浏览器渲染的知识点讲的很细致，我想问下，关于浏览器的渲染细节的知识老师是从哪里学到的？，是通过研究源码学习的吗？有没有一些好的学习资料或者学习方法推荐？能否专门出一篇“授人以渔”的文章，谢谢！作者回复: 主要几个途径： 1:chromium源码 2:chromium源码里面的一些注释和文档 3:还有油管上blinkon上有一些深入讲解内核的视频 目前基本没有系统介绍浏览器知识的文档，而且网上很多文档还是比较早期的，很多内容都不太适合新版的浏览器了。 这里将浏览器知识和前端系统下结合起来是一件工作量非常大的事。
2019-09-27121
朙渲染进程里的帧的概念是什么样子的呢？一个page是一帧吗作者回复: 可以拿放电影电影来解释，通常，电影的帧速是24，也就是说每秒切换24幅画面，其中的每幅画面就是一帧。 理解什么是帧后，我们在回过头看看我们的页面。由于目前大多数设备的屏幕刷新率为 60 次/秒。因此，如果页面中有一个动画、或一个渐变效果、或者用户正在滚动页面，那么浏览器渲染动画的频率至少要和刷新频率保持一致，也就是每秒需要更新60次，这样我们就能计算出来生成每帧的预算只有（1/60）毫秒，也就是16毫秒多一点(1 秒/ 60 = 16.66 毫秒)。如果超过16毫秒，帧率将下降，并且会出现画面抖动现象，此现象通常被称为卡顿，会对用户体验产生负面影响。 所以，如果想要保证画面的流畅，就需要尽量降低每帧的渲染时间，所以局部更新流水线显得非常重要了，能大大减少处理每帧所消耗的时间。
2019-08-17660
mfist减少重排重绘，相当于少了渲染进程的主线程和非主线程的很多计算和操作，能够加快web的展示。 1 触发repaint reflow的操作尽量放在一起，比如改变dom高度和设置margin分开写，可能会出发两次重排 2 通过虚拟dom层计算出操作总得差异，一起提交给浏览器。之前还用过createdocumentfragment来汇总append的dom,来减少触发重排重绘次数。作者回复: 很赞
2019-08-17341- Geek_East渲染流程的最后，应该是浏览器进程将Compositor Frame发送到GPU, GPU进行显示吧？
作者回复: 这块我没深入将了，因为结构比较复杂，chromium团队还在重构大的架构，既然你问到了，我就简要介绍下： 1:首先渲染进程里执行图层合成(Layer Compositor)，也就是生成图层的操作，具体地讲，渲染进程的合成线程接收到图层的绘制消息时，会通过光栅化线程池将其提交给GPU进程，在GPU进程中执行光栅化操作，执行完成，再将结果返回给渲染进程的合成线程，执行合成图层操作！ 2:合成的图层会被提交给浏览器进程，浏览器进程里会执行显示合成(Display Compositor)，也就是将所有的图层合成为可以显示的页面图片。 最终显示器显示的就是浏览器进程中合成的页面图片
2019-11-28828 
杨陆伟
最后的一段话非常经典，赞！大道至简，这真是做软件该秉持的原则，如果实现功能时感受到复杂和无序，那一定是那里错了作者回复: 说的好，如果感觉到复杂和无序，那一定是哪里错了
2019-08-1726
ytd请教下老师，canvas的渲染流程是什么样的呢？它不涉及dom，也就不涉及dom树、样式计算、布局、分层，canvas的绘制过程也是在渲染进程中进行的吗？作者回复: canvas绘制流程很简单，就是调用api直接在画布上绘制，没有DOM，也没有太多套路！ 所有的绘制都是自己程序控制的
2019-08-17618- tokey老师您好！ 我想问以下两个问题： 问题1：手机端开发，body 被内容撑开了，超过一屏，在滑动的过程中会不会触发重排，为什么？ 问题2：如果 body 高度设置了100%
作者回复: 现代浏览器做了优化，把滚动操作交给了合成线程来处理，也就是说滚动的内容会被当成一个单独的图层，发生滚动的事件的时候，图层直接由合成线程来生成，也就是说这种情况下没有占用主线程，所以通常情况下不会产生重排和重回操作，只是简单合成就可以了，这样效率是最高的！ 为什么说“通常”呢？ 这是因为目前渲染流程还是很复杂的，在滚动页面时，有些情况下，如果合成线程搞不定的，那么还要交给主线程去处理，这时候就涉及到重拍了，不过技术是往前发展的，渲染流程会变得越来约简单高效！
2019-08-17411 
不存在的什么叫既不要布局也不要绘制的属性呢?作者回复: 比如CSS3的实现的一些动画效果
2019-10-209
Warrior重排是否只在当前分层中，会不会影响其他分层的重排？作者回复: 目前会的，不过未来应该会解决这个问题
2019-09-205