2019-02-20重绘，重排～都蛋疼编辑回复: 老师好呀，谢谢留言支持呀。
40
2019-02-20浏览器渲染出的结果如果是位图，请问输入框是怎么实现的？作者回复: 这个问到点子上啦，这块太复杂我故意没讲，实际上渲染过程除了位图，最终绘制上去还产生一个"热区"，这个“热区”不但跟你说的input相关，还跟用户选择、鼠标事件和scroll等交互相关。
23
2019-02-21浏览器工作流程：
从服务器端获取文档数据☞浏览器解析成DOM树☞CSS根据DOM规则开始排版文档内容☞浏览器分文字和图形进行渲染在窗口展现☞接下来就是JS的交互了。
自己根据印象总结下。 8
2019-02-19是用canvas模拟一个iframe吗作者回复: 嗯 差不多是这个意思吧
8
2019-03-07所以重绘不一定是什么恐怖的事情，真正的问题在于需要重绘的位图尺寸，不知道可以这么理解吗 4- 2019-02-19做一个玩具浏览器的想法有点大胆好玩哈哈基础打好后可以尝试！ 4
2019-02-22老师您好！在合成这边您写道“如果我们所有的元素都不合成，那么必须要重新绘制所有的元素”，这里我不是特别明白，为什么会需要重新绘制呢？作者回复: 你最终把元素画到屏幕上，当然所有元素都要重新绘制了。
1 3
2019-04-28老师有几个问题希望回答：
文中提到：“注意，我们这里讲的渲染过程，是不会把子元素绘制到渲染的位图上的，这样，当父子元素的相对位置发生变化时，可以保证渲染的结果能够最大程度被缓存，减少重新渲染。”
1.缓存的是什么东西，位图吗？如何减少重新渲染的？
2.是不是所有的元素都有对应的位图？
文中你举了两个例子，说如果只有一个位图，任何改变都会引起所有重新渲染。
这个好理解，一个大位图就是一个单元，任何的改动相当于这个单元被变了，所以要重新创建这个，这样理解对吗？
但是你下面又说如果不合并，每次还是所有的重新渲染。
感觉说的很矛盾啊，如果上面说的缓存的位图，那么不合并的位图就不缓存吗，不能减少重新渲染吗?另外如果不合并，有元素变更，所有的都重新进行了渲染，那是不是合并了也会重新渲染呢？只是单元的个数减少从而提升了性能，就像http请求使用长连接，合并小请求，减少简历三次握手的次数是一个道理呢？
希望老师能回答一下我的疑问。展开 2
2019-03-13总结：
页面图片的本质就是一张“完整的二维表格（页面图片的每个像素对应的颜色保存进去的二维表格）”
渲染：把DOM树的各个元素变成位图（二维表格）
合成（可选）：把不会经常改变位置和样式的元素的位图“拼接起来”，变成一个较大的合成后的位图（暂时称之为“较大的位图”）。（有个问题：合成只能合成有父子关系的元素的位图吗？）
绘制：把各个DOM元素的位图 和 “较大的位图”“拼接”成一个最终位图，交给操作系统，最后呈现出页面图片。
请问老师，这样总结有什么不妥之处？展开 2
2019-03-12请问老师伪元素是怎么渲染展示的呢？ 1- 2019-02-23感觉一遍看下来不是太懂，只能多看两遍 1
2019-02-21跟developers.google上的用词有点不太一样，developers.google上是paint（绘制），对应本文中的render（渲染）
另外合成这块有点出入，以文中的例子来说，我的先前的认知是页面默认只有一个layer（chrome里的GraphicsLayer），c元素有transform样式属性，则单独生成一个layer，而合成是指gpu把两张layer合成一张位图作者回复: 合成的位图不可能就叫位图吧……
1
2019-02-21你好，我理解客户端在使用基于webkit的webView控件的时候，‘浏览器’的工作流程也是这样的吧？
大神能否明确一下浏览器在完成哪个节点以后会让webView控件发出webViewLoadFinish的通知？
此前遇到过一下问题，比如H5前端同学所言js是在页面加载成功后立马调用的，而客户端的同学未收到加载成功(收到webViewLoadFinish回调)却也看到了js的执行效果；所以这两端同学所言的加载成功，想必不是一回事？作者回复: 没记错的话LoadFinish应该是跟js里的onload同时发出的。
你可以让你们前端把performance全都打印出来跟你对一下。 1
2019-02-19没想到之前对“重绘”的理解并不准确，发生的频率远比想象的高很多，学到了。 1
2019-11-05为什么我们专业老师说windows重绘机制下，只有窗口遮盖会产生无效矩形，鼠标划过是不会导致重绘的？作者回复: 我们学习的时候，需要有个基本的逻辑判断能力，而不是根据“谁说的”来判断对错。
如果鼠标划过不会重绘，那么鼠标遮盖住的内容是怎么出来的呢？
2019-08-10如果每个盒子都会绘制一张位图, 父子盒子不合并成一张位图, 那么会占据大量的内存, 在把位图渲染到界面的时候, 又会花费大量的GPU, CPU. 所以怎么去合并位图就等同减少内存占用和减少CPU/GPU耗能了, 至于原文说, "可以保证渲染的结果能够最大程度被缓存", 我想指的是, 比如js改变了某一个元素, 不需要绘制位图->合成位图2步,而是只需要绘制位图这一步就可以了, 而原来存在的位图任然有效, 至于渲染成界面, 原文说, "那么如果我们所有的元素都不合成，会怎样呢？结果就是，相当于每次我们都必须要重新绘制所有的元素", 这里的每次都要必须绘制所有的元素, 我觉得有问题, 如果是第一次绘制, 那么会把所有的元素都绘制一次到UI界面上, 如果用js只修改了一个元素, 那么只影响到一个位图的变化, 那么也只会增量绘制一个位图的内容吧?作者回复: 怎么增量呢，这个位图可能被别人盖住了一半，你怎么算它的增量区域？
2019-06-11听起来很像设计原型图
2019-05-23老师请问下，对这句话不太懂“那么如果我们所有的元素都不合成，会怎样呢？结果就是，相当于每次我们都必须要要重新绘制所有的元素，这也不是对性能有好的选择”，照您说的渲染过程是把每一个元素对应的盒变成位图，既然是这样那我即使都不合成，也不太会影响呀 修改哪个元素就重新渲染下哪个元素呀- 2019-04-09作者大大，我想知道如果想深层次了解这方面知识应该查看的书籍或者是方向是什么
作者回复: 书我不知道，可以看看chromium项目的邮件组，自己挑选阅读一些它的源代码。
- 2019-04-05注意，我们这里讲的渲染过程，是不会把子元素绘制到渲染的位图上的，这样，当父子元素的相对位置发生变化时，可以保证渲染的结果能够最大程度被缓存，减少重新渲染。老师，您好，渲染过程不会把子元素渲染到位图中，那渲染完岂不是子元素还没有位图信息？
作者回复: 有啊 所有元素都要被渲染啊