CSS与JS技巧：选择器优先级与防抖节流实现

"前端开发中的CSS选择器优先级与JavaScript的防抖(debounce)和节流(throttle)技术" 在前端开发中，理解CSS选择器的优先级和JavaScript的防抖与节流技巧是非常重要的，它们直接影响到网页的性能和响应速度。 ### CSS选择器优先级 CSS选择器的优先级决定了哪些样式会覆盖其他样式。优先级计算规则如下： 1. **内联样式**（如`style="..."`）：权重为1000。 2. **ID选择器**（如`#example`）：权重为100。 3. **类、属性、伪类选择器**（如`.class`, `[attr]`, `:hover`）：权重为10。 4. **元素选择器**（如`div`, `p`）：权重为1。 5. **通用选择器**（如`*`）、子选择器（如`>`）、相邻兄弟选择器（如`+`）、普通兄弟选择器（如`~`）等：权重为0。 优先级是按上述顺序累加计算的，如果有多个选择器同时作用于一个元素，那么权重值最高的选择器将决定最终样式。 ### JavaScript中的防抖(debounce)与节流(throttle) #### 防抖(debounce) 防抖技术用于限制函数的执行频率，常用于处理用户输入事件，例如搜索框的查询请求。当用户快速连续输入时，防抖函数会确保只有在用户停止输入一段时间（即延迟时间）后，才会执行最后一次的函数调用。这样可以避免在用户频繁操作时发送过多请求，减轻服务器负担。 例如，以下是一个简单的防抖函数实现： ```js function debounce(fn, delay) { let timer = null; return function() { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this); }, delay); }; } ``` #### 节流(throttle) 节流技术则是控制函数在特定时间段内只能执行一次，适用于需要频繁触发但不想过于密集执行的场景，比如滚动事件或窗口大小改变事件的监听。节流函数确保在固定的时间间隔内，即便有连续的触发，也只会执行一次。 这里有两个常见的节流实现方法： 1. 时间戳法（方法一）： ```js function throttle(fn, delay) { var timer = null; return function() { if (timer) { return; } timer = setTimeout(() => { fn.apply(this); timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器 }, delay); } } ``` 2. 固定间隔执行法（方法二）： ```js function throttle(fn, delay) { var lastTime = 0; return function() { var now = Date.now(); if (now - lastTime < delay) { return; } lastTime = now; fn.apply(this); }; } ``` 在这个方法中，我们记录了上一次函数执行的时间，如果当前时间与上次执行时间的差值小于设定的延迟时间，则忽略此次执行，直到超过这个时间间隔。 通过正确使用防抖和节流，前端开发者可以优化用户体验，减少不必要的计算和网络请求，提升网页性能。