功能

• requestAnimationFrame 是一种优化动画渲染的 API。
• 它告诉浏览器在下一次重绘之前执行指定的回调函数，通常用于实现流畅的动画。
• 和固定时间间隔的 setTimeout 或 setInterval 不同，requestAnimationFrame 会自动与浏览器的刷新率同步（如 60Hz，16.67ms 一帧）。

特点

高效：只在页面处于活动状态时执行回调（后台标签页会暂停，节省资源）。
精准：与显示器的刷新率匹配，避免丢帧。
流畅：浏览器会在合适的时间点调用回调，减少卡顿或跳帧现象。

常见场景

实现 DOM 动画
平滑滚动效果
监控动画帧性能

浏览器的 Web Components 中，Class 是用来定义自定义元素的主要方式，自定义元素支持以下生命周期回调方法：

生命周期回调：connectedCallback 和 disconnectedCallback

1. connectedCallback
   作用：当自定义元素被插入到文档 DOM 中时，浏览器会自动调用该回调。
   用途：
   初始化 DOM 或状态。
   绑定事件监听器。
   触发外部依赖的加载操作。
   典型场景：
   加载数据、动态渲染子组件。
   初始化第三方库（如动画、图表库等）。

class MyElement extends HTMLElement {
    connectedCallback() {
        console.log('元素已插入到 DOM');
        this.innerHTML = '<p>Hello, World!</p>';
    }
}
customElements.define('my-element', MyElement);

2. disconnectedCallback
   作用：当自定义元素从文档 DOM 中被移除时，浏览器会调用该回调。
   用途：
   清理 DOM 或状态。
   移除事件监听器，释放资源。
   停止定时器或取消网络请求。
   典型场景：
   停止动画或计时器。
   删除与外部环境相关的绑定操作。

class MyElement extends HTMLElement {
    disconnectedCallback() {
        console.log('元素已从 DOM 中移除');
    }
}
customElements.define('my-element', MyElement);

功能

• performance.now() 是一种高精度的时间测量方法，返回自页面加载以来的毫秒数（包括小数点后3位）。

• 它的精度远高于 Date.now()，适合用于测量代码性能或事件耗时。

  特点

• 起点是浏览器的性能时间起点，不会受系统时间调整的影响。

• 时间以 DOMHighResTimeStamp 类型返回，单位为毫秒。

常见场景

• 测量代码性能
• 计算动画帧之间的时间间隔
• 精准测量事件延迟

<script type="importmap">