关注
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 评论
相关推荐
点赞 评论 收藏
分享
09-22 09:42
江西理工大学南昌校区 Java 牛客37185681...:马德,我感觉这是我面过最恶心的公司,一面是两个女hr,说什么实习前几个月属于试用期,试用期过了才能转成正式实习生,我***笑了,问待遇就是不说,问能不能接受全栈,沙币公司
点赞 评论 收藏
分享
牛客热帖
更多
正在热议
更多
# 实习在多还是在精 #
33275次浏览 233人参与
# 我的求职进度条 #
79952次浏览 1090人参与
# 平安产险科技校招 #
521次浏览 0人参与
# 秋招踩过的“雷”,希望你别再踩 #
79538次浏览 1049人参与
# 实习下班不想学习,正常吗? #
18852次浏览 170人参与
# 你现在会用到哪些AI技能? #
4400次浏览 72人参与
# 未岚大陆求职进展汇总 #
6402次浏览 82人参与
# 你的房租占工资的比例是多少? #
64302次浏览 797人参与
# 你见过哪些工贼行为 #
15787次浏览 87人参与
# 你还有多少年退休? #
26470次浏览 192人参与
# 校招谈薪一定要知道的事 #
12504次浏览 111人参与
# 反问环节如何提问 #
114917次浏览 2452人参与
# 找工作中的小确幸 #
25172次浏览 258人参与
# 小马智行求职进展汇总 #
13317次浏览 49人参与
# 顺丰求职进展汇总 #
63075次浏览 313人参与
# 你觉得什么岗位会被AI替代 #
15658次浏览 174人参与
# 大厂VS公务员你怎么选 #
23788次浏览 349人参与
# 如果不考虑收入,你最想做什么工作? #
32455次浏览 185人参与
# 非技术岗投递进展 #
157693次浏览 1314人参与
# 总结:哪家公司面试体验感最好 #
69880次浏览 416人参与
# 金蝶求职进展汇总 #
53615次浏览 262人参与
# 在国企工作的人,躺平了吗? #
367827次浏览 3915人参与