关注
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 评论
牛客热帖
正在热议
# 25届秋招总结 #
299007次浏览 2638人参与
# 如果不工作真的会快乐吗 #
58853次浏览 515人参与
# 阿里云管培生offer #
16804次浏览 294人参与
# 地方国企笔面经互助 #
3724次浏览 9人参与
# 美团求职进展汇总 #
1326730次浏览 12446人参与
# 选完offer后,你后悔学本专业吗 #
19636次浏览 143人参与
# 北方华创开奖 #
26415次浏览 285人参与
# 正在实习的你,几点下班 #
51591次浏览 385人参与
# 国央企薪资爆料 #
8000次浏览 65人参与
# 如何一边实习一边秋招 #
991874次浏览 12638人参与
# 提前批简历挂麻了怎么办 #
146349次浏览 1948人参与
# 学历or实习经历,哪个更重要 #
50849次浏览 401人参与
# 海康威视求职进展汇总 #
398668次浏览 3405人参与
# 米哈游求职进展汇总 #
175790次浏览 1458人参与
# 投递实习岗位前的准备 #
1178901次浏览 18390人参与
# 面试体验感最好的是哪家? #
85015次浏览 845人参与
# 实习生应该准时下班吗 #
167359次浏览 1159人参与
# 得物求职进展汇总 #
66155次浏览 682人参与
# 求职遇到的搞笑事件 #
70682次浏览 576人参与
# 网申一定要掌握的小技巧 #
5309次浏览 53人参与
# 0offer是寒冬太冷还是我太菜 #
897858次浏览 8008人参与
# 腾讯求职进展汇总 #
195694次浏览 1641人参与