JS的重绘(repaints)和重排(reflows)
两个名词的非官方正式解释:
重绘是一个元素外观的改变所触发的浏览器行为,例如改变vidibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。重绘不会带来重新布局,并不一定伴随重排。
重排是更明显的一种改变,可以理解为渲染树需要重新计。
重排发生条件:
添加或删除可见的DOM元素
元素位置的改变
元素尺寸改变
内容改变
页面渲染器初始化
浏览器窗口尺寸的改变
理解了定义这些都很好理解,而且引发重拍的条件不止这些。
重排想好这大量的资源,所以我们在前端开发过程中要尽量避免。下面我们来看看如何针对重排进行优化:
将多次改变样式属性的操作合并成一次操作
将需要多次重排的元素,position属性设为absolute或fixed,这样此元素就脱离了文档流,它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
在内存中多次操作节点,完成后再添加到文档中去。例如要异步获取表格数据,渲染到页面。可以先取得数据后在内存中构建整个表格的html段,再一次性添加到文档中去,而不是循环添加每一行。
由于display属性为none的元素不在渲染树中,对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时,可以先隐藏它,操作完成后再显示。这样只在隐藏和显示时触发2次重排。
在需要经常获取那些引起浏览器重排的属性值时,要缓存到变量。
详解:
1. DOM元素的几何属性变化
当DOM元素的几何属性变化时,渲染树中的相关节点就会失效,浏览器会根据DOM元素的变化重建构建渲染树中失效的节点。之后,会根据新的渲染树重新绘制这部分页面。而且,当前元素的重排也许会带来相关元素的重排。例如,容器节点的渲染树改变时,会触发子节点的重新计算,也会触发其后续兄弟节点的重排,祖先节点需要重新计算子节点的尺寸也会产生重排。最后,每个元素都将发生重绘。可见,重排一定会引起浏览器的重绘,一个元素的重排通常会带来一系列的反应,甚至触发整个文档的重排和重绘,性能代价是高昂的。
2.DOM树的结构变化
当DOM树的结构变化时,例如节点的增减、移动等,也会触发重排。浏览器引擎布局的过程,类似于树的前序遍历,是一个从上到下从左到右的过程。通常在这个过程中,当前元素不会再影响其前面已经遍历过的元素。所以,如果在body最前面插入一个元素,会导致整个文档的重新渲染,而在其后插入一个元素,则不会影响到前面的元素。
3.获取某些属性
浏览器引擎可能会针对重排做了优化。比如Opera,它会等到有足够数量的变化发生,或者等到一定的时间,或者等一个线程结束,再一起处理,这样就只发生一次重排。但除了渲染树的直接变化,当获取一些属性时,浏览器为取得正确的值也会触发重排。这样就使得浏览器的优化失效了。这些属性包括:offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以,在多次使用这些值时应进行缓存。
JS的重绘(repaints)和重排(reflows)相关推荐
- 关于重绘repaint和重排reflow
一.什么是重绘,重排 渲染树转换为网页布局,称为"布局流"(flow) ,布局显示到页面的这个过程,称为"绘制"(paint) . 它们都具有阻塞效应,并且会耗 ...
- 页面重绘和回流以及优化
在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类 ...
- JS性能--DOM编程之重排与重绘
浏览器下载完页面中的所有组件----HTML标记,Js,CSS,图片等之后会解析并生成两个内部数据结构: DOM树 -------- 表示页面结构 渲染树 -------- 表示DOM节点如何显 ...
- android 重绘如何能不闪一下屏幕_浏览器渲染机制——重绘重排
性能优化中,减少重绘重排应该是一种很好的优化方式,我们具体看一下什么情况下会造成重绘重排,为什么减少重绘重排可以做到优化,怎么样减少重绘重排. 浏览器渲染过程 我们先看看当浏览器拿到服务端返回的资源时 ...
- 前端性能优化之重排和重绘
前言,最近利用碎片时间拜读了一下尼古拉斯的另一巨作<高性能JavaScript>,今天写的文章从"老生常谈"的页面重绘和重排入手,去探究这两个概念在页面性能提升上的作用 ...
- android 重绘如何能不闪一下屏幕_前端性能优化之重绘和重排
性能优化中,减少重绘重排应该是一种很好的优化方式,我们具体看一下什么情况下会造成重绘重排,为什么减少重绘重排可以做到优化,怎么样减少重绘重排. 浏览器渲染过程 我们先看看当浏览器拿到服务端返回的资源时 ...
- 你真的了解重排和重绘吗?
做过前端开发的小伙伴就算不是非常理解重排与重绘,但是肯定都听过这两个词.那为什么这两个东西这么重要?因为他与我们的页面性能息息相关,今天,我们就来好好研究一下这两个东西. 浏览器的渲染流程 在讲解重排 ...
- 浏览器:重绘(repaint)与回流/重排(reflow)
一.从上面这个图上,我们可以看到,浏览器渲染过程如下: 1.解析HTML,生成DOM树,解析CSS,生成CSSOM树 2.将DOM树和CSSOM树结合,生成渲染树(Render Tree) 3.Lay ...
- 重排 (reflow) 与重绘 (repaint)
前言 本文依旧是日常学习总结篇,主要是要理解浏览器的重排与重绘. 一.浏览器解析渲染页面过程 当浏览器获得一个 html 文件时,会 "自上而下" 加载,并在加载过程中进行解析渲染 ...
最新文章
- Activity-生命周期
- Eclipse如何生成jar包
- 全球及中国甲苯甲酸行业投资决策与运营前景状况分析报告2022版
- python中怎么比较两个列表的大小_Python:找到两个列表中存在的给定长度的公共子列表...
- c语言提取图片yiq分量,图片数字水印C语言代码
- 使用Numpy和Opencv完成图像的基本数据分析(Part II)
- python动态表情包下载_Python从eif中导出qq表情的gif图片
- 皕杰报表和炎黄盈动(AWS BPM)集成 操作手册
- Ionic4.x 中自定义公共模块
- Ubuntu虚拟机及Petalinux开发平台安装
- 剑指offer——面试题15:链表中倒数第k个结点
- 中文停用词词表-自然语言处理
- windows图片查看器背景颜色更改
- linux debian 设置 开机 启动
- OEE(设备综合效率)
- 紧急!!!请尽快将Flash Player升级到9.0.124
- windows 2003中iis写入事件日志的问题。
- bukgu 杂项 图穷匕见
- 【人工智能】关于人类大脑模型的一些数学公式
- Three.js中添加指南针