聚焦提效、性能、体验三大核心，覆盖高频开发场景，新手也能快速上手！
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" 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';这些技巧覆盖前端开发中性能优化、交互体验、代码维护、调试效率四大高频场景，直接复制就能用，长期用能大幅减少重复工作，提升开发效率～