Sukka 写前端、网络和基础设施时，习惯先把边界和代价摊开。把「前端性能监测和回传 Google Analytics | Sukka's Blog」整理成可落地的中文笔记：问题在哪、默认做法会踩什么坑、该怎么选。原站导航和广告已去掉。

传统打点和高精准时间规范

<! DOCTYPE HTML > < html > < head > < meta charset = " UTF-8 " > < script > var start_time = + new Date ; </ script > < link rel = " stylesheet " href = " style.css " > < script src = " jquery.js " > </ script > < script > var end_time_1 = + new Date ; var headtime = end_time_1 – start_time ; </ script > </ head > < body > < script src = " app.js " > </ script > < script > var end_time_2 = + new Date ; var alltime = end_time_2 – start_time console . log (

打点法不仅可以用来监测资源加载时间耗时，还可以用来监测 JavaScript 的函数用时。 不过，虽然毫无疑问时间在物理层面上不可以倒流的，但是在用户的设备上是什么都会发生的，一个最简单的例子就是用户修改了时间，当然还可能用户设备的时钟存在偏差、时快时慢。所以如果你直接按照下面的例子这么做，你其实得到的数据可能不准，甚至不一定是正数：

Resource Timing 规范和 PerformanceTiming 接口

let mark_start = Date . now ( ) App . MyAwesomeFunc ( ) let duration = Date . now ( ) – mark_start console . log ( duration ) 不过好在 JavaScript 有一个高精准时间规范（High Resolution Time），我们可以用其中的 Performance 对象 来获取精准的时间，所以我们只需要把我们的代码修改成这样：

const mark_start = performance . now ( ) App . MyAwesomeFunc ( ) const duration = performance . now ( ) – mark_start console . log ( duration ) Performance 对象还提供了一个获取精确时间戳的可能，而且这个时间不会受到用户设备的时钟误差或者用户修改时间的影响：

计算网页整体加载性能

const timeStamp = performance . timeOrigin + performance . now ( ) console . log ( timeStamp ) 你可以试试在 Console 里跑一个 console.log(Date.now() – performance.timeOrigin – performance.now()) 看高精准时间和「有误差的时间」之间的差距。

使用 Performance 对象获取高精准时间使得获取精确的计时成为可能，但是依然有很多问题亟待解决，比如下面两个例子：

Google Analytics 统计页面加载性能

不过这个问题也已经得到解决，W3C 定义了 资源计时（Resource Timing） 规范，通过 PerformanceTiming 接口可以返回的对象非常详细，包括 DNS 请求、TCP 请求、重定向、传输、编码解码等行为开始和结束的时间。这使得统计每个文件、每个资源、每个请求的性能都成为可能。 当然对于大部分人来说，获取这么多数据其实没有必要——我们最多关心一下页面本身，除了 DNS、TCP 耗时以外还有从页面开始加载到 DOMContentLoaded 事件、load 事件、interactive 事件的用时。这些也是衡量一个网站加载性能的基本参数。我们要做的，也就是将 Performance 对象直接用于 window 。 在 console 里面打一个 window.performance 就可以看到所有相关信息：

上面就是 PerformanceNavigationTiming 对象的所有时序属性。如果放到请求的流程图中分别对应这几个时间节点。

值得单独记下的点

• CSS 中存在 @import 和 background 定义的资源是没法打点的
• 通过 AJAX 和 Beacon 发送的请求也不能简单打点获取到
• plt Page Loading Time 网页加载时间
• pdt Page Download Time 网页下载时间
• srt Server Response Time 服务器响应时间
• dit DOM Interactive Time DOM 可交互时间
• clt Content Loading Time 内容加载时间
• Resource Timing 规范和 PerformanceTiming 接口

落地时建议先做的 5 件事

1. 用自己的流量和设备测，不要只抄厂商推荐最小配置。
2. DNS、CDN、代理分流先画清 Fake IP 和 Real IP 的边界。
3. 前端性能看 CLS、白屏和重复渲染，而不是只看打包体积。
4. 基础设施变更走 Git，能复现、能回滚。
5. 结论写成可检查的清单：接口、超时、失败样本、回滚版本。

和智能体产品怎么接

龙虾PRO做 OpenClaw 落地时，网络、DNS 和前端性能笔记最有用的是「边界」：哪一层该加速、哪一层不该假装智能。数字员工调用外部能力前，先把超时和失败路径写死。

本文侧重全链路风控方法论。落地时请用自身业务单据做回放验证，不要把示例阈值直接当生产策略。 相关：风控体检 · 方案资源