美文网首页
reflow和repaint

reflow和repaint

作者: zooeydotmango | 来源:发表于2019-08-18 01:38 被阅读0次

一、浏览器的reflow和repaint

webkitflow.png
  1. 解析HTML以构建DOM树:渲染引擎开始解析HTML文档,转换树中的html标签或js生成的标签到DOM节点,它被称为 -- 内容树。
  2. 构建渲染树:解析CSS(包括外部CSS文件和样式元素以及js生成的样式),根据CSS选择器计算出节点的样式,创建另一个树 —- 渲染树。
  3. 布局渲染树: 从根节点递归调用,计算每一个元素的大小、位置等,给每个节点所应该出现在屏幕上的精确坐标。
  4. 绘制渲染树: 遍历渲染树,每个节点将使用UI后端层来绘制。

对于DOM结构中的各个元素都有自己的盒子(模型),这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow;当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为repaint

二、哪些操作会引起

  • 当你增加、删除、修改 DOM 结点时,会导致 Reflow 或 Repaint。
  • 当你移动 DOM 的位置,或是搞个动画的时候。
  • 当你修改 CSS 样式的时候。
  • 当你 Resize 窗口的时候(移动端没有这个问题),或是滚动的时候。
  • 当你修改网页的默认字体时。

三、如何优化?

  1. 不要一条一条地修改 DOM 的样式。与其这样,还不如预先定义好 css 的 class,然后修改 DOM 的 className
  2. 把 DOM 离线后修改。如:
    使用 documentFragment 对象在内存里操作 DOM
    先把 DOMdisplay:none (有一次 repaint),然后你想怎么改就怎么改。比如修改 100 次,然后再把他显示出来。
    clone 一个 DOM 节点到内存里,然后想怎么改就怎么改,改完后,和在线的那个的交换一下。
  3. 不要把 DOM 节点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。
  4. 尽可能的修改层级比较低的 DOM节点。当然,改变层级比较底的 DOM节点有可能会造成大面积的 reflow,但是也可能影响范围很小
  5. 为动画的 HTML 元件使用 fixed 或 absoult 的 position,那么修改他们的 CSS 是会大大减小 reflow 。
  6. 千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局

相关文章

  • 前端性能

    Reflow 和 Repaint

  • repaint和reflow

    概念介绍一个页面由两部分组成: DOM:描述该页面的结构 render(渲染):描述 DOM 节点 (nodes)...

  • reflow和repaint

    一、浏览器的reflow和repaint 解析HTML以构建DOM树:渲染引擎开始解析HTML文档,转换树中的ht...

  • reflow和repaint

    reflow:例如某个子元素样式发生改变,直接影响到了其父元素以及往上追溯很多祖先元素(包括兄弟元素),这个时候浏...

  • CSS的reflow和repaint

    CSS的reflow和repaint 什么是reflow 浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和...

  • 浏览器的渲染机制

    reflow(回流) 和 repaint(重绘):http://blog.csdn.net/ClaireKe/ar...

  • css中的repaint和reflow

    页面设计中,不可避免的存在浏览器重绘repaint和回流reflow 介绍 repaint:针对某个元素进行重绘。...

  • 前端总结(后续继续更新)

    1,reflow和repaint:回流和重绘。回流:renderTree 重建。重绘:外观样式风格进行更新。(co...

  • 前端一些细节

    1,reflow和repaint:回流和重绘。回流:renderTree 重建。重绘:外观样式风格进行更新。(co...

  • 浏览器原理

    介绍下重绘和回流(Repaint & & Reflow ),以及如何进行优化 参考文档: https://mp.w...

网友评论

      本文标题:reflow和repaint

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