本文主要介绍一下什么是reflow,repaint, 怎样避免它们造成的不良影响, 怎么通过工具查看分析它们.  

一.首先对浏览器渲染引擎下网页呈现过程简要说一下:

  1. 浏览器的渲染引擎开始解析html构建成DOM树,DOM树是以document对象为根节点,包含所有的html标签, 包括display: none隐藏的,也包括js动态添加的元素。
  2. 解析html的同时, 将css文件或者样式元素中的样式解析成CSS Rule Tree,解析时会去掉浏览器不能识别的样式。
  3. 根据DOM树和CSSOM来构造Rendering Trre。Rendering Trre和DOM Tree相比较,Rendering Trre中每个节点都包含样式信息,而且Render Tree不会包含隐藏的节点,只有影响到呈现的节点才会包含在Render Tree中(例如: display:none的节点,head节点不会包含在Render Tree中,visibility:hidden会被包含,因为它会影响layout)。
  4. 生成布局(layout),计算各节点元素在屏幕上所在位置和几何结构。
  5. 绘制(paint),将布局绘制到屏幕上。

  以上5步中,主要耗时的是后2步,后两步合称为渲染(render)。

二: 什么是reflow 和 repaint:

  网页在生成的过程中,至少要渲染一次。之后在访问过程中,还会不断的进行渲染。重新渲染就行重新生成布局和绘制(也就是重复进行上面的第4,5步)重新生成布局的过程就是reflow(回流,重排),重新绘制就叫做reflow(重绘)。

三: 什么时候触发reflow和repaint

注: repaint不一定需要reflow,例如:改变某元素的颜色,只会触发repaint,不会触发reflow。但是reflow一定会导致repaint,因为布局改变了,就一定需要重新绘制。
Reflow 的成本比 Repaint 的成本高很多。DOM Tree里的每个节点都会有reflow方法,一个结点的reflow可能导致其子结点,甚至父点以及同级结点的 reflow。在PC端或许还没什么,但是在手机上,还是比较耗性能和耗电的。
以下情况会导致reflow:

  1. 增加货移除css样式
  2. 改变字体大小
  3. 改变窗口大小
  4. 操作class属性
  5. 激活css伪类
  6. 内容变化,如在input内输入文字
  7. js操作DOM
  8. 获取offsetTop, offsetLeft等layout属性
  9. 设置css属性等值

   ... ...

四.如何减小reflow的影响:

  1. 减少不必要的DOM层级.
  2. 避免使用table进行布局,因为可能很小的一个小改动会造成整个 table 的重新布局。
  3. 尽量通过position属性为absolute或fixed实现动画效果
  4. 不要一条一条地修改 DOM 的样式。而是预先定义好对应的 class,然后修改对应节点的 className
  5. 不要逐条操作DOM节点:  
  6. a> 使用 documentFragment 对象在内存里操作 DOM。  b> 先把 DOM 给 display:none (有一次 repaint),做完所有的修改后,再把他显示出来。  c> clone 一个 DOM 节点到内存里,做完所有的修改后,再交换一下。
  7. 请求如下值offsetTop, offsetLeft, offsetWidth, offsetHeight,scrollTop/Left/Width/Height,clientTop/Left/Width/Height,浏览器会发生reflow,建议将他们合并到一起操作,可以减少回流的次数。多次要用到值,可以先用变量缓存起来.

  ... ...

五.开发者工具查看

  Chrome浏览器开发者工具的Performance面板,可以查看页面回流和重绘所花费的时间.
  打开f12下的开发者工具, 切换到Performance面板.如下图:

  

  点击开始录制按钮,会开始录制,这时在网页上进行一些操作, 然后点击停止按钮,如下:

  

  从图中可以判断出性能问题到底出现在哪个环节,是js的执行,还是渲染

  图中不同颜色代表不同的事件, 哪个色块越大, 说明耗时越长,问题越大.可以根据此去进行优化.

  • 黄色: javaScript执行时间
  • 紫色: 样式重新计算和布局, 即reflow时间
  • 绿色: repaint时间 

性能优化之reflow和repaint的更多相关文章

  1. 前端性能优化--回流(reflow)和重绘(repaint)

    HTML加载时发生了什么 在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等. 浏览器把所有样 ...

  2. javascript性能优化-repaint和reflow

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

  3. Reflow、Repaint 性能优化

    涉及到操作大量Dom节点及其样式时,有时感觉画面不顺畅,殊不知浏览器亚历山大了.所以我们心里面一定得清楚 Reflow(回流).Repaint(重绘). 浏览器根据每个Dom节点的样式,包括(大小,颜 ...

  4. 前端性能优化 —— reflow(回流)和repaint(重绘)

    简要:整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影响web性能,尤其是手机页面.因此我们在页面设计的时候要尽量 ...

  5. 前端性能优化-减少http请求,dns预解析,减少repaint和reflow

    前端性能优化方法: 一 . 减少http请求 (1)通过合并图片,减少请求,俗称css sprites(css精灵)css sprites (2)lazyload懒加载,在需要的时候再加载 1.定义: ...

  6. 前端性能优化 —— reflow(回流/重排)和repaint(重绘)

    简要:整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影响web性能,尤其是手机页面.因此我们在页面设计的时候要尽量 ...

  7. 前端性能优化----reflow(回流)和repaint(重绘)

    什么是reflow和repaint(原文链接:http://www.cnblogs.com/Peng2014/p/4687218.html) reflow:例如某个子元素样式发生改变,直接影响到了其父 ...

  8. ♫【网站优化】Reflow / Repaint

    web移动开发最佳实践之js篇 浏览器的回流与重绘 by 张盛志 DOM性能瓶颈与Javascript性能优化 浏览器的渲染原理简介 其中一个跟浏览器有关的原因,那就是浏览器需要花时间.花精力去渲染. ...

  9. 浏览器渲染页面原理,reflow、repaint及其优化

    浏览器的主要组件包括: 1.      用户界面 - 包括地址栏.前进/后退按钮.书签菜单等.除了浏览器主窗口显示的你请求的页面外,其他显示的各个部分都属于用户界面. 2.      浏览器引擎 - ...

随机推荐

  1. Yii的数组助手类

    获取值 用原生PHP从一个对象.数组.或者包含这两者的一个复杂数据结构中获取数据是非常繁琐的. 你首先得使用isset 检查 key 是否存在, 然后如果存在你就获取它,如果不存在, 则提供一个默认返 ...

  2. win10外接键盘失灵

    故障描述:笔记本外接的键盘突然之间就失灵,键盘的灯不亮,无法输入 处理方程: 1. 我的电脑右击--> 管理 --> 设备管理器(开始失灵时,键盘下的HID Keyboard Device ...

  3. Duilib第一步(I)-简介与环境搭建

    Primus gradus et cognoscetis veritatem et veritas liberabit vos.  --Johannes 8:32 Introduction Duili ...

  4. CodeForces - 796D Police Stations bfs

    思路:删除尽量多的边使得所有点都能在限制距离之内到达一个警局,删除边会形成多棵子树,最多只能k棵.其实就是以每个警局为根结点,把整棵树划分为以警局为根结点的k棵树,说明要删除的边的数量就是k-1条,即 ...

  5. Fantasia (Tarjan+树形DP)

    Time Limit: 1000 ms   Memory Limit: 256 MB Description 给定一张N个点.M条边的无向图 $G$ .每个点有个权值Wi. 我们定义 $G_i$ 为图 ...

  6. scrapy的学习总结(1)

    1.xpath和css的节点的共同结合使用是一个挺好的使用过程,还有就是配合正则表达式的使用,这个也是很重要的.解决任何一个问题都会有不同方法.学会思考的解决问题. 2.item的数据抽取,pipel ...

  7. ubuntu配置

    首先就是Ubuntu的更新源问题,需要更改,否则更新不了. 其次就是Securecrt的远程登陆问题,windows主机和ubuntu虚拟机如果能通信,要求在同一网段上,而ubuntu是动态加载,需要 ...

  8. mysql 查询表死锁 和结束死锁的表步骤

    1.查询是否锁表 show OPEN TABLES ; 2.查询进程 show processlist 查询到相对应的进程===然后 kill    id 3.查看正在锁的事务 SELECT * FR ...

  9. linux下编译sphinx拓展

    编译libsphinxclient sphinx 源码包里的api文件夹下的libsphinxclient cd /root/api/libsphinxclient/ ./configure make ...

  10. java中JDBC报错(一)

    java中JDBC报错(一) 1.具体报错如下 com.mysql.jdbc.MySqlDataTruncation:Data truncation:Data too long for column ...