layui本身不提供屏幕刷新率检测能力，需用原生JS通过requestAnimationFrame连续采集60帧时间戳、剔除异常值后计算平均间隔来估算FPS，再据此优化layanim动画时长和CSS硬件加速。
layui 本身不提供屏幕刷新率检测能力
layui 是一个面向后台管理系统的 UI 框架，它没有封装 navigator.getScreenDetails、requestAnimationFrame 帧间隔测量或任何与设备物理刷新率相关的 API。你不能通过 layui.xxx 或 layui.use('xxx') 直接拿到当前屏幕是 60Hz 还是 144Hz。
用原生 JS 测帧间隔是最可靠的方式（兼容 layui 环境）
在 layui 项目里检测刷新率，本质是测两次 requestAnimationFrame 调用之间的时间差，再取中位数估算当前帧率。这方法不依赖浏览器版本，也不和 layui 冲突：
- 不要用
Date.now()简单相减——它精度低、易受 JS 主线程阻塞干扰 - 应连续采集至少 60 帧的
raf时间戳，剔除首尾 10% 的异常值后算平均间隔 - 若平均间隔 ≈ 16.67ms → 推断为 60Hz；≈ 8.33ms → 推断为 120Hz；≈ 6.94ms → 推断为 144Hz
- 注意：滚动、动画、Tab 切换都可能临时降频，建议在空闲且页面静止时测，或加
requestIdleCallback包裹
示例代码片段（可直接塞进 layui 的 ready 回调或模块内）：
function detectRefreshRate() {
const samples = [];
let lastTime = 0;
let count = 0;
<p>function rafLoop(time) {
if (lastTime && time > lastTime) {
samples.push(time - lastTime);
}
lastTime = time;
count++;
if (count < 60) {
requestAnimationFrame(rafLoop);
} else {
const sorted = samples.sort((a, b) => a - b);
const valid = sorted.slice(Math.floor(samples.length <em> 0.1), Math.ceil(samples.length </em> 0.9));
const avg = valid.reduce((a, b) => a + b, 0) / valid.length;
const fps = Math.round(1000 / avg);
console.log('Estimated FPS:', fps, '→ ~', Math.round(1000 / fps), 'ms/interval');
// 此处可存入全局变量，供 layui 动画逻辑分支使用
window.screenFps = fps;
}
}
requestAnimationFrame(rafLoop);
}
别信 DevTools 的 FPS 面板，尤其在高刷设备上
Chrome 的 Rendering 面板显示的 “60fps” 是模拟值，不是真实 GPU 输出节奏。你在 iPad Pro 或 Windows 笔记本上跑 layui 表格拖拽动画，即使面板显示稳定 60fps，实际设备可能正以 120Hz 渲染——但 DevTools 默认按 60Hz 节流采样，根本看不到掉帧点。
立即学习“前端免费学习笔记（深入）”；
- 真机测试前，先运行上面的
detectRefreshRate()，确认window.screenFps值是否符合预期 - 如果测出来是 120+ 但动画仍卡，大概率是 layui 的
layanim或自定义 CSS 动画用了transform+transition却没开硬件加速（缺will-change: transform或translateZ(0)） - 避免在
laydate、laypage的回调里做 DOM 查询（如offsetHeight），高刷下 ResizeObserver 或 scroll 触发更频繁，读布局会直接掉帧
优化 layui 动画时真正该做的判断点
拿到 window.screenFps 后，不建议“为 144Hz 单独写一套动画”，而应聚焦两个关键动作：
- 若
window.screenFps >= 120，把所有layanim的duration从默认 300ms 改为 200ms，并确保 CSS 中对应 class 启用will-change: transform - 若
window.screenFps ，禁用非必要动效：比如关闭 <code>laytable行 hover 缩放、停用laydate面板弹出的缓动曲线（设ease: false） - 所有基于
setTimeout实现的“伪帧动画”（比如旧版layim的消息闪烁）必须替换为requestAnimationFrame，否则在高刷屏上会严重错频
真正的瓶颈往往不在“测得准”，而在“改得对”——很多 layui 项目卡顿，是因为在 120Hz 屏上还用 60Hz 时代的 JS 轮询节奏驱动动画，帧还没提交，下一帧 VSync 已经来了。
