回流(reflow)与重绘(repaint)
回流(reflow)与重绘(repaint)
很早之前就听说过回流与重绘这两个名词,但是并不理解它们的含义,也没有深究过,今天看了一套网易的题目,涉及到了这两个概念,于是想要把它们俩弄清楚。。。
一、概念
首先我们要明白的是,页面的显示过程分为以下几个阶段:
1、生成DOM树(包括display:none的节点)
2、在DOM树的基础上根据节点的集合属性(margin,padding,width,height等)生成render树(不包括display:none,head节点,但是包括visibility:hidden的节点)
3、在render树的基础上继续渲染颜色背景色等样式
reflow:当render树的一部分或者全部因为大小边距等问题发生改变而需要重建的过程,叫做回流
repaint:当诸如颜色背景等不会引起页面布局变化,而只需要重新渲染的过程叫做重绘
通过上述定义,可以很明显看出,重绘的代价要比回流小,毕竟重绘只涉及样式的改变,不涉及到布局。重绘就好像给人染了一个头发,而回流相当于给人做了一次抽脂手术
二、什么会引起回流
这也是网易题目的出法
- 页面渲染初始化
- DOM结构变化,比如删除了某个节点;骨头都被打断了,肯定比抽脂更严重,所以会引发回流
- render树变化,比如减少了padding;也就是进行抽脂手术
- 窗口resize事件触发
- 最复杂的一种:获取某些属性,引发回流 很多浏览器会对回流做优化,他会等到足够数量的变化发生,在做一次批处理回流。 但是除了render树的直接变化。 当获取一些属性时,浏览器为了获得正确的值也会触发回流。这样就使得浏览器的优化失效了
- 这些属性包括
- offsetTop, offsetLeft, offsetWidth, offsetHeight
- scrollTop/Left/Width/Height
- clientTop/Left/Width/Height
- width,height
- 调用了getComputedStyle(), 或者 IE的 currentStyle
我在别处抄来了一段代码,嘻嘻
1
2
3
4
5
6
7
8
|
var s = document.body.style; s.padding = "2px" ; // 回流+重绘 s.border = "1px solid red" ; // 再一次 回流+重绘 s.color = "blue" ; // 再一次重绘 s.backgroundColor = "#ccc" ; // 再一次 重绘 s.fontSize = "14px" ; // 再一次 回流+重绘 // 添加node,再一次 回流+重绘 document.body.appendChild(document.createTextNode( 'abc!' )); |
可以看出,回流一定伴随着重绘,而重绘却可以单独出现
可以理解为,路人甲摔断了腿或者抽脂之后,病怏怏导致头发也变白了(回流+重绘);但是炮灰乙却仅仅是去村口王师傅那里烫了头(重绘)
回流对性能产生了一定的影响,尽管浏览器机智地帮我们进行了批处理,但是仍然存在着上述诸多阔怕的属性,一获取就回流。怎么解决?
三、减少回流
- 避免逐项更改样式。最好一次性更改style属性,或者将样式列表定义为class并一次性更改class属性。
- 避免循环操作DOM。创建一个documentFragment或div,在它上面应用所有DOM操作,最后再把它添加到window.document。
- 避免多次读取offsetLeft等属性。无法避免则将它们缓存到变量。
- 将复杂的元素绝对定位或固定定位,使它脱离文档流。否则回流代价十分高
补充:改变字体大小会引发回流
回到网易的问题,并适当做延伸:display:none和visibility:hidden会产生回流与重绘吗?
display:none指的是元素完全不陈列出来,不占据空间,涉及到了DOM结构,故产生reflow与repaint
visibility:hidden指的是元素不可见但存在,保留空间,不影响结构,故只产生repaint
回流(reflow)与重绘(repaint)的更多相关文章
- 页面重绘(repaint)和回流(reflow)
前言 页面显示到浏览器上的过程: 1.1.生成一个DOM树. 浏览器将获取到的HTML代码解析成1个DOM树,包含了所有标签,包括display:none和动态添加的节点. 1.2.生成样式结构体. ...
- 页面优化,谈谈重绘(repaint)和回流(reflow)
一.前言 偶尔在面试过程中遇到过重汇与回流reflow的问题,毕竟页面优化也是考核一个开发者能力的关键之一,上篇文章聊了下documentfragment也是为了减轻回流问题,那么本篇文章好好介绍下重 ...
- 什么是回流(重排 reflow)?什么是重绘(repaint)?如何减少回流、重绘?
什么是回流(重排 reflow)? 回流(重排 reflow):对DOM树进行渲染,只要修改DOM或修改元素的形状大小,就会触发reflow,reflow的时候,浏览器会使已渲染好受到影响的部分失效, ...
- 前端性能优化--回流(reflow)和重绘(repaint)
HTML加载时发生了什么 在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等. 浏览器把所有样 ...
- 【笔记】web 的回流与重绘及优化
最近看了幕课网 web 前端性能优化的课程,其中说到了浏览器的回流(reflow) 及 重绘(repaint).觉得以后面试或许会被问到所以做一下笔记: 课程从回流及重绘这两个点延伸出了一个知识点就是 ...
- DOM 操作成本究竟有多高,HTML、CSS构建过程 ,从什么方向出发避免重绘重排)
前言: 2019年!我准备好了 正文:从我接触前端到现在,一直听到的一句话:操作DOM的成本很高,不要轻易去操作DOM.尤其是React.vue等MV*框架的出现,数据驱动视图的模式越发深入人心,jQ ...
- CSS重排和重绘
一.什么是重绘Repaint和重排 (回流 reflow) 重绘:当元素的一部分属性发生改变,如外观.背景.颜色等不会引起布局变化,只需要浏览器根据元素的新属性重新绘制 ,使元素呈现新的外观叫做重绘. ...
- 重绘(Repaint)和回流(Reflow)
重绘(Repaint)和回流(Reflow) 1.回流和重绘只是渲染步骤的一小节,是怎么做到影响性能的? css 会影响 javascrip 执行时间导致 javascript 脚本变慢 浏览器渲染一 ...
- 浏览器的回流与重绘 (Reflow & Repaint)
写在前面 在讨论回流与重绘之前,我们要知道: 浏览器使用流式布局模型 (Flow Based Layout). 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了 ...
随机推荐
- delphi中如何实现DBGrid中的两列数据想减并存入另一列
可参考下面的例子: 数据自动计算的实现:“金额”是由“单价”和“工程量”相乘直接得来的,勿需人工输入. 这可在“数据源构件”的onupdatedata例程添加如下代码实现: procedure T ...
- vue開發環境搭建
npm(node package manager),nodejs的包管理器,用於nodejs插件的安裝.卸載和管理依賴. 安裝npm: 檢查npm是否安裝成功及版本:npm -v 卸載npm: 更新n ...
- vue-cli:渲染过程理解2(vue init webpack方式创建)
main.js: 入口文件 import Vue from 'vue' //引入node_modules中的vue import App from './App' //引入当前路径(src)下的App ...
- 如何设置C-Lodop打印控件的端口
Lodop是一款功能强大的打印控件,在一些浏览器不再支持np插件之后,Lodop公司又推出了C-Lodop,C-Lodop是以服务的方式解决web打印,摆脱了对浏览器的依赖,支持了所有的浏览器. 该控 ...
- How to create ISO on macOS
hdiutil makehybrid -iso -joliet -o test1.iso /users/test/test1
- Linux下4个查找命令which、whereis、locate、find的总结
(1)which [-a] cmdname1 cmdname2 ...... 作用:locate a command,从环境变量PATH中,定位/返回与指定名字相匹配的可执行文件所在的路径 ...
- 【题解】Hanoi
题目描述 有三根柱A,B,C.在柱A上有N块盘片,所有盘片都是大的在下面,小片能放在大片上面.并依次编好序号,现要将A上的N块片移到C柱上,每次只能移动一片,而且在同一根柱子上必须保持上面的盘片比下面 ...
- VM下安装Kali虚拟机
VM下Kali虚拟机安装 下载kali Linux系统镜像 下载地址:http://mirrors.hust.edu.cn/kali-images/ 网页如下: kali官网:http://www.k ...
- 洛谷P3690 Link Cut Tree (模板)
Link Cut Tree 刚开始写了个指针版..调了一天然后放弃了.. 最后还是学了黄学长的板子!! #include <bits/stdc++.h> #define INF 0x3f3 ...
- 「CodeForces - 50C 」Happy Farm 5 (几何)
BUPT 2017 summer training (16) #2B 题意 有一些二维直角坐标系上的整数坐标的点,找出严格包含这些点的只能八个方向走出来步数最少的路径,输出最少步数. 题解 这题要求严 ...