浏览器是根据更改重新渲染整个页面还是仅重新渲染特定元素？

Question

假设我有一个 id #msg的元素，并且在某种情况下我想向它添加一个 class 以应用样式，例如使文本显示为红色。
我可以做$('#msg').addClass(theclass)
我的问题是浏览器如何反应？ 它是重新渲染所有页面还是重新渲染该特定元素？

Answer 1

使用您的示例（ addClass ），它取决于您添加的类中的内容。 添加类本身只会修改目标节点上的属性。

• 某些更改将导致重新绘制 ，即更改颜色，bgcolor等时。将仅重新呈现应用新CSS的元素。
• 有些变化会引起回流 ，那就是当元素及其内容所占据的可视空间改变的尺寸或位置。 取决于他们自己，他们的父母和孩子的属性，以及那些父母和孩子的属性等等，重排将影响文档树中的更多元素。

浏览器非常智能，只能修改需要重新渲染的元素。 最小化重新渲染量的技术是设置元素的position: absolute或display: none以暂时从文档流中删除它，进行更改，然后重新插入。 如果，例如，这尤其重要。 你让一些元素向下滑动。 如果元素位于DOM树的流程和开头，则它所延伸的每个像素都将导致重新渲染。

为了好玩，让我们在桌子上用纸做一个简单的比喻，在这个例子中插入元素。 桌子是你的浏览器窗口， □ =纸张， _ =空的空间。 您想将另一张纸放在最左上方的位置。 这是开始的情况：

□ □ □ □
□ □ □ □
_ _ _ _

将新工作表放在桌面上后：（■= new，▧=已移动）

■ □ □ □
▧ □ □ □
▧ _ _ _

如果第二行是一卷长纸（=全宽div），则整行会移动：

■ □ □ □
▧ _ _ _
▧▧▧▧▧▧▧

但是，如果您将纸张插入第三行，则不会发生回流。

注意：这是理论上的解释。 它的效率因浏览器而异。
来源：高性能Javascript，'重绘和回流'，第70页。

Answer 2

根据此工具https://developer.chrome.com/devtools/docs/timeline提供的结果，我的理解是NO ，整个DOM不会重新绘制/重新生成，只是具有类更改的元素。

演示

HTML：

<p>Lorem ipsum dolar sit amet...</p>

<input id="btn" type="button" value="click me" />

使用Javascript：

$(document).on('click', '#btn', function () { 
  $('p').addClass('red')  
})

CSS：

.red {
    color: red;
}

****编辑****我不得不将我的答案从No更改为Yes，然后从Yes返回No。 该工具明确指出要重新绘制的元素，其他DOM元素不受影响。

但是，如果元素内部/外部维度发生更改，甚至需要通过javascript查询，则需要重新绘制DOM元素，并重新绘制整个元素分支，然后由浏览器进行缓存。

Answer 3

关键渲染路径是浏览器将 HTML、CSS 和 JavaScript 转换为屏幕上的像素的步骤序列。 优化关键渲染路径可提高渲染性能。