了解重排与重绘


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 相关文章推荐
JS判定是否原生方法
Jul 22 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
小程序如何构建骨架屏
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操作MongoDB的技术总结
2013/06/02 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
js中数组常用方法总结(推荐)
2019/04/09 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
深入理解Python装饰器
2016/07/27 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
python为什么要安装到c盘
2020/07/20 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
《开国大典》教学反思
2014/04/19 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
助学感谢信范文
2015/01/21 职场文书
考试作弊检讨
2015/01/27 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
老干部座谈会主持词
2015/07/03 职场文书