问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501

浏览器的渲染重拍发生在什么时候

发布网友 发布时间:2022-04-20 00:22

我来回答

1个回答

热心网友 时间:2022-04-20 01:52

重排是更明显的一种改变,可以理解为渲染树需要重新计算。下面是常见的触发重排的操作:
  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)。所以,在多次使用这些值时应进行缓存。
  此外,改变元素的一些样式,调整浏览器窗口大小等等也都将触发重排。
  开发中,比较好的实践是尽量减少重排次数和缩小重排的影响范围。例如:
  1. 将多次改变样式属性的操作合并成一次操作。例如,
  JS:
var changeDiv = document.getElementById(‘changeDiv’);
changeDiv.style.color = ‘#093′;
changeDiv.style.background = ‘#eee’;
changeDiv.style.height = ’200px’;

  可以合并为:
  CSS:
div.changeDiv {
background: #eee;
color: #093;
height: 200px;
}

  JS:
document.getElementById(‘changeDiv’).className = ‘changeDiv’;

  2. 将需要多次重排的元素,position属性设为absolute或fixed,这样此元素就脱离了文档流,它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
  3. 在内存中多次操作节点,完成后再添加到文档中去。例如要异步获取表格数据,渲染到页面。可以先取得数据后在内存中构建整个表格的html片段,再一次性添加到文档中去,而不是循环添加每一行。
  4. 由于display属性为none的元素不在渲染树中,对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时,可以先隐藏它,操作完成后再显示。这样只在隐藏和显示时触发2次重排。
  5. 在需要经常获取那些引起浏览器重排的属性值时,要缓存到变量。
声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com
找专业防水队做完还漏水怎么维权 法院会受理房屋漏水造成的纠纷吗? 巴西龟最长活多久,家养!!! 养胃的药最好的是什么啊 婴儿积食发烧不愿吃药怎么办 板门穴位在哪个部位 手机设置放偷看的方法? 凝结水回收器生产厂家? 个人账户养老金预测公式:现有5万元,缴费20年,能领多少钱? 临沂比较有名的男装品牌 朋友登录我的微信帮我打王者我可以自己用自己的手机在打QQ吗 iqooneo5怎么重绘图标 我想去虎牙直播,不上班去弄直播,不知道能不能行 虎牙直播可以不用认证也可以直播吗 虎牙直播可以自动开播吗? iQOO手机怎么使用重绘图标- 问一问 招行学生卡怎么提额最快 工商信用卡取消注销多久才能办工商灵通卡? 95588电话注销工商信用卡要多久才成功 刚学会自由泳,有很多问题,只能游50m就累得要死 请问自由泳需要配合体能训练麽 痔疮引起大便出血需要做手术吗? 大便出血是痔疮吗?怎么治疗? 有痔疮的人,大便的时侯是不是会出血 痔疮大便为什么会出血 js 重排和重绘的区别? 得了痔疮会引发大便出血吗? ;有痔疮在大便时会经常出血吗发病时间及原因:治疗情 痔疮会引起大便出血吗 今年参加了陕西省自考,英语怎么只有40分,我的英语答的挺好的 生铁是怎么提炼的 铁水是怎么炼出来的,都用到什么料 铁从矿石到成材的整个过程是什么? 手绘常用的笔都有哪些类型?谁能分享一些手绘素材或手绘的方法,下面这个图是用什么笔画的? 画设计手绘用的彩色笔叫什么笔? 各位手绘都用什么自动笔 手绘都用些什么笔? 漫画手绘投稿用什么笔 室内手绘用什么笔 手绘漫画一般都用什么 笔 上色? 手绘漫画时都要用什么笔啊? 学手绘,要用什么钢笔好? 银行中的“反交易”指什么?还有什么是“印鉴卡”? 买车险怎么分变正价交易和反利交易? 华为畅享20plus手机摄像头不升出手机能拍照片吗 PSP的流行之神汉化了吗 《原神》菲谢尔推荐武器圣遗物是什么? 菲谢尔的元素战技吃暴击吗 网页使用jframe框架时怎么让它整体刷新 拆字是非主流创的字体么?