这是第六届青训营的第二篇实践笔记
如何减少重绘和重排？
什么是重绘？
当 DOM 元素的属性发生变化，例如背景色、文字颜色、边框颜色等不影响它周围或内部布局的属性时, 浏览器会通知 render 重新描绘相应的元素
什么是重排(回流)？
当我们对 DOM 的修改引发了 DOM 尺寸的变化时，浏览器需要重新计算元素的几何属性，其他元素的几何属性和位置也会因此受到影响，然后再将计算的结果绘制出来。这个计算的过程就是重排
回流一定会触发重绘，而重绘不一定会回流
如何减少？
1、减少直接操作dom元素，改用className用于控制
例如修改多个样式时，可以设置一个class类设置多个样式。
2、减少<table>标签使用，table属性变化使用会直接导致布局重排或者重绘
3、当dom元素position属性为fixed或者absolute, 可以通过css形变触发动画效果，此时是不会触发回流的
节流防抖技术
节流
节流：在一定时间间隔内，将连续触发的事件合并为一个执行。即无论触发了多少次事件，只会在固定时间间隔后执行一次事件处理函数。 节流适用于需要在连续触发事件时限制处理频率的情况，例如滚动事件、窗口调整大小等。
使用定时器实现节流
function throttle(func, delay) { let timerId = null; let lastTimestamp = 0; return function(...args) { const now = Date.now(); if (now - lastTimestamp >= delay) { // 超过延迟时间，执行事件处理函数 func.apply(this, args); lastTimestamp = now; } else { // 在延迟时间内，重新设置定时器 clearTimeout(timerId); timerId = setTimeout(() => { func.apply(this, args); lastTimestamp = now; }, delay); } }; }
防抖
在指定的时间间隔内，如果事件持续触发，则延迟执行事件处理函数。如果在延迟时间内再次触发了事件，则重新计时，直到延迟时间内没有再次触发事件，才执行事件处理函数。 防抖适用于需要等待一段时间后处理最后一次触发的事件，例如搜索框输入事件、窗口调整大小结束后的响应等。
