性能优化之reflow和repaint

本文主要介绍一下什么是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节点:    a> 使用 documentFragment 对象在内存里操作 DOM。  b> 先把 DOM 给 display:none (有一次 repaint),做完所有的修改后,再把他显示出来。  c> clone 一个 DOM 节点到内存里,做完所有的修改后,再交换一下。
  6. 请求如下值offsetTop, offsetLeft, offsetWidth, offsetHeight,scrollTop/Left/Width/Height,clientTop/Left/Width/Height,浏览器会发生reflow,建议将他们合并到一起操作,可以减少回流的次数。多次要用到值,可以先用变量缓存起来.

  ... ...

五.开发者工具查看

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

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

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

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

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

如何对线上项目进行性能监控

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏韩东吉的Unity杂货铺

零基础入门 13: UGUI Text

前几篇介绍了UGUI里的Image,今天来说下UGUI 的Text,显示文本的组件。因为有了之前代码创建Image的铺垫,所以对Text的使用就都在这篇介绍了。

1462
来自专栏前端之心

你真的了解回流和重绘吗

最近有空对其进行了一些研究,看了一些博客和书籍,整理了一些内容并且结合一些例子,写了这篇文章,希望可以帮助到大家。

8825
来自专栏抠抠空间

Toastr 通知提示插件

Toastr 简介 jquery toastr 一款轻量级的通知提示框插件。 网页开发中经常会用到提示框,自带的alert样式无法调整,用户体验差。 所以一般通...

4049
来自专栏十月梦想

bootsrap栅格系统

在 HTML5 的项目中,我们做了移动端的项目。它有一份非常重要的 meta,用于设置屏

1594
来自专栏从零开始学 Web 前端

从零开始学Web之HTML(二)标签、超链接、特殊符号、列表、音乐、滚动、head等

文本倾斜:<em></em> <i></i> <!-- 工作里尽量使用em,原因同strong -->

4042
来自专栏偏前端工程师的驿站

JS魔法堂:LINK元素深入详解

一、前言                               我们一般使用方式为 <link type="text/css" rel="styleshe...

23810
来自专栏我和未来有约会

Silverlight制作scrollbar.

最近要用silverlight开发一个小程序.做了一个scrollbar.其实sl自己带了这个控件,但是如果要样式和自己的程序的风格完全一致的话也是有些难度的....

1937
来自专栏岑志军的专栏

react-navigation的使用

1846
来自专栏DeveWork

删除 WordPress 导航菜单的多余 CSS 选择器

在默认情况下,WordPress 的导航菜单会输出很多如menu-item、menu-item-type-taxonomy、menu-item-object-c...

1957
来自专栏何雪斌的专栏

Web前端事件

事件是与浏览器或文档交互的瞬间,如点击按钮,填写表格等,它是JS与HTML之间交互的桥梁。DOM是树形结构,若同时给父子结点绑定了相同的事件,那么他们的执行顺序...

8540

扫码关注云+社区

领取腾讯云代金券