通过Performance API可精确量化JavaScript加载时间，首先调用performance.getEntriesByType('resource')获取资源加载记录，筛选出mimeType为application/javascript或URL含.js的条目，提取startTime与responseEnd计算网络加载时间，结合User Timing API的mark-measure机制测量解析执行耗时，对异步加载脚本同样适用，需注意跨域资源需配置Timing-Allow-Origin头部以保证数据完整，最终将数据上报监控系统，分析首屏关键JS延迟、区域差异及对LCP等核心指标的影响。
量化JavaScript的加载时间主要依赖浏览器提供的性能API，尤其是 Performance API。通过这些原生接口，可以精确获取脚本从请求开始到执行完成的关键时间节点。
使用 Performance API 获取资源加载详情
调用 performance.getEntriesByType('resource') 可以获取所有静态资源的加载记录，包括JS文件。每条记录包含以下关键字段：
- name：资源URL
- startTime：请求开始时间（相对于页面加载起点）
- responseEnd：响应结束时间，表示资源下载完成
- duration：总耗时（responseEnd - startTime）
筛选出 mimeType 为 application/javascript 或包含 .js 的资源即可定位JS文件。
计算关键时间指标
针对每个JS文件，可提取以下量化数据：
立即学习“Java免费学习笔记（深入）”；
-
网络加载时间 = responseEnd - startTime
反映从发起请求到完整接收的时间，受网络和服务器影响 -
解析与执行时间 需结合 User Timing API 手动标记
例如在脚本开头调用 performance.mark('script-start')，末尾调用 performance.mark('script-end')，再通过 measure 计算间隔
监控异步加载脚本
对于动态 import() 或 createElement('script') 加载的JS，同样能通过 resource timing 捕获。注意部分跨域脚本若未设置 CORS，timing 信息会受限（显示为0或不完整），需确保服务端添加 Timing-Allow-Origin 头部。
上报与分析
将采集到的时间数据聚合后上报至监控系统，重点关注：
- 最大加载耗时的JS文件
- 首屏关键JS的延迟情况
- 不同地区/设备下的加载差异
结合 LCP、FP 等核心指标，判断JS加载是否阻塞渲染。
基本上就这些。利用好 Performance API，加上合理的埋点设计，就能准确量化JS加载表现。
