Reflow Repaint

原创 2015年07月07日 11:16:58

     Repaint又叫Redraw,重绘,它是指一种不影响当前dom结构的和布局的一种重绘动作。

     以下的动作都会促发Repaint:

  1. 不可见或可见(visibility);
  2. 颜色和图片改变(background,border-color,color之类的属性);
  3. 不改变页面元素大小,形状和位置,但改变其外观的变化。

     Reflow,又叫重构, 比起 Repaint 来讲就是一种更加显著的变化了。它主要发生在 DOM 树被操作的时候,任何改变 DOM 的结构和布局都会产生 Reflow。但一个元素的 Reflow 操作发生时,它的所有父元素和子元素都会发生 Reflow,最后 Reflow 必然会导致 Repaint 的产生。

     以下的动作都会促发Reflow:

  1. 浏览器窗口的变化;
  2. DOM 节点的添加删除操作;
  3. 一些改变页面元素大小,形状和位置的操作的触发。

     每次 Reflow 比其 Repaint 会带来更多的资源消耗,我们应该尽量减少 Reflow 的发生。
     参考:http://www.cnblogs.com/sniper007/archive/2012/12/24/2831328.html

版权声明:本文为博主原创文章,未经博主允许不得转载。

reflow(回流)和repaint(重绘)及其优化

为什么不能用CSS通配符 *,CSS选择器层叠为什么不能超过三层,CSS为什么尽量使用类选择器,书写HTML为什么少使用table,为什么结构要尽量简单-DOM树要小…. 对于DOM结构中的各个元素都...
  • ClaireKe
  • ClaireKe
  • 2016年05月11日 19:19
  • 3883

Repaint/Reflow 的基本认识和优化

​浏览器解析的大概工作流  (1)解析HTML构建DOM树:渲染引擎开始解析HTML文档,转换树中的HTML标签或js生成的标签到DOM节点,它被称为---内容树。 (2)构建渲染树:解析css(...
  • qq_29066959
  • qq_29066959
  • 2016年03月01日 10:09
  • 709

如何减少浏览器的repaint和reflow

一、什么是repaint/reflow? 页面在加载的过程中,需要对文档结构进行解析,同时需要结合各种各样的样式来计算这个页面长什么样子,最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还...
  • alex8046
  • alex8046
  • 2015年02月15日 13:07
  • 552

如何减少浏览器repaint和reflow

一、什么是repaint/reflow? 页面在加载的过程中,需要对文档结构进行解析,同时需要结合各种各样的样式来计算这个页面长什么样子,最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还...
  • u010266093
  • u010266093
  • 2014年03月13日 15:11
  • 464

如何减少浏览器的repaint和reflow?

文本内容主要包括以下几点: 什么是repaint/reflow? 什么情况下会触发浏览器的repaint/reflow? 浏览器自身所作的优化 如何优化你的脚本来减少repaint/r...
  • appteam_vlctech
  • appteam_vlctech
  • 2013年02月22日 16:24
  • 315

repaint和reflow的相关知识

最近了解了下repaint和reflow的相关知识,觉得在页面重构过程中就应该考虑前端开发(js)人员对dom进行操作,能够减轻客户浏览器的鸭梨。在这里整理了一下相关资料,推荐看帖子底部的文章,如果觉...
  • Samic123
  • Samic123
  • 2013年11月05日 13:37
  • 375

如何减少浏览器repaint和reflow ?

一、什么是repaint/reflow? 页面在加载的过程中,需要对文档结构进行解析,同时需要结合各种各样的样式来计算这个页面长什么样子,最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还是比...
  • liaozhongping
  • liaozhongping
  • 2015年08月02日 09:30
  • 402

浏览器的repaint reflow对性能的影响

一、什么是repaint/reflow? 页面在加载的过程中,需要对文档结构进行解析,同时需要结合各种各样的样式来计算这个页面长什么样子,最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还是比...
  • zha_zi
  • zha_zi
  • 2014年12月02日 12:14
  • 434

如何减少浏览器的 Repaint 和 Reflow

一、什么是repaint/reflow?页面在加载的过程中,需要对文档结构进行解析,同时需要结合各种各样的样式来计算这个页面长什么样子,最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还是比较复...
  • weixin_41399785
  • weixin_41399785
  • 2017年12月16日 20:56
  • 28

如何减少浏览器的repaint和reflow?

文本内容主要包括以下几点: 什么是repaint/reflow?什么情况下会触发浏览器的repaint/reflow?浏览器自身所作的优化如何优化你的脚本来减少repaint/reflow? ...
  • sangim
  • sangim
  • 2013年05月08日 10:43
  • 478
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Reflow Repaint
举报原因:
原因补充:

(最多只允许输入30个字)