关注
2、避免重排:
1、浏览器自己的优化:浏览器会维护1个队列,把所有会引起回流、重绘的操作放入这个队列,等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会flush队列,进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。
2、我们要注意的优化:我们要减少重绘和重排就是要减少对渲染树的操作,则我们可以合并多次的DOM和样式的修改。并减少对style样式的请求。
(1)直接改变元素的className
(2)display:none;先设置元素为display:none;然后进行页面布局等操作;设置完成后将元素设置为display:block;这样的话就只引发两次重绘和重排;
(3)不要经常访问浏览器的flush队列属性;如果一定要访问,可以利用缓存。将访问的值存储起来,接下来使用就不会再引发回流;
不要在循环内获取dom 的样式例如:offsetWidth, offsetHeight, clientWidth, clientHeight... 这些。浏览器有一个回流的缓冲机制,即多个回流会保存在一个栈里面,当这个栈满了浏览器便会一次性触发所有样式的更改且刷新这个flush栈。但是如果你多次获取这些元素的实际样式,浏览器为了给你一个准确的答案便会不停刷新这个缓冲栈,导致页面回流增加。
(4)使用cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘;
(5)将需要多次重排的元素,position属性设为absolute或fixed,元素脱离了文档流,其变化不会影响到其他元素;
(6)如需要创建多个DOM节点,可以使用createDocumentFragment创建完后一次性的加入document
(7)尽量不要使用table布局,因为table 的每一个行甚至每一个单元格的样式更新都会导致整个table 重新布局
(8)用transform 代替 top,left ,margin-top, margin-left...
查看原帖
2 评论
相关推荐
07-02 18:09
门头沟学院 Java 点赞 评论 收藏
分享
06-24 00:02
北京电子科技职业学院 活动运营 点赞 评论 收藏
分享
06-03 19:26
西北农林科技大学 C++ 点赞 评论 收藏
分享
牛客热帖
更多
正在热议
更多
# 你觉得实习能学到东西吗 #
18957次浏览 464人参与
# 秋招什么时候开投比较合适? #
8309次浏览 169人参与
# 现代汽车前瞻技术研发急速编程挑战赛 #
22658次浏览 188人参与
# 实习,不懂就问 #
30659次浏览 529人参与
# 软开人,秋招你打算投哪些公司呢 #
101164次浏览 951人参与
# 如何准备秋招 #
12567次浏览 225人参与
# 运营人求职交流聚集地 #
141210次浏览 989人参与
# 每个月的工资都是怎么分配的? #
15591次浏览 333人参与
# 你觉得现在还能进互联网吗? #
4915次浏览 102人参与
# 预测一下26届秋招形势 #
26531次浏览 247人参与
# 你们公司几号发工资 #
19158次浏览 129人参与
# 如果你有一天可以担任公司的CEO,你会做哪三件事? #
28240次浏览 456人参与
# 晒一晒你收到的礼盒 #
70322次浏览 403人参与
# 打工人的精神状态 #
54382次浏览 993人参与
# 硬件应届生薪资是否普遍偏低? #
72719次浏览 511人参与
# 高考出分的那一天,我__ #
17347次浏览 269人参与
# 大疆今年的机械笔试难吗? #
41564次浏览 456人参与
# 来聊聊你认为的薪资天花板是哪家? #
31007次浏览 175人参与
# 牛客十周岁生日快乐 #
145277次浏览 1613人参与
# 机械实习一天多少钱合适? #
29064次浏览 177人参与
# 大家实习每天都在干啥 #
82964次浏览 506人参与