2019-08-18减少重排重绘, 方法很多：
1. 使用 class 操作样式，而不是频繁操作 style
2. 避免使用 table 布局
3. 批量dom 操作，例如 createDocumentFragment，或者使用框架，例如 React
4. Debounce window resize 事件
5. 对 dom 属性的读写要分离
6. will-change: transform 做优化展开作者回复: 总结的很好，很有经验👍
6 32- 2019-08-17减少重排重绘，相当于少了渲染进程的主线程和非主线程的很多计算和操作，能够加快web的展示。
1 触发repaint reflow的操作尽量放在一起，比如改变dom高度和设置margin分开写，可能会出发两次重排
2 通过虚拟dom层计算出操作总得差异，一起提交给浏览器。之前还用过createdocumentfragment来汇总append的dom,来减少触发重排重绘次数。作者回复: 很赞
2 21 
2019-08-17渲染进程里的帧的概念是什么样子的呢？一个page是一帧吗作者回复: 可以拿放电影电影来解释，通常，电影的帧速是24，也就是说每秒切换24幅画面，其中的每幅画面就是一帧。
理解什么是帧后，我们在回过头看看我们的页面。由于目前大多数设备的屏幕刷新率为 60 次/秒。因此，如果页面中有一个动画、或一个渐变效果、或者用户正在滚动页面，那么浏览器渲染动画的频率至少要和刷新频率保持一致，也就是每秒需要更新60次，这样我们就能计算出来生成每帧的预算只有（1/60）毫秒，也就是16毫秒多一点(1 秒/ 60 = 16.66 毫秒)。如果超过16毫秒，帧率将下降，并且会出现画面抖动现象，此现象通常被称为卡顿，会对用户体验产生负面影响。
所以，如果想要保证画面的流畅，就需要尽量降低每帧的渲染时间，所以局部更新流水线显得非常重要了，能大大减少处理每帧所消耗的时间。 16
2019-09-27关于浏览器渲染的知识点讲的很细致，我想问下，关于浏览器的渲染细节的知识老师是从哪里学到的？，是通过研究源码学习的吗？有没有一些好的学习资料或者学习方法推荐？能否专门出一篇“授人以渔”的文章，谢谢！作者回复: 主要几个途径：
1:chromium源码
2:chromium源码里面的一些注释和文档
3:还有油管上blinkon上有一些深入讲解内核的视频
目前基本没有系统介绍浏览器知识的文档，而且网上很多文档还是比较早期的，很多内容都不太适合新版的浏览器了。
这里将浏览器知识和前端系统下结合起来是一件工作量非常大的事。 12
2019-08-17请教下老师，canvas的渲染流程是什么样的呢？它不涉及dom，也就不涉及dom树、样式计算、布局、分层，canvas的绘制过程也是在渲染进程中进行的吗？作者回复: canvas绘制流程很简单，就是调用api直接在画布上绘制，没有DOM，也没有太多套路！
所有的绘制都是自己程序控制的 2 6
2019-10-14最后一部分，合成和显示讲的太模糊的，不是很理解。 5
2019-08-17最后的一段话非常经典，赞！大道至简，这真是做软件该秉持的原则，如果实现功能时感受到复杂和无序，那一定是那里错了作者回复: 说的好，如果感觉到复杂和无序，那一定是哪里错了
5
2019-08-27为何我的Layers标签中，选择了document，只有Details tab，没有Profile Tab？ 2 3
2019-08-26老师文中说需要剪裁（clip）的地方也会被创建为图层，但是我复制了老师的代码后，发现需要剪裁的地方并没有单独的被创建为图层，难道是最新版本的谷歌浏览器改了渲染规则？
我的浏览器版本是 76.0.3809.100（正式版本） （64 位） 2 3
2019-08-17老师，你好。
关于把图层分块这块有些疑问，比如手机或者屏幕设备的尺寸并不总是256 * 256 或者 512 * 512 的整数倍。这样就会导致绘制的高度并不总是和内容刚好相等，表现为手机端有时候执行js拿到的html内容高度不对，不知道您遇到过没有？如果有，有没有一些好的实践获取内容高度呢，谢谢。 2- 2019-08-17老师您好！
我想问以下两个问题：
问题1：手机端开发，body 被内容撑开了，超过一屏，在滑动的过程中会不会触发重排，为什么？
问题2：如果 body 高度设置了100%作者回复: 现代浏览器做了优化，把滚动操作交给了合成线程来处理，也就是说滚动的内容会被当成一个单独的图层，发生滚动的事件的时候，图层直接由合成线程来生成，也就是说这种情况下没有占用主线程，所以通常情况下不会产生重排和重回操作，只是简单合成就可以了，这样效率是最高的！
为什么说“通常”呢？ 这是因为目前渲染流程还是很复杂的，在滚动页面时，有些情况下，如果合成线程搞不定的，那么还要交给主线程去处理，这时候就涉及到重拍了，不过技术是往前发展的，渲染流程会变得越来约简单高效！ 3 2 
2019-10-12在GPU进程完成栅格化，并把结果保存在GPU内存中，此时的结果仍然保存在独立进程中。那么从渲染进程的合成线程发送Drawquad命令到浏览器主线程调用Viz组件，主进程是在什么时候拿到之前存在GPU内存中的位图结果的？是Viz主动去GPU内存获取这部分结果进行合成的吗？这里没太看懂。 1
2019-09-18老师，是将所有图块都栅格化，还是刚开始栅格化只可视区的图块，滚动的时候再去动态的栅格化。 2 1- 2019-09-10老师，你好，我有几个问题一直都很很困惑，也没找到答案，希望老师能解惑一下，感谢！
1、图层、图块与BFC有什么区别联系吗？为什么BFC内元素的变动不会对BFC外的元素产生任何影响？是因为BFC会产生一个独立的图层或图块，渲染的时候只用重新渲染这一个图层或图块吗？BFC的原理是什么？
2、在划分图层的时候，每个图层都会生成一系列的绘制指令，而在划分图块的时候，一个图块可能包含多个图层，一个图层也可能分成多个图块，那么在将图块绘制成位图的时候，是如何执行绘制指令的？需要将绘制指令再划分到不同的图块中吗？ 1 
2019-08-19这里的合成线程属于哪个进程？浏览器进程是指主进程吗？前面进程线程那块没有啊作者回复: 合成线程属于渲染进程，你可以看文中示意图！
浏览器进程是主进程，负责提供一些基础服务和调度其它进程，你可以回顾下第一节和第四节内容。 1
2020-02-05想不到久久无法彻底理解的HTTP协议、TCP协议等的关系作用，在这个专栏里得到了解答，非常清晰易懂。这是我第二次学习本专栏了~
2020-02-01图层的合并到底在什么过程中执行，搜了很久没看到相关解释
2020-01-161. ‘合成线程会按照视口附近的图块来优先生成位图’
2. ‘一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程。’
我有个疑问 优先生成的部分位图 绘制不出来吗？
2020-01-06无非是开源节流：
一、减少次数（节流）
使用class类名；
一次性操作cssText；
样式读写分离（防止强制刷新队列）；
使用虚拟节点；
使节点暂时脱离文档流（仅两次重排）。
二、减小范围（节流）
使节点暂时脱离文档流（文档流内元素不受其影响）；
所在容器“固定（不一定是定死多少px）”宽高，不影响容器外部元素布局（这需要写html时注重结构的设计）。
三、GPU加速（开源）
将2d动画改成3d。展开
2019-12-24老师，有个疑问。前面说合成线程优先将视口附近的图块栅格化，后面又说等到所有的图块栅格化，合成线程发出一个绘制图块的命令，然后继续其他操作。那么这个视口附近优先的目的有什么意义呢？究竟是栅格化视口附近的图块，先让浏览器显示，还是栅格化所有图块然后让浏览器显示？