重绘与回流(重排):
重绘:repaint 当元素样式的改变不会影响布局时,浏览器将会用重绘对元素进行更新,此时只需UI层面的重新像素绘制,耗损少,常见操作:改变元素颜色,背景色等。
回流:reflow当元素尺寸,结构发生改变或触发属性时浏览器会重新计算渲染到页面内,发生回流,常见操作:让标签显示和影藏,改变宽高,通过 JS 往页面添加DOM元素,通过JS获取元素尺寸大小或偏移量等。
重绘不一定引起回流,但回流一定引起重绘。
怎样减少重绘和回流?
css:
1.使用transform 替代top ,left
2.使用visibility替换display:none,前者只会引起重绘,后者会改变布局引发回流(个人习惯写 的都是display:none 改!!)
3.避免使用table布局,可能小的改动会造成整个table的重新布局table元素一旦触发回流就会导 致table里所有其他元素回流。(使用表单元素时不加编辑器报错, 解决!!!)
4.避免设置多层内联样式,css选择符合从右往左匹配查找,避免节点层级过多。
5.尽量使用css属性简写,如border代替border-width,border-style(需注意一下写法)
JS:
1.避免频繁操作样式,最好一次性重写style属性,或将样式列表定义为class并一次性更改class 属性。(都有反复改样式,最好先想清楚自己需要怎样的样式在写)
2.避免频繁操作DOM,创建一个documentFragment,在它上面应用所有的DOM操作,最后把 他添加到文档中(虚拟文档 ===有点忘)。
3.避免频繁读取会引发回流/重绘的属性,如需多次使用。用一变量缓存。
4.对具有复杂页面动画的元素使用绝对定位,使其脱离文档,否则会引起父元素及后续元素频 繁回流。
5.避免触发同页布局
浏览器的渲染过程:
1.解析html创建DOM树
2.解析css创建CSSOM(css rule true css规则树)
3.将DOM树和CSSOM树结合,合并成一个Render Tree (渲染树)
4.根据渲染树。去布局绘制并显示
客户端(浏览器)到服务器:
1.先进行域名解析
2.进行http请求,三次握手四次挥手(组织语言描述完整)
3.加载解析html:代码运行顺序丛上往下一行一行执行,在执行的过程中,会解析html标签创建一个DOM树,解析css创建CSSOM,将DOM与CSSOM结合,合成一个Render Tree
事件三阶段:先捕获 后目标 再冒泡
什么是事件委托(事件代理):
利用了事件冒泡机制触发,当多个标签需要绑定同一个事件时,把这个事件委托给他们的某个祖先,让其担当事件监听的职务。
优点:1.可以减少事件注册,节省大量内存占用
2.可将事件应用于动态添加的子元素上
缺点:1.使用不当会造成事件在不应该触发的时候触发
防抖和节流:
防抖:针对高频触发事件,让事件处理函数(事件处理的逻辑代码)延迟一段时间执行,如果在这段时间内再次触发,则重新开始计时,直到在重新计时这段时间内,没有再次触发执行事件处理函数。
节流:针对高频触发事件,让事件处理函数每隔一段时间执行一次稀释执行频率。