页面的回流(reflow)和重绘(repaintd)

原创 2018年04月17日 19:06:03

1.首先需要了解的是页面渲染过程(如下图所示):

2.回流和重绘的概念:

回流:浏览器重新构建render tree的过程

重绘:浏览器根据render tree重新绘制界面的过程

3.引起回流的操作

当改变界面已有元素的位置,大小(width,height,border,padding,margin,content),或者新添加元素的时候,都会引起回流;每个页面至少有一次回流,也就是页面刚开始加载的时候

4.引起重绘的操作

  • 当页面发生回流
  • 当改变元素不影响布局的属性的的时候;如:颜色,

5.优化

浏览器实际上在会帮助我们做一些这方面的优化.它会维护一个队列,把所有引起回流,重绘的操作放入到这个队列,当到达一定的条件,浏览器就会对这个队列的所有操作进行一个批处理,这样就会让多次的回流,重绘变成一次回流重绘.

但是我们自身的操作有时候也会引起浏览器刷新整个队列.当要获取元素大小信息的时候,浏览器会为了提供最准确的值而去刷新队列

所以,我们自己能做的优化为:

  • 针对一个node,如果有多个大小相关的样式需要改变,则尽量通过添加类名,csssText拼接;(尽量批量改变,而避免单个改变)
  • a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘;
    b) 使用display:none技术,只引发两次回流和重绘;
    c) 使用cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘;
  • 尽量避免访问能够引起浏览器刷讯队列的属性,如果不能避免,则利用缓存
  • 让元素脱离动画流

页面重绘与回流

渲染:就是把浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程。 浏览器解析HTML的基本过程: 1  用户输入网址,浏览器向服务器发出请求,服务器返回html文件 ...
  • ReadyChange
  • ReadyChange
  • 2016年09月12日 18:00
  • 196

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

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

回流reflow与重绘repaint

回流(reflow)与重绘(repaint) 很早之前就听说过回流与重绘这两个名词,但是并不理解它们的含义,也没有深究过,今天看了一套网易的题目,涉及到了这两个概念,于是想要把它们俩弄清楚。。。...
  • MrZZhou
  • MrZZhou
  • 2017年04月20日 13:08
  • 287

[Web 性能] repaint and reflow (重绘和回流)

在介绍重绘和回流之前, 先看一下HTML 页面呈现的流程。 什么是reflow? reflow指的是计算页面布局。某个节点reflow时会重新计算节点的尺寸和位置,而且还有可能触发其子节点、祖先节点...
  • oscar999
  • oscar999
  • 2016年07月22日 09:04
  • 2292

页面的重绘与回流,以及如何优化

浏览器对页面的呈现流程 页面呈现流程 浏览器把取到的HTML代码解析成1个DOM树 HTML中的每个tag都是DOM中的1个节点根节点是document对象DOM树里包含了所...
  • jnshu_it
  • jnshu_it
  • 2017年08月18日 11:11
  • 231

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

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

Reflow(回流)和Repaint(重绘)

首先我们要明白的是,页面的显示过程分为以下几个阶段:1、生成DOM树(包括display:none的节点)2、在DOM树的基础上根据节点的集合属性(margin,padding,width,heigh...
  • qq_18826911
  • qq_18826911
  • 2017年03月31日 13:46
  • 5865

回流和重绘

回流与重绘 1. 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时...
  • JASMINECJC
  • JASMINECJC
  • 2016年02月29日 14:49
  • 647

css 页面重绘和回流(重排)以及优化

一、html页面的呈现流程 1.  浏览器把获取到的HTML代码解析成1个DOM树,HTML中的每个tag都是DOM树中的1个节点,根节点就是我们常用的document对象。DOM树里包含了...
  • yummy_go
  • yummy_go
  • 2016年02月19日 11:03
  • 5325

浅谈CSS重绘与回流/重排

任何对渲染树的修改都有可能会导致下面两种操作: 1、回流/重排 渲染树的一部分必须要更新且节点的尺寸发生了变化,会触发重排操作。每个页面至少在初始化的时候会有一次重排操作。 2、重绘 部分节点需要更新...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年04月24日 21:50
  • 680
收藏助手
不良信息举报
您举报文章:页面的回流(reflow)和重绘(repaintd)
举报原因:
原因补充:

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