文档章节

WEB页面的Repaint和Reflow

 阿狼仔
发布于 2016/06/12 10:01
字数 1780
阅读 4
收藏 0
点赞 0
评论 0

前言:之前各种什么性能优化都是以网络请求、缓存、网络性能优化、页面的js、css位置等为切入点进行的优化, 这里要说的优化是页面的渲染的优化, 早就耳闻, 也一直没有亲笔动手, 今天正好看到@前端早读课 分享的  阿里巴巴团队写的 repaint和reflow这里做个笔记。

 

移动 Web 前端开发,目前是火的不能再火了。到处都在招什么 H5 工程师、Hybrid App 开发工程师,主要负责的其实就是一些移动 Web 前端开发的工作。稍微有过一些前端经验的人都知道,手机上的开销比 PC 上要大的多,你在 PC 的模拟器上调试的很顺畅,等到手机上时,就会卡,这是为什么呢?其实这就是性能问题,有其他的开销占用了你的计算资源啦,那么是哪些开销占用了呢?抛开后端接口慢啊、网络状态差啊什么的不说,咱们今天聊聊浏览器本身的细节,Reflow 和 Repaint。尤其是在添加一些 CSS3 动画或者批量操作多个 DOM 元素的时候,Reflow 和 Repaint 的影响就会更加大。

 

啥是 Reflow 和 Repaint

Repaint

Repaint 就是「重绘」,它会在你改变 DOM 元素的视觉效果时进行,改变布局时不会触发。比如,opacity,background-color,visibility和outline等都会触发,「重绘」的开销还是比较昂贵的,因为浏览器会在某一个 DOM 元素的视觉效果改变后去 check 这个 DOM 元素内的所有节点。

 

Reflow

Reflow 就是「回流」,它的影响更大。它会在某一个 DOM 元素的位置发生改变后触发,而且它会重新计算所有元素的位置和在页面中的占有的面积,这样的话将会引起页面某一个部分甚至整个页面的重新渲染。改变某一个元素会影响它所有的子节点 (children)、祖先节点 (ancestors) 及兄弟节点(siblings)。

 

Reflow 和 Repaint 都是浏览器慢的元凶

用户和Web页面都不能在 Reflow 和 Repaint 执行时做任何操作和响应,而且在极端的情况下,CSS 会拖慢 JS 的执行速度,这就是浏览器有的时候就是在操作之后没反应的原因之一。

 

什么时候 Reflow 会触发

Reflow 的开销更加昂贵,那么具体哪些时候会触发 Reflow?

  • 添加、删除或者改变 DOM 元素的可见性时:使用 JS 去改变 DOM 元素时会触发 Reflow。

  • 添加、删除或者改变 CSS 样式:直接改变 CSS Style 或者元素的 class 可能会影响布局,还有改变一个元素的宽度能够影响它所在的 DOM 节点中的所有元素,以及它周围的那些元素。

  • CSS3 动画(animation)和过渡(transition): 动画的每一 frame 都会触发 Reflow。

  • 使用 offsetWidth 和 offsetHeight:这一点很特别,你读一个 DOM 的 offsetWidth 和 offsetHeight 属性同样会触发一下 Reflow,因为这两个属性需要依赖一些元素去计算。

  • 用户交互:用户可以通过 hover 一下 a 链接,在 input 里面输入文字,拖动浏览器的大小,改变字体大小,更换样式表或者字体等都会触发reflow。

 

一些常用的提高性能的原则

布局

不要用 inline style 或 table 布局,flexbox 布局也会给性能带来一些小困扰。inlinestyle 会在 html 下载完后进行一次额外的 Reflow,table布局的开销远比其他 DOM 元素的布局开销要大。flexbox 的 item 会在 HTML 下载完成后改变尺寸。

 

简写 CSS

尽量简写 CSS,避免使用复杂的 CSS 选择器,使用 Unused CSS(https://unused-css.com/), uCSS(https://github.com/oyvindeh/ucss), gulp-uncss(https://github.com/ben-eb/gulp-uncss)可以有效的减少样式的定义和文件的大小。

 

优化 DOM

减少 DOM 的层级,减少 DOM 的数量,如果不需适配老浏览器,删掉一些无用的 wrapper 性质的 DOM 元素,总之越少越好。

 

慎改 class

在一个 DOM 树中,尽可能改那些没有特别多子元素 DOM 的 class,子元素少的可以改,多的不推荐。

 

避免复杂动画

删掉复杂的动画,运用动画的元素尽量是 position:absolute或 position:fixed 的,这样会让他们脱离文档流,不去影响其他的元素。

 

善用 display:none

display:none 的元素不会引发 Reflow 和 Repaint,可以在让这些元素在 display 之前进行一些诸如颜色、尺寸什么的改变。

 

批量更新元素

比如下面这个例子会触发3次 reflow:

 

可以用这种方式来优化上面的代码:

 

 

 

此外,还可以在生成新 DOM 时可以使用 DOM fragment,然后先在内存中构建 DOM:

 

DEMO

再给大家看一个例子,下面有两个性能比较图,第一张是批量在页面插入1000个div,仅仅是div噢,第二张是一个个在页面插入1000个 div。这两种的性能差距在最新版 chrome 下居然都长达 1秒 之多,1秒啊亲们,还是最新版 chrome 啊,所以咱们在写 JS 的时候,不要再排脑袋了,我展示的这个还仅仅是纯 div,没有任何复杂嵌套,如果在正式的场景中,这种性能问题会放大数倍不止,一旦出现对你的产品简直是要命的事儿,不说了,乃们感受下吧。

 

批量更新,耗时 34ms,从图中可以看出,reflow 和 paint 各执行一次

分别更新,耗时 1118ms,从图中可以看出,一个叫Parse HTML 的东西累积起来,使得总时间直接比批量上升了1000倍,这个 Parse HTML 实际上就是 Paint 和 Reflow 的结合体,Parse HTML 是 chrome 中的一个算法的名称。

避免大量 DOM 互相影响

比如 Tabs 这种场景,如果你点击一个 Tab 会显示它控制的区块,显示的那个区块会影响其他的区块,这样可能会引起 Reflow,因为它们的高度不一样,可以通过定个高度来优化这种场景。

 

性能永远比酷炫重要

记住一个原则,你网页的动画再牛逼,性能还是第一位的,如果每一帧移动1个像素会造成你的页面卡顿,那宁愿每一帧移动10像素让动画的帧变得迟钝一些,也不要让页面的性能降下来。

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 42
码字总数 13158
作品 0
南京
浏览器渲染那些事

WEB 页面运行在各种各样的浏览器当中,浏览器载入、渲染页面的速度直接影响着用户体验,简单地说,页面渲染就是浏览器将 HTML 代码根据 CSS 定义的规则显示在浏览器窗口中的这个过程。 页面渲...

jia林 ⋅ 2017/11/08 ⋅ 0

HTML的解析和css的回流与重绘的自己初略理解

在别人的博客上看到了一篇讲的很生动的网页解析HTML的原理,并且还初步的说了一下css在渲染时候出现的reflow(回流)和repaint(重绘)。以下为引用他人博客中的内容。渲染就是浏览器把HTML代...

德拉费尔 ⋅ 2013/06/01 ⋅ 2

CSS的reflow和repaint

CSS的reflow和repaint 什么是reflow 浏览器为了重新渲染部分或整个页面,重新计算页面元素位置和几何结构的进程叫做. 通俗点说就是当开发人员定义好了样式后(也包括浏览器的默认样式),浏览器...

一个胖子的我 ⋅ 2016/10/27 ⋅ 0

浏览器的渲染原理简介

出处 酷壳 – CoolShell.cn 看到这个标题大家一定会想到这篇神文《How Browsers Work》,这篇文章把浏览器的很多细节讲得很细,而且也被翻译成了中文。为什么我还想写一篇呢?因为两个原因,...

红薯 ⋅ 2013/05/22 ⋅ 8

浏览器渲染原理

看到这个标题大家一定会想到这篇神文《How Browsers Work》,这篇文章把浏览器的很多细节讲得很细,而且也被翻译成了中文。为什么我还想写一篇呢?因为两个原因,   1)这篇文章太长了,阅...

五大三粗 ⋅ 2015/05/25 ⋅ 0

提高 web 应用性能之 JavaScript 性能调优

文章来自 IBM developerWorks Web 开发中经常会遇到性能的问题,尤其是针对当今的 Web2.0 应用。JavaScript 是当今使用最为广泛的 Web 开发语言,Web 应用的性能问题很大一部分都是由程序员写...

IBMdW ⋅ 2011/07/15 ⋅ 3

简述浏览器的渲染原理

首先,看一张图片: 图1 首先是解析: 1)这是一个解析的过程,浏览器会解析三个东西: 一个是HTML/SVG/XHTML,事实上,Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tre...

唐正汉 ⋅ 2017/01/19 ⋅ 0

提高 web 应用性能之 JavaScript 性能调优

简介: JavaScript 是一个比较完善的前端开发语言,在现今的 web 开发中应用非常广泛,尤其是对 Web 2.0 的应用。随着 Web 2.0 越来越流行的今天,我们会发现:在我们的 web 应用项目中,会有...

风一样 ⋅ 2011/08/10 ⋅ 0

写在前端性能优化之前你应该知道的 - 浏览器的加载和渲染

前言 一直想写点关于前端性能的东西,后来感觉所谓的性能优化最基本的前提是你要知道浏览器是如何针对web页面工作的.后来由于过年以及换工作等原因耽搁下来,只好利用这个休息的周末写一下. 本...

顽Shi ⋅ 2014/03/23 ⋅ 0

【转】DOM性能瓶颈与Javascript性能优化

原文地址:http://www.cnblogs.com/hyddd/archive/2013/02/07/2908960.html 这两天比较闲,写了两篇关于JS性能缺陷与解决方案的文章(《JS特性性能缺陷及JIT的解决方案》,《Javascript垃圾回...

iNiL0119 ⋅ 2016/09/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

oAuth2 升级Spring Cloud Finchley.RELEASE踩坑分享

背景 6.19号,spring团队发布了期待已久的 Spring Cloud Finchley.RELEASE 版本。 重要变化: 基于Spring Boot 2.0.X 不兼容 Spring Boot 1.5.X 期间踩过几个坑,分享出来给大伙,主要是关于...

冷冷gg ⋅ 40分钟前 ⋅ 0

OSChina 周一乱弹 —— 理发师小姐姐的魔法

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @冰冰棒- :分享田馥甄的单曲《My Love》 《My Love》- 田馥甄 手机党少年们想听歌,请使劲儿戳(这里) @Li-Wang :哎,头发又长了。。。又要...

小小编辑 ⋅ 今天 ⋅ 4

Kafka1.0.X_消费者API详解2

偏移量由消费者管理 kafka Consumer Api还提供了自己存储offset的功能,将offset和data做到原子性,可以让消费具有Exactly Once 的语义,比kafka默认的At-least Once更强大 消费者从指定分区...

特拉仔 ⋅ 今天 ⋅ 0

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 今天 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 今天 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部