1. 一键防抖 / 节流，告别重复触发
高频操作（按钮点击、输入框检索、滚动监听）必用，避免多次执行函数：
javascript
运行
// 防抖：停止操作后n秒执行（适合输入检索） const debounce = (fn, delay) => { let timer = null; return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); }; }; // 节流：n秒内仅执行1次（适合滚动/resize） const throttle = (fn, delay) => { let flag = true; return (...args) => { if (!flag) return; flag = false; setTimeout(() => { fn.apply(this, args); flag = true; }, delay); }; }; // 用法：输入框检索防抖 input.addEventListener('input', debounce(() => { console.log('检索数据'); }, 500));2. 图片懒加载，秒提首屏速度
无需插件，原生loading="lazy"+ 降级方案，减少首屏请求：
html
预览
<!-- 原生懒加载（兼容现代浏览器） --> <img src="占位图.png" data-src="真实图片.jpg" loading="lazy" alt="示例"> <!-- 兼容低版本浏览器（JS兜底） --> <script> const lazyImgs = document.querySelectorAll('img[data-src]'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); // 加载后停止监听 } }); }); lazyImgs.forEach(img => observer.observe(img)); </script>3. 巧用 CSS 变量，统一样式维护
告别重复改样式，一键修改主题 / 尺寸，适配多端更高效：
css
/* 定义全局变量 */ :root { --primary-color: #409eff; /* 主色 */ --font-size: 14px; /* 基础字号 */ --border-radius: 4px; /* 圆角 */ } /* 使用变量 */ .button { background: var(--primary-color); font-size: var(--font-size); border-radius: var(--border-radius); } /* 动态修改（JS） */ document.documentElement.style.setProperty('--primary-color', '#67c23a');4. 表单快速校验，少写冗余代码
用原生Constraint Validation API，无需第三方库也能做基础校验：
html
预览
<form id="myForm"> <input type="email" required placeholder="邮箱" id="email"> <input type="password" minlength="6" required placeholder="密码" id="pwd"> <button type="submit">提交</button> </form> <script> myForm.addEventListener('submit', (e) => { e.preventDefault(); // 校验整个表单 if (!myForm.checkValidity()) { // 显示原生提示 myForm.reportValidity(); return; } console.log('校验通过，提交数据'); }); </script>5. 控制台高效调试，告别 console.log 堆
精准定位问题，减少无用日志，调试完一键清空：
javascript
运行
// 1. 分组打印（清晰区分模块） console.group('用户信息'); console.log('姓名：张三'); console.log('年龄：25'); console.groupEnd(); // 2. 样式打印（重点信息高亮） console.log('%c 接口报错：', 'color: red; font-size: 16px;', '请求超时'); // 3. 一键清空所有console（调试完执行） console.clear(); // 4. 打印DOM元素属性 console.dir(document.querySelector('.button'));6. 本地存储封装，避免数据丢失
统一处理localStorage/sessionStorage，兼容 JSON 数据，防止存取值出错：
javascript
运行
const storage = { // 存数据（自动转JSON） set(key, value) { localStorage.setItem(key, JSON.stringify(value)); }, // 取数据（自动解析JSON） get(key) { const val = localStorage.getItem(key); return val ? JSON.parse(val) : null; }, // 删除数据 remove(key) { localStorage.removeItem(key); }, // 清空所有 clear() { localStorage.clear(); } }; // 用法 storage.set('user', { name: '张三', id: 1 }); console.log(storage.get('user')); // { name: '张三', id: 1 }7. 快速适配暗黑模式，一行切换
利用 CSS 变量 + 媒体查询，无需两套样式，适配系统 / 手动切换：
css
/* 浅色模式 */ :root { --bg-color: #fff; --text-color: #333; } /* 暗黑模式（系统自动切换） */ @media (prefers-color-scheme: dark) { :root { --bg-color: #1e1e1e; --text-color: #fff; } } body { background: var(--bg-color); color: var(--text-color); }javascript
运行
// 手动切换暗黑模式 const switchDark = () => { document.documentElement.classList.toggle('dark'); // 结合CSS：.dark { --bg-color: #1e1e1e; --text-color: #fff; } };8. 减少重排重绘，优化页面性能
避免频繁操作 DOM，批量处理 + 离线渲染，提升页面流畅度：
javascript
运行
// 反例：频繁操作DOM，触发多次重排 const list = document.getElementById('list'); for (let i = 0; i < 100; i++) { list.innerHTML += `<li>项${i}</li>`; } // 正例：批量处理，仅触发1次重排 const fragment = document.createDocumentFragment(); for (let i = 0; i < 100; i++) { const li = document.createElement('li'); li.textContent = `项${i}`; fragment.appendChild(li); } list.appendChild(fragment); // 额外技巧：修改样式前先隐藏元素，改完再显示 element.style.display = 'none'; // 批量修改样式... element.style.display = 'block';
