关注
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 评论
相关推荐
点赞 评论 收藏
分享
牛客热帖
更多
- 1... 秋招一周年回过头看,庆幸自己放弃大厂选择体制内423
- 2... 字节OR美团266
- 3... 中科曙光嵌入式面经121
- 4... 可以年前面试年后入职吗?72
- 5... 小时候最想当的是很酷的店长66
- 6... 秋招看重什么? 大家来做做优先级排序吧63
- 7... 不提前实习就不给offer的公司要去吗?56
- 8... 牛可乐国庆旅行篇-西湖54
- 9... 租房一定要看一度电费和有没有冰箱52
- 10... 目前实习快一个月了,但是考核没达标,三个需求只做完了一个,不知道什么时候被踢,自己真的尽力做了,下班也push自己处理出现的问题,但因为各种各样的原因做了很久才做完。现在在想要不要自己辞职准备秋招,虽然都说边实习边秋招,但从实习的这个月看自己根本抽不出多少时间准备,求各位牛友支个招#实习好累,可以辞职全力准备秋招吗#52
正在热议
更多
# 你的实习什么时候入职 #
306413次浏览 2122人参与
# 牛油的搬砖plog #
112409次浏览 816人参与
# 深信服秋招来了 #
272456次浏览 2905人参与
# 金融财经春招备战日记 #
30259次浏览 166人参与
# 制造业的秋招小结 #
116306次浏览 1970人参与
# 招聘要求与实际实习内容不符怎么办 #
129867次浏览 824人参与
# 携程求职进展汇总 #
640345次浏览 4660人参与
# 你朋友圈最大的人脉是谁? #
22600次浏览 145人参与
# 如果没找到工作,考公是你的退路吗 #
49701次浏览 398人参与
# 工作两年想退休了 #
163905次浏览 1414人参与
# 什么样的背景能拿SSP? #
113208次浏览 404人参与
# 26届的你,投了哪些公司? #
193603次浏览 1183人参与
# 非技术er求职现状 #
102169次浏览 672人参与
# 校招入职后的感受 #
379203次浏览 3222人参与
# 如何快速融入团队? #
33553次浏览 280人参与
# 你在职场中沾染到的“坏”习惯 #
22245次浏览 145人参与
# 你做过哪些dirty work #
18751次浏览 139人参与
# 听到哪句话就代表面试稳了or挂了? #
216220次浏览 1586人参与
# 大学四年该怎么过,才不算浪费时间? #
13556次浏览 80人参与
# 国庆假期,给大脑放个假 #
5729次浏览 48人参与
# 如果公司降薪,你会跳槽吗? #
97924次浏览 632人参与
# 你小时候最想从事什么职业 #
124051次浏览 1924人参与