JavaScript API

发表于 更新于 分类于 本文字数： 332 阅读时长 ≈ 1 分钟

InterSectionObserver

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 创建 IntersectionObserver 实例
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 目标元素进入视口时的操作
      console.log(`${entry.target.id} 进入视口`);
      // 例如在这里可以加载图片或触发其他动画效果
      entry.target.src = 'your_image.jpg';
      // 停止观察该元素（可选）
      observer.unobserve(entry.target);
    }
  });
});

// 选择要观察的目标元素
const targetElement = document.getElementById('your_element_id');
// 开始观察目标元素
observer.observe(targetElement);

MutationObserver

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 创建 MutationObserver 实例
const observer = new MutationObserver((mutationsList) => {
  mutationsList.forEach((mutation) => {
    if (mutation.type === 'childList') {
      // 子节点列表发生变化时的操作
      console.log('子节点列表发生变化');
      // 可以在这里对新增或删除的子节点进行进一步处理
    } else if (mutation.type === 'attributes') {
      // 属性发生变化时的操作
      console.log(`属性 ${mutation.attributeName} 发生变化`);
      // 根据属性变化进行相应的样式更新或逻辑处理
    }
  });
});

// 选择要观察的目标节点
const targetNode = document.getElementById('your_target_node_id');
// 配置观察选项
const config = { attributes: true, childList: true, subtree: true };
// 开始观察目标节点
observer.observe(targetNode, config);

PerformanceObserver

requestAnimationFrame

requestAnimationFrame的概念

通俗点讲就是该API能以浏览器的显示频率来作为其动画动作的频率，比如浏览器每10ms刷新一次，动画回调也每10ms调用一次，这样就不会存在过度绘制的问题，动画不会掉帧，自然流畅。

requestAnimationFrame的作用

requestAnimationFrame的优势

requestAnimationFrame的优势应用场景

requestIdleCallback