performanceentry 是浏览器性能监控核心接口，用于捕获 script、img、css 等资源加载耗时；需用 getentries() 获取原始记录，按 entrytype 和 initiatortype 过滤（如 resource + script），再统计数量、平均值、p90 等指标，并推荐用 performanceobserver 实时监听避免遗漏。
PerformanceEntry 是浏览器性能监控的核心接口，可用于捕获页面中各类资源（如 script、img、css、fetch、xmlhttprequest 等）的加载耗时。关键在于：先用 performance.getEntries() 获取原始记录，再按 entryType 和 name 过滤，最后统计关键指标（如数量、平均值、最大值、P90 等）。
按 entryType 过滤特定资源类型
每类资源对应一个 entryType，常见值包括：
-
script：内联或外链 JS 脚本（注意：仅对
<script></script>标签有效，import()或动态eval不会生成此类型） -
resource：所有通过网络加载的资源（含 JS、CSS、图片、字体、fetch/XHR 响应等），需结合
initiatorType进一步区分 - navigation：页面导航事件（如首次加载、reload、back_forward）
- paint：FP（First Paint）、FCP（First Contentful Paint）
- longtask：持续 50ms+ 的主线程任务（需开启 long task 监控）
示例：只取所有脚本资源（含内联和外链）
const scripts = performance.getEntries().filter(entry => entry.entryType === 'resource' && entry.initiatorType === 'script' );
⚠️ 注意：entryType === 'script' 在多数现代浏览器中已废弃或不触发，推荐统一用 resource + initiatorType 组合判断。
提取关键耗时字段并做基础统计
每个 PerformanceEntry 对象提供多个时间字段，常用如下：
- duration：从发起请求到接收完响应的总耗时（单位 ms）
- startTime：资源开始加载的时间戳（相对于 navigationStart）
- responseEnd：响应接收完成时间（可用于计算加载阶段耗时）
- transferSize：实际传输字节数（含响应头，不含重定向）
统计示例：计算所有 JS 资源的平均加载时间、最大耗时、P90
function getStats(entries) {
if (entries.length === 0) return {};
const durations = entries.map(e => e.duration).sort((a, b) => a - b);
const len = durations.length;
return {
count: len,
avg: Number((durations.reduce((a, b) => a + b, 0) / len).toFixed(2)),
max: Math.max(...durations),
p90: durations[Math.floor(len * 0.9)]
};
}
<p>const jsEntries = performance.getEntries()
.filter(e => e.entryType === 'resource' && e.initiatorType === 'script');</p><p>console.log(getStats(jsEntries)); // { count: 5, avg: 124.32, max: 487.1, p90: 312.5 }</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8483" title="dmap-jsapi-skill"><img
src="https://img.php.cn/upload/skill/000/000/081/179206214475645.jpg" alt="dmap-jsapi-skill" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8483" title="dmap-jsapi-skill" class="overflowclass">dmap-jsapi-skill</a>
<p class="overflowclass">DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8483" title="dmap-jsapi-skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
区分不同来源的资源（CDN / 本地 / 第三方）
通过 name 字段解析 URL，可识别资源归属：
- 检查
entry.name.includes('cdn.example.com')判断是否为 CDN 资源 - 用
new URL(entry.name).origin === location.origin判定是否同源 - 匹配常见第三方域名（如
googleapis.com、cloudflare.com）归类为第三方
示例：分组统计同源 vs 第三方 JS 加载耗时
const entries = performance.getEntriesByType('resource');
const sameOriginJS = entries.filter(e =>
e.initiatorType === 'script' &&
new URL(e.name).origin === location.origin
);
const thirdPartyJS = entries.filter(e =>
e.initiatorType === 'script' &&
!['localhost', location.origin].includes(new URL(e.name).origin)
);
<p>console.log('Same-origin JS:', getStats(sameOriginJS));
console.log('Third-party JS:', getStats(thirdPartyJS));</p>
配合 PerformanceObserver 实时监听新资源
如果需要在资源加载完成后立即处理（而非只查历史记录），应使用 PerformanceObserver：
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach(entry => {
if (entry.entryType === 'resource' && entry.initiatorType === 'script') {
console.log(`Script loaded: ${entry.name}, duration: ${entry.duration}ms`);
// 可上报、聚合、告警等
}
});
});
<p>observer.observe({ entryTypes: ['resource'] }); // 自动监听后续新增的 resource</p>
✅ 优势：避免漏掉页面动态插入的资源（如懒加载脚本、动态 import）；支持长期运行的 SPA 场景。
不复杂但容易忽略：务必在页面早期（如
中）初始化 observer，否则可能错过首屏关键资源；同时建议搭配performance.setResourceTimingBufferSize() 防止缓冲区溢出丢数据。
