Rendering: repaint, reflow/relayout, restyle的学习笔记

http://www.zhuoqun.net/html/y2009/1430.html

Rendering tree是DOM tree的可见部分

页面渲染的过程:

1. 解析HTML代码并生成一个 DOM 树。

2. 解析CSS文件，顺序为：浏览器默认样式->自定义样式->页面内的样式</p> <p>3. </p>

3. 生成一个渲染树（render tree）。这个渲染树和DOM树的不同之处在于，它是受样式影响的。它不包括那些不可见的节点。

4. 当渲染树生成之后，浏览器就会在屏幕上“画”出所有渲染树中的节点。

那什么是 reflow 呢？reflow 是指渲染树中的一些节点被重新验证或者大小被重新计算。一个页面至少会在初始化的时候 reflow 一次。而 repaint 是指屏幕中的一些显示需要更新，比如更改了某个元素的背景颜色。

reflow 和 repaint 都是需要计算的，会消耗资源，影响用户体验。所有对用来生成渲染树的信息的改动都会触发 reflow 或者 repaint 。比如：添加或删除一个DOM节点、把一个节点的display设为none 等。由于reflow 和 repaint 会消耗资源，所以浏览器一般都会对此进行优化。有些浏览器会建立一个队列，把发生的 reflow 和 repaint 放进去，然后进行批处理。但是当你获取某些节点的样式信息的时候，会破坏浏览器的这种默认优化，强迫浏览器执行当前所有的 reflow 和 repaint。比如当你获取某个节点的 offsetTop 的时候，浏览器必须提供给你最新的数值，所以就需要把之前的 reflow 和 repaint 都执行。

为了节省资源提高用户体验，我们在编写代码的时候就必须要注意不能让浏览器 reflow 和 repaint 太频繁，尽量避免这样的代码：

1
2
3

for(i=0;i<n;i++){el.style.left = el.offsetLeft + 10 + "px";
}

下面提供一些减少 reflow 和 repaint 的思路：

1. 不要一个一个地去直接修改元素的样式，最好去修改样式表，然后修改元素的className。

var left = 10,
top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";
// 这样不好
el.className += " theclassname";
// 这样很好

2.批量处理DOM操作，最好不要在当前的DOM树中直接操作。比如：使用documentFragment 来暂存一些操作；先将要进行操作的DOM节点clone，更改完毕之后再去替换当前的节点；先将要操作的DOM节点的display设置为hidden，执行操作之后再更改回来。

3. 避免一直计算元素样式。比如在循环中，你可以先用本地变量将计算的样式保存。

// 不要这么做
for(big; loop; here) {el.style.left = el.offsetLeft + 10 + "px";
el.style.top  = el.offsetTop  + 10 + "px";
}
// 最好先存储到变量里。
var left = el.offsetLeft,
top  = el.offsetTop
esty = el.style;
for(big; loop; here) {left += 10;
top  += 10;
esty.left = left + "px";
esty.top  = top  + "px";
}

Rendering: repaint, reflow/relayout, restyle的学习笔记相关推荐

Practical Rendering and Computation with Direct3D 11学习笔记（1.4）
1.4 Interfacing with Direct3D 本节主要介绍Direct3D11两个最主要的接口,Device和Context. 1.4.1 Device Device和Device co ...
《Real-Time Rendering》第四版学习笔记——Chapter 9 Physically Based Shading（一）
一.光的物理特性光与物体的交互形成了基于物理着色的基础. 在物理层面上,光的模型为电磁横波.每个波都有一个单一的波长λ\lambdaλ.具有单一波长的光叫单色光(monochromatic ligh ...
《Real-Time Rendering》第四版学习笔记——Chapter 9 Physically Based Shading（二）
上接文章:<Real-Time Rendering>第四版学习笔记--Chapter 9 Physically Based Shading(一) 六.微观几何每个可见的表面点都包含了很多 ...
《Real-Time Rendering》第四版学习笔记——Chapter 9 Physically Based Shading（三）
前文: <Real-Time Rendering>第四版学习笔记--Chapter 9 Physically Based Shading(一) <Real-Time Renderin ...
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs) 一. HTML 1. 盒子模型是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content ...
《Go语言圣经》学习笔记第三章基础数据类型
<Go语言圣经>学习笔记第三章基础数据类型目录整型浮点数复数布尔型字符串常量注:学习<Go语言圣经>笔记,PDF点击下载,建议看书. Go语言小白学习笔记, ...
React-Native学习笔记
资源: 1. Redux 中文文档 Redux 中文文档 2. Atom文本编辑工具 Atom文本编辑工具 3. React-native 官方文档 React-native 官方文档问题: 1. ...
Angular 服务器端渲染的学习笔记(二)
官网地址:https://angular.io/guide/universal I have mainly used angular universal for SEO purposes. In th ...
java画笔覆盖在界面_Java学习笔记：swing画笔工具Graphics，刷新页面，键盘事件，随机数等【诗书画唱】...
Graphics:画笔工具 setColor:设置画笔颜色 DrawRect:空心矩形 fillRect:实心矩形 DrawOavl:空心圆 fillOavl:实心圆 DrawLine:画线(注意) ...

Rendering: repaint, reflow/relayout, restyle的学习笔记

Rendering: repaint, reflow/relayout, restyle的学习笔记相关推荐

最新文章

热门文章