直接在HTML模板中加性能监控会失效，因为HTML本身不执行JavaScript，performance API需在JS运行时调用，且必须在组件真实渲染完成后测量，正确位置是框架生命周期钩子（如Vue的onMounted、React的useEffect配合双requestAnimationFrame），纯HTML仅能声明data-perf属性供运行时SDK读取决策。
为什么直接在HTML模板里加性能监控会失效
HTML模板本身不执行JavaScript，performance.mark()、performance.measure() 这类API必须在JS运行时调用，硬塞进<script>标签里但没控制执行时机，很容易测到的是模板解析耗时，而非组件真实渲染开销。
常见错误是把监控逻辑写在模板的内联<script>中，结果发现所有指标都接近0ms——因为DOM还没挂载，组件根本没渲染。
- Vue/React/Angular等框架的组件生命周期钩子才是埋点正确位置
- 纯HTML模板（如Handlebars、EJS）需配合服务端渲染后注入客户端JS，且要等
DOMContentLoaded或requestIdleCallback触发 - 若用
document.write动态插入脚本，会阻塞解析，反而拉长首屏时间，得不偿失
Vue组件中用onMounted + performance.measure()做精准预警
Vue 3的onMounted确保DOM已就绪，结合performance.mark()打点可捕获真实渲染耗时。关键不是“测一次”，而是建立阈值判断逻辑。
示例：在组件挂载后100ms内检查首次渲染是否超限
立即学习“前端免费学习笔记（深入）”；
import { onMounted } from 'vue'
onMounted(() => {
performance.mark('component-mount-start')
// 触发一次强制重排，确保渲染完成
document.documentElement.offsetHeight
performance.mark('component-mount-end')
performance.measure('MyComponent-render', 'component-mount-start', 'component-mount-end')
<p>const measure = performance.getEntriesByName('MyComponent-render')[0]
if (measure.duration > 80) {
console.warn('[PERF] MyComponent render took', measure.duration.toFixed(2), 'ms')
}
})- 必须调用
document.documentElement.offsetHeight等强制layout操作，否则Chrome可能延迟渲染，导致测出虚假低值 -
performance.measure()名称需唯一，避免被其他同名measure覆盖 - 阈值设为80ms是保守值，实际应按设备CPU能力分层（可用
navigator.hardwareConcurrency辅助判断）
React中用useEffect + performance.now()避免measure()污染全局命名空间
performance.measure()会向全局PerformanceEntry列表写入记录，大量组件重复调用易造成内存泄漏和查询变慢。更轻量的做法是用performance.now()手动计算差值。
注意：不能只测useEffect回调执行时间——那只是JS执行耗时，不是渲染耗时。必须等浏览器完成绘制。
useEffect(() => {
const start = performance.now()
// 等待下一帧绘制完成
requestAnimationFrame(() => {
requestAnimationFrame(() => {
const duration = performance.now() - start
if (duration > 100) {
console.warn('[PERF] Slow render in MyComponent:', duration.toFixed(2), 'ms')
}
})
})
}, [])- 嵌套两次
requestAnimationFrame是为了确保拿到的是“渲染完成”时间点（第一次是样式计算，第二次是绘制结束） - 不要用
setTimeout(..., 0)替代——它不保证与渲染帧同步，测出的数据波动极大 - 生产环境建议用
reportError上报而非console.warn，避免被用户禁用console影响采集
HTML模板中真正能做的只有“标记入口”和“加载兜底策略”
纯HTML模板唯一可靠的作用，是声明组件性能等级（如data-perf-level="critical"），并预置降级逻辑，比如超时后自动切换为骨架屏或简化版DOM结构。
示例：给组件容器加属性，由统一SDK读取并决策
<div id="user-profile" data-perf-level="critical" data-perf-threshold="120"> <!-- 渲染内容 --> </div>
- 这个
data-perf-threshold会被客户端SDK读取，结合performance.getEntriesByType('paint')中的first-contentful-paint时间做关联分析 - 如果组件加载后2s内未完成渲染，且
data-perf-level="critical"，则立即显示<div class="skeleton"> - 禁止在HTML里写
onload或onerror直接调用性能函数——这些事件触发时，组件JS很可能还没加载完
真正卡点在于“谁来读取这些标记并执行预警”。靠模板自己做不到，必须有配套的运行时SDK监听DOM变化并注入测量逻辑。漏掉这层，所有HTML里的data-属性都只是摆设。
