关注
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 评论
相关推荐
点赞 评论 收藏
分享
10-31 10:39
哈尔滨工业大学(威海) Java 点赞 评论 收藏
分享
牛客热帖
更多
正在热议
更多
# 月薪多少能在一线城市生存 #
77043次浏览 513人参与
# 技术转行的心路历程 #
72587次浏览 743人参与
# 百度秋招 #
36155次浏览 331人参与
# 如果再来一次,你还会选择这个工作吗? #
702515次浏览 5716人参与
# 你会为了工作牺牲生活吗? #
59832次浏览 421人参与
# offer帮选 #
4337595次浏览 26330人参与
# 秋招吐槽大会 #
3663次浏览 43人参与
# 你找工作想离家近 or 离家远? #
747次浏览 25人参与
# 总结:哪家公司最喜欢泡池子 #
150871次浏览 543人参与
# 小米编程考试 #
22873次浏览 145人参与
# 互联网行业现在还值得去吗 #
37802次浏览 280人参与
# 你小时候最想从事什么职业 #
133926次浏览 1987人参与
# 虾皮开奖 #
44436次浏览 209人参与
# 滴滴歧视残疾人HR被开除 #
23511次浏览 86人参与
# 25届非技术实习投递记录 #
136997次浏览 1001人参与
# 落户对你的求职选择影响有多大 #
29739次浏览 101人参与
# 你认为工作的意义是什么 #
209861次浏览 1348人参与
# 机械人,秋招第一次笔试的企业是哪家? #
79377次浏览 611人参与
# 第一次找实习,我建议__ #
29368次浏览 367人参与
# 外出实习被同学举报 #
7393次浏览 43人参与
# 面试时间长是好事吗? #
109775次浏览 696人参与


查看13道真题和解析