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

1. 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。

2. 当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。

回流何时发生:

当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流:

1、添加或者删除可见的DOM元素;

2、元素位置改变;

3、元素尺寸改变——边距、填充、边框、宽度和高度

4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变;

5、页面渲染初始化;

6、浏览器窗口尺寸改变——resize事件发生时;

注意:回流必将引起重绘,而重绘不一定会引起回流。

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!'));

如何减少回流、重绘

减少回流、重绘其实就是需要减少对render tree的操作(合并多次多DOM和样式的修改),并减少对一些style信息的请求,尽量利用好浏览器的优化策略。具体方法有:

1. 直接改变className,如果动态改变样式,则使用cssText(考虑没有优化的浏览器)

2. 让要操作的元素进行”离线处理”,处理完后一起更新

a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘; b) 使用display:none技术,只引发两次回流和重绘; c) 使用cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘;

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏无所事事者爱嘲笑

数组方法整理

1114
来自专栏用户画像

浅析JAVA堆内存和栈内存的区别

堆内存:https://baike.baidu.com/item/%E5%A0%86%E5%86%85%E5%AD%98/7270805?fr=aladdin

721
来自专栏Vamei实验室

Python标准库13 循环器 (itertools)

在循环对象和函数对象中,我们了解了循环器(iterator)的功能。循环器是对象的容器,包含有多个对象。通过调用循环器的next()方法 (__next__()...

1758
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

3.4 js生成报表

如下函数示意在ID为tbHost的元素内追加一个表格:假设nodes为二维数组,遍历其所有行和列,将其元素的Ap属性以二维表格的形式显式出来。通过该函数可以直观...

780
来自专栏闻道于事

JavaWeb(八)JQuery

jQuery 市场用得比较多两个框架: jQuery 比较适合做一些互联网 的应用(12306.com,蘑菇街,美丽说,聚美) extjs 比较适合做后台管理系...

2714
来自专栏Pythonista

Go语言结构

在我们开始学习 Go 编程语言的基础构建模块前,让我们先来了解 Go 语言最简单程序的结构。

871
来自专栏程序员互动联盟

【编程基础】C语言FILE结构体以及缓冲区深入探讨

在C语言中,用一个指针变量指向一个文件,这个指针称为文件指针。通过文件指针就可对它所指的文件进行各种操作。 定义文件指针的一般形式为: FILE *...

2997
来自专栏菜鸟致敬

【lua菜鸟③】变量和循环

{lua的特点:①不需要分号结尾,但是支持分号啊,如果一行写多个语句就用它啊②没有花括号③函数也不需要声明类型,却和c++的语法极其类似}

672
来自专栏csxiaoyao

vim按键整理

2635
来自专栏Golang语言社区

【基础篇】Go 语言结构

Go Hello World 实例 Go 语言的基础组成有以下几个部分: 包声明 引入包 函数 变量 语句 & 表达式 注释 接下来让我们来看下简单的代码,该代...

32612

扫码关注云+社区