前端冷知识：那些像“茶垢”一样被遗忘的 API

那些像“茶垢”一样被遗忘的 API

前端开发就像泡茶，时间久了总会沉淀一些“茶垢”——那些曾经火热但逐渐被遗忘的 API。它们或许不再时髦，但在某些场景下依然能泡出令人惊喜的“茶香”。

document.designMode

// 开启整个文档的可编辑模式
document.designMode = 'on';
// 现在你可以像编辑Word文档一样修改页面内容

这个诞生于 IE 时代的 API 能让整个文档变成可编辑状态。虽然现代富文本编辑器都用 contenteditable 实现局部编辑，但在快速原型设计时，直接打开控制台输入这行代码，就能实时调整页面文案，比反复修改代码重新编译高效得多。

navigator.vibrate()

// 让手机振动200毫秒
navigator.vibrate(200);
// 复杂振动模式：振动300ms，暂停100ms，再振动500ms
navigator.vibrate([300, 100, 500]);

移动端特有的振动 API 常被用来做游戏反馈或重要通知。有趣的是，在 Chrome 桌面版调用它不会报错——只是静默失败，这种设计让代码可以跨平台运行而不必额外处理兼容性。

隐藏的 console 方法

console.table([
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
]);

// 输出带样式的日志
console.log('%c彩虹文字', 'background: linear-gradient(to right, red, orange); color: white; padding: 5px;');

除了常用的 log/warn/error，console 对象还藏着许多宝藏方法。console.table 用表格形式展示数组对象，console.dirxml 显示 DOM 节点树，甚至可以用 CSS 语法创建彩色日志。在调试复杂数据结构时，这些方法比单纯的 log 直观得多。

requestIdleCallback

function processData(data) {
  // 大数据处理逻辑
}

requestIdleCallback(deadline => {
  while (deadline.timeRemaining() > 0) {
    processData(nextChunk);
  }
});

这个 API 允许浏览器在空闲时期执行任务，避免阻塞关键渲染。与 setTimeout 不同，它会在帧渲染间隙自动调度，特别适合处理非紧急的后台任务。React 的 Fiber 架构就基于此实现任务分片。

被遗忘的 CSS 计数器

/* 自动编号章节标题 */
body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "第" counter(section) "章 ";
}

纯 CSS 实现的计数器系统可以自动生成目录编号、有序列表样式。更神奇的是它支持嵌套计数：

ol { counter-reset: item }
li { display: block }
li:before {
  counter-increment: item;
  content: counters(item, ".") " ";
}

details 元素的魔法

<details>
  <summary>点击查看答案</summary>
  <p>42 - 生命、宇宙及一切问题的答案</p>
</details>

这个原生 HTML 元素实现了手风琴效果，无需 JavaScript。通过 CSS 可以自定义箭头样式：

details summary::-webkit-details-marker {
  display: none;
}
details summary:after {
  content: "+";
}
details[open] summary:after {
  content: "-";
}

国际化的 Intl API

new Intl.RelativeTimeFormat('zh', { 
  numeric: 'auto' 
}).format(-1, 'day'); // 输出："昨天"

new Intl.ListFormat('zh').format(['苹果', '香蕉']); // 输出："苹果和香蕉"

处理日期、数字、列表格式时，Intl 系列 API 能自动适配本地化规则。相比自己写格式化函数，它支持 150+ 种语言环境，连复数规则都考虑周全：

// 俄语有特殊的复数规则
new Intl.PluralRules('ru').select(2); // 返回"few"

消失的 DOM 遍历 API

// 获取元素所有文本节点
function getTextNodes(el) {
  const walker = document.createTreeWalker(
    el, 
    NodeFilter.SHOW_TEXT, 
    null, 
    false
  );
  const nodes = [];
  while (walker.nextNode()) nodes.push(walker.currentNode);
  return nodes;
}

TreeWalker 和 NodeIterator 这两个古老的 DOM 遍历 API，在现代前端几乎被 querySelector 取代。但在需要精细控制节点遍历时（比如处理富文本编辑器内容），它们仍然无可替代。

地理围栏 API

const fence = new CircularGeofence({
  latitude: 39.9042,
  longitude: 116.4074,
  radius: 1000 // 1公里范围
});

fence.onenter = () => console.log('进入天安门广场区域');
fence.onexit = () => console.log('离开天安门广场区域');

虽然 Geolocation API 人尽皆知，但它的增强版 GeographicFencing 却鲜为人知。这个 API 可以在用户进入/离开特定地理区域时触发回调，非常适合位置敏感的应用程序（比如自动切换城市服务）。

被低估的 Web Animations API

const animation = element.animate([
  { transform: 'rotate(0deg)' },
  { transform: 'rotate(360deg)' }
], {
  duration: 1000,
  iterations: Infinity
});

// 精确控制动画
document.querySelector('button').onclick = () => {
  animation.pause();
  animation.currentTime = 500; // 跳转到中间帧
};

相比 CSS 动画，这个 API 提供了更精细的控制能力：动态修改关键帧、查询播放状态、无缝衔接动画序列。最惊艳的是它返回的 Animation 对象自带 Promise 支持：

await element.animate([...], 1000).finished;
console.log('动画完成！');

神奇的 Web Share API

// 调用系统原生分享对话框
navigator.share({
  title: '前端冷知识',
  url: 'https://example.com'
}).catch(e => {
  // 用户取消分享时触发
});

在移动设备上，这个 API 能唤起系统级分享面板，支持分享到任何已安装的应用。更棒的是它遵循“渐进增强”原则——在不支持的浏览器上调用不会报错，只需优雅降级：

if (navigator.share) {
  // 现代分享方式
} else {
  // 传统分享按钮
}

时间旅行者：console.timeTravel()

console.timeTravel(1000); // 回退1秒
console.log(new Date()); // 显示1秒前的时间

这个仅限 Firefox 开发者工具的私有 API 能修改页面感知的系统时间，测试时间相关逻辑时非常有用。虽然是非标准实现，但启发我们思考：调试时间敏感型应用时，控制“时间流速”可能比反复修改系统时钟更高效。

字体检测 API

document.fonts.ready.then(() => {
  console.log('所有字体加载完成');
});

// 检测特定字体是否可用
document.fonts.check('12px "思源黑体"');

FontFaceSet 接口提供了字体加载状态查询能力，对于需要精确控制文字渲染的场景（比如避免字体闪烁）特别有用。配合 CSS Font Loading API，可以实现更细致的字体加载策略：

const font = new FontFace('MyFont', 'url(myfont.woff2)');
await font.load();
document.fonts.add(font);

消失的 CSS 表达式

/* IE5时代的黑科技（已废弃） */
width: expression(document.body.clientWidth > 600 ? "600px" : "auto");

虽然已被现代浏览器禁用，但这种在 CSS 中直接写 JavaScript 的脑洞大开设计，某种程度上预示了后来的 CSS-in-JS 技术。它的废弃也提醒我们：强大的功能需要以性能为代价。

剪切板中的富文本

// 读取剪切板中的富文本
navigator.clipboard.read().then(data => {
  const html = data.find(item => item.type === 'text/html');
  console.log(html);
});

// 写入带样式的富文本
const item = new ClipboardItem({
  'text/html': new Blob(['<b>Hello</b>'], { type: 'text/html' })
});
navigator.clipboard.write([item]);

现代 Clipboard API 不仅能处理纯文本，还能操作富文本内容。这在需要保持粘贴内容格式的编辑器场景中非常实用，比如从 Word 文档复制带样式的文字到网页编辑器。

被忽视的 Performance API

// 测量函数执行时间
performance.mark('start');
expensiveOperation();
performance.mark('end');
performance.measure('耗时', 'start', 'end');

// 获取所有资源加载耗时
performance.getEntriesByType('resource').forEach(resource => {
  console.log(`${resource.name} 加载耗时: ${resource.duration}ms`);
});

这个 API 提供了纳秒级精度的时间测量能力，比手动用 Date.now() 计算更准确。特别是 performance.now() 不受系统时间调整影响，适合做动画帧率统计等精密计时场景。

浏览器“间谍”API

// 检测用户是否启用了减少动画偏好
const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

// 监听深色模式变化
window.matchMedia('(prefers-color-scheme: dark)')
  .addListener(e => {
    console.log(e.matches ? '深色模式' : '浅色模式');
  });

CSS 媒体查询的 JavaScript 版本不仅能读取设备特性，还能实时监听变化。从屏幕方向、内存大小到是否触控设备，这些信息帮助开发者打造更具适应性的界面。

元素尺寸观察者

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    console.log(`元素宽度变为: ${entry.contentRect.width}px`);
  });
});
observer.observe(document.getElementById('resizable'));

比起频繁轮询 offsetWidth，这个 API 能在元素尺寸变化时主动通知。结合 MutationObserver 和 IntersectionObserver，现代浏览器已经提供了完整的 DOM 变化监测体系。