小编给大家分享一下web开发中重排与重绘的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
前言
浏览器下载完页面中的所有内容: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这种效果。
看完了这篇文章,相信你对“web开发中重排与重绘的示例分析”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。