美文网首页JavaScript理论知识
15-02:重排和重绘,讲讲看

15-02:重排和重绘,讲讲看

作者: 小小前端搬运工 | 来源:发表于2022-05-20 23:23 被阅读0次

    重绘(repaint 或 redraw):当盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来之后,浏览器便把这些原色都按照各自的特性绘制一遍,将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。

    触发重绘的条件:改变元素外观属性。如:color,background-color 等。

    注意:

    table 及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性值,比同等元素要多花两倍时间,这就是我们尽量避免使用 table 布局页面的原因之一。

    重排(重构/回流/reflow):当渲染树中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候。

    重绘和重排的关系:在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程称为重绘。所以,重排必定会引发重绘,但重绘不一定会引发重排。

    相关文章

      网友评论

        本文标题:15-02:重排和重绘,讲讲看

        本文链接:https://www.haomeiwen.com/subject/gemqprtx.html