重绘:
元素样式的改变(但宽高、大小、位置等不变)
讲人话:
只改变自身样式,不会影响到其他元素
回流:
元素的大小或者位置发生改变(当页面布局和几何信息发生改变的时候),导致dom树重新计算布局和渲染
讲人话:
你改动的东西影响到页面布局里,就需要重新渲染,就是回流
注意:回流一定会触发重绘,而重绘不一定会回流
如何避免
避免使用table布局
不要使用css计算calc
动画效果放在position为absolute或者fixed的元素上
尽可能在dom树的最末端改变样式
用js操作样式的时候尽量一次操作完或者将样式定义为一个class
尽量避免过多的操作dom元素的新增和删除
什么是防抖和节流?
防抖:
高频率触发的事件,在指定的单位时间内,只响应最后一次
在指定的时间在触发,则重新计算时间(后面触发的事件执行,替代了前面的事件)
比如:淘宝搜索框的联想
你每一次输入的时候都会有不同的联想推荐,但是app执行执行的只有最后一次
节流:
高频率触发的事件,在指定的单位时间内,只响应第一次
前面触发的执行前,忽略后面的事件
比如:验证码 技能cd
扫描二维码关注公众号,回复:
16101389 查看本文章
验证码:你点了一下之后,在等待时间里,再点是无效的,只执行第一次
技能cd:玩游戏放技能 在技能的cd时间内点击无效的,只执行第一次
作用:
提高性能,避免资源浪费