防抖、节流、重绘、重排(回流)

简单记录下关于这四个东西的笔记

防抖

//触发高频事件后n秒内只执行一次，如果n秒内再次触发就重计算时间
//主要是清除一个计时器再设置新的计时器
var timer = null;
function reborn(){
	clearTimeout(timer);
    //如果500ms内多次调用，只执行最后一次
	timer = setTimeout(function(){
		//触发函数
		console.log('防抖');
	}, 500)
};

节流

//触发高频事件后n秒内只执行一次，n秒内再触发也不会执行
//主要是设置一个flag记录状态
var flag = true;
function try(){
    if(!flag){
        //值为false表示在执行上一次调用，跳出本次调用，直到上一次调用结束
        reutrn;
    }
    flag = false;
    setTimeout(function(){
        //触发函数
        console.log('节流')；
        flag = true;
    }, 500)
};

总结

监听某类事件时，处理函数在短时间内被频繁调用。
(如调用后台接口，上次还没响应下次请求又来了)，增加了服务器压力和客户端卡顿。

-节流和防抖都是延迟执行。
-防抖是最后一个执行事件才会触发函数，节流是一定时间内才触发函数。

---

重绘 repaint

屏幕一部分要重绘。
渲染树节点改变不影响该节点在页面中的空间位置和大小(比如某个div的属性变化，但宽高padding、margin不变)，触发重绘。

回流 reflow

也叫重排。
当渲染树节点改变影响节点的几何属性(宽、高、padding、margin、float、position、display:none等等)，
使节点位置发生变化，触发重排，重新生成渲染树。

回流必将引起重绘，重绘不一定引起回流

发生浏览器回流：
1.添加或删除可见的DOM元素
2.元素位置改变(display、float、position、overflow...)
3.元素尺寸改变(height、width、padding、margin...)
4.内容改变(文本、图片等引起的计算值宽度高度改变)
5.页面渲染初始化
6.浏览器窗口尺寸改变(resize事件)

-如何减少和避免回流，优化浏览器渲染过程
---减少对渲染树的操作，并减少对一些style的请求
1.让操作元素离线处理
·把所有要添加的元素放到一个div里，最后把这个div append到body
·先display:none 隐藏元素，然后对元素操作，最后再显示元素
2.将引起回流的属性赋给变量进行缓存，用时直接使用变量
3.减少操作影响的节点，影响的节点越多越耗费性能
4.复杂动画效果，使用绝对定位使其脱离文档流
5.避免触发同步布局