javascript - 浏览器是根据更改重新呈现整个页面还是仅重新呈现特定元素？

Question

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

Answer 1

对于您的示例 (addClass)，这取决于您添加的类中的内容。添加类本身只会修改目标节点上的属性。

• 一些更改会导致重绘，即更改颜色、bgcolor 等时。只有应用了新 CSS 的元素才会重新呈现。
• 某些更改会导致回流，即当元素或其内容占用的可见空间发生尺寸或位置变化时。根据他们自己的，以及他们的父子的属性，以及那些父子的属性，等等，重排将影响文档树中的更多元素。

浏览器足够智能，可以只修改需要重新渲染的元素。最小化重新呈现数量的技术是设置元素的 position: absolute 或 display: none 以将其暂时从文档流中删除，进行更改，然后重新插入。如果，例如，这尤其重要。你让一些元素向下滑动。如果元素在流中并且在 DOM 树的开头，它拉伸(stretch)的每个像素都会导致重新渲染。

为了好玩，我们用 table 上的纸做一个简单的类比，在这个例子中是元素插入。 table 是您的浏览器窗口，□ = 纸，_ = 空白。您想要将另一张纸放在最左上角的位置。这是开始情况:

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

将新床单放在 table 上后:(■ = 新，▧ = 移动)

■ □ □ □
▧ □ □
▧ _ _ _

如果第二行是一长卷纸(= 全 Angular div)，则整行将移动:

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

但是，如果您在第三行插入工作表，则不会发生重排。

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