了解重排与重绘


Posted in Javascript onMay 29, 2019

前言

浏览器下载完页面中的所有内容:HTML、JavaScript、CSS、图片——之后会解析并生成两个内部数据结构:

  • DOM树:表示页面结构
  • 渲染树:表示DOM节点如何显示

DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM元素在渲染树中没有对应的节点)。渲染树中的节点被称为“帧”或者“盒子”,理解页面元素为一个具有填充(padding)、边距(margin)、边框(border)和位置(position)的盒子。一旦DOM树和渲染树构建完成,浏览器就开始显示(绘制 paint)页面元素

当DOM的改变影响了元素几何属性(例如宽和高)——浏览器就需要重新计算元素的几何特性,同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。这个过程称为重排(reflow)。完成重排后,浏览器会重新绘制受到影响的部分到屏幕中,该过程称为重绘(repaint)

重绘和重排操作都是代价昂贵的操作,它们会导致web应用程序的UI反应迟钝,所以应该尽可能减少这类过程的发生。

引起重排的原因

  • 添加或删除可见的DOM元素
  • 元素位置改变
  • 元素尺寸改变
  • 内容改变(例如:文本改变或图片被另一个不同尺寸的图片替代)
  • 页面渲染初始化
  • 浏览器窗口尺寸改变

渲染树变化的排队与刷新

由于每次重排都会产生计算消耗,大多数浏览器通过队列化修改和批量执行来优化重排过程(将多个重排过程合并成一次)。然而,某些操作会强制刷新队列并要求队列中的重排立即执行(这样会使浏览器的优化策略失效)。

  • 获取布局信息的操作会导致强制刷新队列,使得浏览器不得不执行渲染队列中的“待处理变化”并触发重排以返回正确的值
    • offsetTop,offsetLeft,offsetWidth,offsetHeight
    • scrollTop,scrollLeft,scrollWidth,scrollHeight
    • clientTop,clientLeft,clientWidth,clientHeight
    • getComputedStyle()
  • 优化方法:尽量不要在布局信息改变时查询它,可以在布局信息改变完毕之后再去查询

最小化重绘和重排

重绘和重排的代价非常昂贵,因此一个好的提高程序响应速度的策略就是减少此类操作的发生。为了减少发生次数,应该合并多次对DOM和样式的修改,然后一次处理掉。

合并多次对样式的修改

var el = document.getElementById('myDiv')
el.style.borderLeft = '1px'
el.style.borderRight = '2px'
el.style.padding = '5px'

上面的例子中,存在两个问题:

  • 每个样式属性的改变都会影响元素的集合结构,最糟糕的情况下,会导致浏览器触发三次重排(大部分现代浏览器都为此做了优化,只会触发一次重排)
  • 上面的代码访问了4次DOM

优化方法:使用cssText属性,合并所有的改变然后一次处理

var el = document.getElementById('myDiv')
el.style.cssText +='border-left: 1px; border-right: 2px; padding: 5px;';

批量修改DOM

当需要对DOM元素进行一系列操作时,可以通过以下步骤来减少重绘和重排的次数

1.使元素脱离文档流

2.对其进行一些列操作

3.把元素带回文档中

  • 使元素脱离文档流的方法:
    • 隐藏元素,施加修改,重新显示
    • 使用document fragment在当前DOM之外构建一个子树,再把它拷贝会文档
    • 将元素元素拷贝到另一个脱离文档的节点中,修改副本,完成后再替换原始元素。

缓存布局信息

在上面的介绍中讲到了,浏览器通过队列化修改和批量执行的方式减少重排次数。但是当查询布局信息时(如获取偏移量、滚动位置、计算出的样式值),浏览器为了返回最新值,会刷新队列并应用所有的变更。因此最好的做法应该是尽量减少布局信息的获取次数,获取后把它复制给局部变量,然后再操作局部变量。

IE和:hover

避免在大量元素上使用:hover这种效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
纯javascript制作日历控件
Jul 17 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
vue缓存之keep-alive的理解和应用详解
Nov 02 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
小程序如何构建骨架屏
May 29 #Javascript
新手简单了解vue
May 29 #Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 #Javascript
基于JS实现一个随机生成验证码功能
May 29 #Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 #Javascript
深入了解响应式React Native Echarts组件
May 29 #Javascript
node将geojson转shp返回给前端的实现方法
May 29 #Javascript
You might like
组合算法的PHP解答方法
2012/02/04 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
vue 实现tab切换保持数据状态
2020/07/21 Javascript
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
python实现列表的排序方法分享
2019/07/01 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
python datetime中strptime用法详解
2019/08/29 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
超市营业员求职简历的自我评价
2013/10/17 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
参观接待方案
2014/03/17 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
民事诉讼代理词
2015/05/25 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技