可通过performance.mark()和performance.measure()在关键节点插入语义化时间标记并计算耗时区间，结合PerformanceObserver实时监听或getEntriesByType手动采集，上报至监控服务实现精细化性能观测。
可以通过 performance.mark() 和 performance.measure() 在关键业务节点插入自定义时间标记，再结合 performance.getEntriesByType('mark') 或后台上报，实现对业务逻辑执行过程的精细化性能观测。
在关键业务节点调用 performance.mark()
为每个有分析价值的执行阶段起一个语义化名称，例如“用户点击开始”“接口响应完成”“首屏渲染结束”等。这些标记会记录当前高精度时间戳（精确到微秒级），且不受系统时钟调整影响。
- 确保标记名唯一且可读，避免空格或特殊字符，推荐用小写+中划线风格，如
'checkout-start'、'api-fetch-success' - 可在同步代码中直接调用，也可在异步回调、Promise.then、事件监听器中使用
- 示例：
performance.mark('payment-init');
fetch('/api/pay').then(() => performance.mark('payment-api-done'));
用 performance.measure() 计算耗时区间
当需要统计两个标记之间的执行耗时（比如“从点击到接口返回”），用 measure(name, startMark, endMark) 创建测量条目。该操作不触发上报，仅生成一条 measure 类型的 PerformanceEntry。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- startMark 和 endMark 必须已存在，否则 measure 失败（但不报错）
- 可省略 startMark，默认使用同名 mark；也可省略 endMark，默认使用当前时间
- 示例：
performance.mark('ui-render-start');
renderPage();
performance.mark('ui-render-end');
performance.measure('ui-render-duration', 'ui-render-start', 'ui-render-end');
采集并上报自定义打点数据
浏览器不会自动上传 UserTiming 数据，需主动提取并发送至监控服务。建议在页面卸载前（beforeunload）或定时（如每5秒）采集一次，避免遗漏。
立即学习“前端免费学习笔记（深入）”；
- 获取所有标记：
performance.getEntriesByType('mark') - 获取所有测量：
performance.getEntriesByType('measure') - 为减少体积，可只上报业务相关标记（过滤 name 前缀，如
entry.name.startsWith('biz-')） - 上报时带上页面 URL、用户 ID（脱敏）、设备信息等上下文，便于归因分析
配合 PerformanceObserver 实现增量监听（推荐）
相比轮询 getEntriesByType，用 PerformanceObserver 可实时捕获新产生的 mark/measure，更高效、无遗漏。
- 初始化一次即可监听后续所有打点：
const obs = new PerformanceObserver(list => {
list.getEntries().forEach(entry => {
if (entry.entryType === 'mark' || entry.entryType === 'measure') {
sendToMonitor(entry); // 自定义上报函数
}
});
});
obs.observe({entryTypes: ['mark', 'measure']}); - 注意：observer 不会回溯历史标记，只监听 observe 后新增的条目，因此建议尽早初始化（如 script 加载后立即执行）
