用途:这是一条前端性能检查规则,用于审查脚本、客户端组件、打包产物或运行时行为中与防抖和节流相关的高频事件处理。高频事件每秒可触发数百次,容易造成 UI 卡顿、过多 API 调用以及较差的 Interaction to Next Paint(INP)评分。
主要能力:区分两种模式——防抖(debounce)延迟执行直到活动停止,适用于搜索输入、表单校验;节流(throttle)限制执行速率,适用于滚动、缩放处理。建议用户输入使用 150-300ms 延迟,滚动/缩放使用 100ms。同时提醒清理事件监听器以避免内存泄漏。
使用方式:提供检查、修复、解释和代码审查四类动作。检查时审查滚动、缩放、输入、鼠标移动等高频事件处理器是否应使用防抖或节流;修复时为这些处理器添加防抖或节流以限制执行速率;解释时说明两者区别及各自适用场景;代码审查时标记违反规则的具体导入、事件处理器、运行时副作用或阻塞操作,并说明如何在浏览器中验证改动。
适用场景:前端代码审查、性能优化、客户端组件与浏览器执行路径检查。
限制:完整实现细节、代码示例和框架相关指导见 references/rule.md;规则页面为 https://frontendchecklist.io/rules/javascript/debounce-throttle。资料未提供具体框架版本、兼容性或安装命令等信息。