16 个前端冷知识

小城故事

发布于 2026-05-08 09:07:51

630

文章被收录于专栏：XC's Blog 日常笔记XC's Blog 日常笔记

abbrlink: ‘0’

“这个Bug我调了俩小时！” “早知道有这个属性就好了……”

这种对话，在程序员之间可以说是太常见了。

很多问题，一旦知道诀窍，三五分钟就能解决；可如果不知道，很可能就需要耗上大半天的时间去处理。

于是我就决定，把这些平时可能没人专门讲，但又特别实用的前端冷知识整理了一下，保准你看完有收获。

1. CSS中的:hover伪类也可以用于非链接元素

很多人以为:hover只能用在a标签上，其实不然！任何元素都可以使用:hover伪类。

/* 不只是链接，div也可以有悬停效果 */
div:hover {
  background-color: #f0f0f0;
  transition: all 0.3s ease;
}

实用场景：为表格行、卡片组件等添加悬停效果，提升用户体验。

2. 箭头函数没有自己的this绑定

这是ES6箭头函数的一个重要特性，但经常被忽略：

const obj = {
  name: "前端小白",
  regularFunc: function() {
    console.log(this.name); // "前端小白"
  },
  arrowFunc: () => {
    console.log(this.name); // undefined（这里的this是外层作用域的this）
  }
};

原理分析：箭头函数不绑定自己的this，而是继承父级作用域的this值。

3. 快速浮点数转整数

// 这三种方式都可以将浮点数转为整数
console.log(~~3.14);        // 3
console.log(3.14 | 0);      // 3
console.log(3.14 >> 0);     // 3

注意：这些方法只适用于32位整数，大数情况下可能会出现问题。

4. 使用dataset操作自定义数据属性

<div id="user" data-id="123" data-user-name="小明"></div>

<script>
const user = document.getElementById('user');
console.log(user.dataset.id);        // "123"
console.log(user.dataset.userName); // "小明"（注意驼峰命名）
</script>

优势：比getAttribute/setAttribute更简洁，且自动进行数据类型转换。

5. 使用navigator.onLine检测网络状态

// 检测用户是否在线
if (navigator.onLine) {
  // 在线逻辑
} else {
  // 离线逻辑
}

// 监听网络状态变化
window.addEventListener('online', () => {
  console.log('网络已连接');
});

应用场景：PWA应用、资源加载优化等。

6. 使用contenteditable使元素可编辑

<div contenteditable="true">
  点击我就可以直接编辑内容！
</div>

实用技巧：可以结合localStorage实现简单的实时预览编辑器。

7. 使用currentScript获取当前执行的script标签

<script>
console.log('当前脚本:', document.currentScript.src);
</script>

应用场景：在脚本中动态加载依赖资源时非常有用。

8. 使用passive优化滚动性能

// 不好的做法（可能阻塞滚动）
document.addEventListener('touchmove', function(e) {
  // 处理逻辑
});

// 好的做法
document.addEventListener('touchmove', function(e) {
  // 处理逻辑
}, { passive: true });

原理：告诉浏览器事件处理函数不会调用preventDefault()，从而提升滚动性能。

9. 使用clamp实现响应式字体大小

.text {
  font-size: clamp(16px, 4vw, 24px);
}
/* 字体大小会在16px-24px之间自适应 */

优势：比媒体查询更简洁，实现真正的流体排版。

10. 使用in操作符检查对象属性

const obj = { name: '小明', age: 20 };

// 检查属性是否存在
if ('name' in obj) {
  console.log('name属性存在');
}

与hasOwnProperty的区别：in会检查原型链上的属性，而hasOwnProperty只检查自身属性。

11. 使用Array.from将类数组转为真实数组

// 将NodeList转为数组
const divs = Array.from(document.querySelectorAll('div'));

// 将arguments转为数组
function example() {
  const args = Array.from(arguments);
  // 现在可以使用数组方法了
}

12. 使用performance API进行性能监控

// 标记开始时间
performance.mark('start');

// 执行一些操作
for(let i = 0; i < 1000000; i++) {}

// 标记结束时间并测量
performance.mark('end');
performance.measure('操作耗时', 'start', 'end');

const measure = performance.getEntriesByName('操作耗时')[0];
console.log(`操作耗时: ${measure.duration}毫秒`);

13. 使用structuredClone进行深拷贝

const obj = { name: "小明", hobbies: ["篮球", "游泳"] };
const cloned = structuredClone(obj); // 真正的深拷贝

优势：比JSON.parse(JSON.stringify(obj))更可靠，可以处理循环引用。

14. 使用CSS的:where和:is简化选择器

/* 传统写法 */
header h1, header h2, header h3 {
  margin-bottom: 1rem;
}

/* 简化写法 */
header :is(h1, h2, h3) {
  margin-bottom: 1rem;
}

优势：代码更简洁，易于维护。

15. 使用requestIdleCallback进行任务调度

function processTask(deadline) {
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    // 在空闲时间执行任务
    processTask(tasks.shift());
  }
  
  if (tasks.length > 0) {
    requestIdleCallback(processTask);
  }
}

requestIdleCallback(processTask);

应用场景：大数据渲染、复杂计算等需要优化性能的场景。

16. 你可能不知道的console.log黑科技

最后一个，你可能不知道console.log还有这些用法：

// 1. 使用CSS样式
console.log('%c这是红色大字', 'color: red; font-size: 20px;');

// 2. 分组打印
console.group('用户信息');
console.log('姓名: 小明');
console.log('年龄: 20');
console.groupEnd();

// 3. 条件打印
console.assert(1 === 2, '这个条件为false时会打印');

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-05-03，如有侵权请联系 cloudcommunity@tencent.com 删除

前端