防抖 节流 重绘 回流 盒模型

防抖 debounce

---

• 事件被触发 n 秒后执行的回调 如果在这 n 秒内又触发 则重新计时
• 函数防抖就是法师发技能的时候要读条，技能读条没完再按技能就会重新读条

function debounce(fun, delay) {
	let timer;
	return function() {
		clearTimeour(timer)
		timer = setTimeout(() => {
			// 调用的时候传 this 否则 this 指向 window
			fun.apply(this, arguments)
		}, delay)
	}
}

节流 throttle

---

• 一事件在单位时间内 多次触发 仅一次有效
• 函数节流就是fps游戏的射速，就算一直按着鼠标射击，也只会在规定射速内射出子弹

function throttle(fn, delay) {
	let canRun = true;
	return function(){
		if(!canRun) return;
		canRun = false;
		setTimeout(()=> {
			fn.apply(this, arguments)
			canRun = true;
		}, delay)
	}
}

重绘 repaint

---

• 元素的大小 结构 发生变化 重新渲染部分或全部文档

回流 reflow

---

• 改变样式 不影响文档流中位置

盒模型

---

• 标准盒模型
  • width height 只包含 content
• IE盒模型
  • width height 包含 content padding border

在ie8+浏览器中使用哪个盒模型可以由box-sizing(CSS新增的属性)控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6,7,8中DOCTYPE缺失会触发IE模式。在当前W3C标准中盒模型是可以通过box-sizing自由的进行切换的

补充

---

防抖 节流应用场景

• debounce
  • search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
  • window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
• throttle
  • 鼠标不断点击触发，mousedown(单位时间内只触发一次)
  • 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断