思睿鸿途北京网站建设,实时热榜,网站怎么做公司,wordpress 手机模板详解重排重绘 前言页面渲染页面渲染 重排重绘重排重绘哪个更耗时间避免重排重绘发生重排重绘实例 前言
本文主要讲解在页面加载成功后可能因为页面中DOM元素样式或布局被修改从而引发的重排重绘进行一个讲解#xff0c;那么好#xff0c;本文正式开始.
页面渲染
因为重排重… 详解重排重绘 前言页面渲染页面渲染 重排重绘重排重绘哪个更耗时间避免重排重绘发生重排重绘实例 前言
本文主要讲解在页面加载成功后可能因为页面中DOM元素样式或布局被修改从而引发的重排重绘进行一个讲解那么好本文正式开始.
页面渲染
因为重排重绘这两个概念其实是基于页面渲染这个层面进行一个拓展和延申那么我们在讲解重排重绘前先了解以下页面是如何渲染的这里不对URL、DNS解析、三次握手四次挥手做深入展开只针对渲染做讲解。
页面渲染
解析HTML并把解析到的HTML渲染到DOM树包括元素和布局都解析上去。解析CSS就是将CSS解析到CSSOM规则树。将HTML树和CSS树构建成一个render呈现树。布局根据render树上各个DOM元素上的位置在页面上进行对应的布局。绘制遍历render树进行页面元素的进一步的绘制。
那么了解这些接下来讲解重排重绘的概念以及影响就方便很多了。
重排
概念页面布局发生影响比如某个在页面上已经呈现且在DOM树中的元素被删除了同时DOM树也没有这个节点了那么就会进行重排操作。
重绘
概念页面样式发生影响比如某个元素的颜色发生变化了这时候浏览器就会自动进行重绘的操作。
重排重绘哪个更耗时间
重排要比重绘更耗时间因为在页面渲染模块我们发现布局是要比绘制更耗时间因为重排需要涉及到更多的关于遍历DOM树深度等的计算操作而重绘省去了布局和分层阶段所以重绘的效率更高
避免重排重绘
当我们频繁的去让页面处在一个动态的状态下那么就会导致不断的去自动发生重排重绘的操作那么就会对性能造成影响所以在日常开发中应该尽量避免重排重绘操作的出现。
发生重排重绘实例
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestylediv{width:100px;height:100px;border:1px solid gray;}/style/headbodydiv idchongpai/divbrbutton onclickbtn1()点击重排/buttondiv idchonghui/divbrbutton onclickbtn2()点击重绘/buttonscriptlet cpdocument.getElementById(chongpai)let chdocument.getElementById(chonghui)function btn1(){cp.style.displaynone}function btn2(){ch.style.backgroundColorred}/script/body
/html默认图 点击重排按钮调用重排 在上述按钮中我们创建了一个方法这个方法控制div元素让上面div元素的display为none同时displaynone就是把渲染树上的这个div进行去除那么就会导致重排效果出现。 点击重绘 点击重绘后我们发现颜色发生改变那么如果样式发生变化时就会引起重绘。
