JavaScript 中 BOM 怎么使用 requestAnimationFrame 优化动画-js教程-PHP中文网

requestanimationframe 是浏览器原生 api，挂载于 window，用于 bom 动画以实现与屏幕刷新率同步、节能、防丢帧；需节流调用、递归启用、避免重排，且 ssr 环境需判空。

javascript 中 bom 怎么使用 requestanimationframe 优化动画

在 JavaScript 中，BOM（Browser Object Model）本身不直接提供 requestAnimationFrame（简称 rAF），它是 浏览器原生 API，属于全局作用域（挂载在 window 上），但常被用于 BOM 场景下的动画控制——比如滚动、视口检测、元素位置计算等。用 rAF 替代 setTimeout 或 setInterval 做动画，核心在于**与屏幕刷新率同步、节省资源、避免丢帧**。

为什么 rAF 比定时器更适合 BOM 动画

rAF 由浏览器调度，通常每秒调用约 60 次（对应 60Hz 刷新率），且具备以下优势：

页面不可见时自动暂停，不消耗 CPU
自动适配不同设备的刷新率（如高刷屏可达 120fps）
执行时机在浏览器下一次重绘前，避免强制同步布局（layout thrashing）
比 setTimeout(..., 16) 更精准，不受 JS 主线程阻塞影响（只要不卡死）

典型 BOM 动画场景：平滑滚动 + 滚动监听

例如实现“回到顶部”按钮随滚动渐显，或视差滚动效果：

let ticking = false;
<p>function updateUI() {
const scrollTop = window.pageYOffset;
const header = document.querySelector('header');</p><p>// 示例：根据滚动距离调整透明度
header.style.opacity = Math.max(0.2, 1 - scrollTop / 500);</p><p>// 示例：显示/隐藏回到顶部按钮
const backTop = document.getElementById('back-top');
backTop.style.display = scrollTop > 300 ? 'block' : 'none';
}</p><p>function handleScroll() {
if (!ticking) {
requestAnimationFrame(() => {
updateUI();
ticking = false;
});
ticking = true;
}
}</p><p>window.addEventListener('scroll', handleScroll);
</p>

这里用 节流 + rAF 避免 scroll 事件高频触发导致性能问题：只保证每一帧最多执行一次 UI 更新。

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

结合 BOM 属性做动画驱动（如视口尺寸变化）

当需要响应 window.resize 或动态计算元素位置（如 getBoundingClientRect()）时，也推荐用 rAF：

resize 事件同样高频，应节流处理
获取元素尺寸/位置后立即修改样式，应放在 rAF 回调里，确保读写分离
避免在循环中反复读取 offsetTop、clientWidth 等触发重排

示例：响应式导航栏高度自适应

function adjustNavHeight() {
  requestAnimationFrame(() => {
    const nav = document.querySelector('nav');
    const hero = document.querySelector('.hero');
    // 安全读取，再统一写入
    nav.style.height = `${hero.offsetHeight}px`;
  });
}
<p>window.addEventListener('resize', adjustNavHeight);
// 初始加载也调用一次
adjustNavHeight();
</p>