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)

如果你的HTML变得很大很复杂,那么影响你JavaScript性能的可能并不是JavaScript代码的复杂度,而是页面的回流和重绘。 回流(Reflow)是指布局引擎为frame计算图形的过程...
  • yangjvn
  • yangjvn
  • 2015年08月31日 09:38
  • 2768

CSS Repaint and Reflow 及其优化

CSS Repaint and Reflow 基本认识及其优化1. 什么是Repaint/Reflow?浏览器解析的大概工作流程如图所示,可以归纳为四个步骤: 1、解析HTML以构建DOM树:渲染...

javascript性能优化-repaint和reflow

repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲...

关于重绘(repaint)和回流(reflow)的理解

今天谈谈重绘和回流是怎么回事 一、什么是页面的重绘与回流 当页面中的部分或者全部元素改变宽度和高度、或者位置发生变化、删除或者增加某个或者某些元素时、某个元素影藏或者显示时,这时页面就需要重新加载...
  • wxl1555
  • wxl1555
  • 2016年09月29日 20:20
  • 650

关于Repaint(重绘)与Reflow(回流)

关于回流和重绘在刚开始学习前端时一般不会太在意,因为其影响的大多是运行时的性能问题。 显然,频繁地进行回流和重绘会导致运行性能的下降,所以,在要求性能的时候,往往要注意减少页面的回流和重绘。概念re...

javascript性能优化-repaint和reflow

1、什么是repaint?什么是reflow? 先来张浏览器引擎的渲染流程: 简单介绍一下: (1)解析HTML以构建DOM树: (2)渲染树构建: (3)渲染树布局: (4)渲染树绘制: 很清晰,...

如何减少浏览器repaint和reflow ?

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

重绘与回流(repaint和reflow)

reflow:回流 回流:指计算页面布局。render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流,每个页面至少需要一次回流,就是在页面第一次加载的...

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

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

减少页面回流与重绘(Reflow & Repaint)

如果你的HTML变得很大很复杂,那么影响你JavaScript性能的可能并不是JavaScript代码的复杂度,而是页面的回流和重绘。 回流(Reflow)是指布局引擎为frame计算图形的过程。 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Reflow Repaint
举报原因:
原因补充:

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