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