关注
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 评论
相关推荐
点赞 评论 收藏
分享
01-31 04:00
电子科技大学 Java 点赞 评论 收藏
分享

点赞 评论 收藏
分享
牛客热帖
更多
正在热议
更多
# 面试被问“你的缺点是什么?”怎么答 #
5144次浏览 83人参与
# 租房找室友 #
7819次浏览 53人参与
# 水滴春招 #
14742次浏览 167人参与
# 25届秋招公司红黑榜 #
238074次浏览 988人参与
# 入职第四天,心情怎么样 #
10931次浏览 56人参与
# 简历无回复,你会继续海投还是优化再投? #
48512次浏览 560人参与
# 机械人选offer,最看重什么? #
69053次浏览 449人参与
# 牛友们的论文几号送审 #
15983次浏览 500人参与
# 软开人,你觉得应届生多少薪资才算合理? #
81328次浏览 496人参与
# 国企还是互联网,你怎么选? #
109092次浏览 852人参与
# 22届毕业,是读研还是拿外包offer先苟着 #
4639次浏览 27人参与
# 机械人,你的秋招第一份简历被谁挂了 #
125789次浏览 1925人参与
# 总结:哪家公司面试体验感最差 #
33254次浏览 169人参与
# 职场新人生存指南 #
198778次浏览 5496人参与
# 安利/避雷我的专业 #
62063次浏览 481人参与
# 读研or工作,哪个性价比更高? #
26026次浏览 356人参与
# 听劝,这个公司值得去吗 #
382278次浏览 1515人参与
# 参加完秋招的机械人,还参加春招吗? #
26665次浏览 275人参与
# 你觉得早上几点上班合适? #
61641次浏览 256人参与
# 如果重来一次你还会读研吗 #
155645次浏览 1705人参与
# 你们的毕业论文什么进度了 #
900357次浏览 8944人参与