requestIdleCallback
requestIdleCallback 是 浏览器提供的 API ，用于在 浏览器空闲时执行低优先级任务，不会阻塞主线程，也不会影响动画和用户交互。
使用场景
- 非紧急任务（如日志上报、数据同步、预加载）
- 避免影响 UI 渲染（不会卡顿）
- Web3 DApp（如区块链数据同步、NFT 预加载）
js
// 传统方式(可能阻塞交互，导致界面发生卡顿)
setTimeout(processAnalyticsData, 1000);
// 优化方式
function doWork(deadline) {
while (deadline.timeRemaining() > 0) {
processDataChunk(); //分块处理数据
requestIdleCallback(doWork);
}
}IntersectionObserver
IntersectionObserver 是浏览器提供的一个 API，用于异步观察一个元素（target element）与其祖先元素或顶级文档视口（viewport）之间的交集变化。简单来说，它可以监听某个元素是否进入或离开视口，以及可见部分的比例。
主要用途
- 懒加载（Lazy Loading） ：当图片或组件进入视口时才加载，提高性能。
- 无限滚动（Infinite Scroll） ：监测滚动到底部，自动加载新内容。
- 动画触发：当元素进入视口时，触发 CSS 动画或 JavaScript 事件。
- 广告曝光统计：检测广告是否被用户看到，以进行数据分析。
js
// 传统懒加载
window.addEventListener("scroll", () => {
imgs.forEach((img) => {
if (rect.top < window.innerHeight) {
img.src = img.dataset.src;
}
});
});
// 优化实现（无布局抖动）
document.addEventListener("DOMContentLoaded", function() {
const images = document.querySelectorAll('img.lazy-load');
const lazyLoad = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy-load');
observer.unobserve(img);
}
});
};
const observer = new IntersectionObserver(lazyLoad, {
root: null,
rootMargin: '0px',
threshold: 0.1
});
images.forEach(img => {
observer.observe(img);
});
});WeakMap
WeakMap 是 JavaScript 提供的一种 弱引用（Weak References） 的 Map 结构，主要用于 存储对象的临时数据，而不会阻止垃圾回收 。它的键（key）必须是对象 ，而 值（value）可以是任意类型。
代码示例
js
// 传统方式(内存泄漏风险):
const domDataMap = new Map();
domDataMap.set(element, { count: 0 });
// 优化方案:
const weakMap = new WeakMap();
weakMap.set(element, { count: 0 }); // 当element被移除D0M时，关联数据自动GCResizeObserver
ResizeObserver 是 原生 JavaScript API ，用于监听 DOM 元素尺寸的变化 ，并在尺寸变化时执行回调函数。它可以检测元素的 width 和 height 变化，而 不需要监听 window.resize 事件。
常见用途
- 响应式布局：当元素大小变化时，调整 UI。
- 动态文本溢出检测：监听文本容器大小变化，动态调整样式。
- Canvas / SVG 适配：根据容器大小调整绘制区域。
- Web3 / DApp 开发：适用于自适应的 NFT 画廊、区块链数据可视化等。
js
// 传统响应式布局
window.addEventListener(
"resize",
debounce(() => {
const width = container.offsetWidth;
adjustElements(width);
}, 200),
);
// 优化方案
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
console.log('Element:', entry.target);
console.log('Content Rect:', entry.contentRect);
console.log('Width:', entry.contentRect.width);
console.log('Height:', entry.contentRect.height);
}
});
const element = document.querySelector('#myElement');
resizeObserver.observe(element);Web Workers
Web Workers 是 浏览器提供的多线程技术 ，用于 在后台运行 JavaScript 代码 ，避免主线程阻塞，提高应用的 性能和响应速度。
js
// 主线程阻塞案例:
function processData(data) {
// 30秒计算...
updateUI(); //界面卡死
}
// 并行优化方案:
const worker = new Worker("processor.js')
worker.postMessage(data)//处理完数据后会有消息通知
worker.onmessage =e => updateUI(e.data)requestAnimationFrame
requestAnimationFrame（简称 rAF）是浏览器提供的 高性能动画 API ，用于在 下一帧渲染时执行回调函数 ，使动画更加 流畅 ，并且 降低 CPU/GPU 资源消耗。
js
// 传统动画卡顿
function animate() {
element.style.left = (pos += 2) + "px";
setTimeout(animate, 16); //时间不精确
}
// 流畅动画方案
function animate() {
console.log("下一帧执行动画");
requestAnimationFrame(animate); // 递归调用，创建动画循环
}
requestAnimationFrame(animate);URL.createObjectURL
URL.createObjectURL() 是 浏览器提供的 API ，用于创建 Blob 或 File 对象的临时 URL ，可以用来 本地预览文件（如图片、视频）、下载文件，而不需要上传到服务器。
js
// 传统 base64方式读取内容:
const reader = new FileReader()
reader.onload =e => img.src = e.target.result // 内存膨胀
reader.readAsDataURL(100MBFile)//耗时5s+
// 高性能方案:
const url = URL.createObjectURL(100MBFile)
img.src = url // 瞬时完成
//使用后记得 revoke0bjectURL 释放内存content-visibility
隐藏不在视口中的元素，减少不必要的渲染，提高滚动性能。
css
.lazy-load {
content-visibility: auto;
}适用场景：
- 长列表渲染（如消息流、新闻）
- 只渲染视口内的元素
Fetch API + Streams
支持流式传输，减少等待时间，适用于大文件加载。
js
fetch('/large-file').then(response => {
const reader = response.body.getReader();
reader.read().then(({ done, value }) => {
console.log("流式加载部分数据:", value);
});
});适用场景：
- 大文件传输（如视频、JSON）
- SSR（服务器端流式渲染）