狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

1. Performance API 的用處

Performance API 是瀏覽器中內(nèi)置的一組工具，用于測(cè)量和記錄頁(yè)面加載和執(zhí)行過(guò)程中的各類性能指標(biāo)。它的主要用處包括：

• 監(jiān)控頁(yè)面資源加載：跟蹤頁(yè)面中的資源（如 CSS、JavaScript、圖片）的加載時(shí)間。

• 分析頁(yè)面加載時(shí)間：從導(dǎo)航到頁(yè)面完全渲染的所有時(shí)間點(diǎn)。

• 衡量用戶交互性能：測(cè)量用戶點(diǎn)擊、輸入等操作的響應(yīng)時(shí)間。

• 優(yōu)化性能瓶頸：通過(guò)標(biāo)記特定的代碼片段和事件，精準(zhǔn)定位性能瓶頸。

這些數(shù)據(jù)幫助開發(fā)者更好地理解頁(yè)面表現(xiàn)，進(jìn)而對(duì)性能進(jìn)行優(yōu)化和改進(jìn)。

2. Performance API 常用的 API

在使用 Performance API 時(shí)，以下幾個(gè) API 是開發(fā)者最常用的工具：getEntries()、mark()、以及 PerformanceObserver。這些 API 提供了從獲取性能數(shù)據(jù)到觀察性能事件的全面能力。

2.1 performance.getEntries()

performance.getEntries() 是 Performance API 提供的一個(gè)方法，它返回所有的性能條目（entries）。這些條目記錄了從頁(yè)面加載到當(dāng)前時(shí)刻，各類資源的加載和交互的性能數(shù)據(jù)。性能條目包括頁(yè)面加載資源（如 CSS、JS、圖片等）以及自定義的事件標(biāo)記。

// 獲取頁(yè)面中所有資源的性能條目
const entries = performance.getEntries();
console.log(entries);

通過(guò) getEntries()，你可以獲取資源加載時(shí)間、開始時(shí)間、結(jié)束時(shí)間等詳細(xì)信息。這對(duì)于了解頁(yè)面中每個(gè)資源的加載耗時(shí)十分有幫助。

2.2 entries 的類型

getEntries() 返回的每個(gè)性能條目對(duì)象都屬于以下幾種類型，開發(fā)者可以根據(jù)需要篩選和分析不同類型的數(shù)據(jù)：

• navigation：與頁(yè)面導(dǎo)航相關(guān)的條目，通常用于分析頁(yè)面加載的時(shí)間點(diǎn)。

• resource：所有通過(guò)網(wǎng)絡(luò)請(qǐng)求加載的資源條目，包括 JS、CSS、圖片等。

• mark：開發(fā)者自定義的標(biāo)記，用于記錄特定事件的開始或結(jié)束。

• measure：通過(guò) performance.measure() 生成的條目，用于測(cè)量?jī)蓚€(gè)標(biāo)記之間的時(shí)間間隔。

例如，使用 performance.getEntriesByType('resource') 可以只獲取資源加載的性能數(shù)據(jù)：

// 獲取所有資源加載的性能條目
const resourceEntries = performance.getEntriesByType('resource');
console.log(resourceEntries);

通過(guò)這種方式，開發(fā)者可以輕松獲取頁(yè)面資源的加載時(shí)間及其詳情。

2.3 performance.mark()

performance.mark() 是 Performance API 提供的一個(gè)方法，允許開發(fā)者在代碼中手動(dòng)創(chuàng)建標(biāo)記。這些標(biāo)記可以用于記錄特定事件的發(fā)生時(shí)間，從而在分析性能時(shí)，更加精確地掌握代碼中某個(gè)關(guān)鍵操作的時(shí)機(jī)。

// 創(chuàng)建自定義標(biāo)記
performance.mark('start-task');
// 執(zhí)行某個(gè)任務(wù)
doSomething();
// 創(chuàng)建結(jié)束標(biāo)記
performance.mark('end-task');
// 測(cè)量開始和結(jié)束之間的時(shí)間
performance.measure('Task Duration', 'start-task', 'end-task');

mark() 非常適合用于衡量應(yīng)用程序中某段代碼的執(zhí)行時(shí)間，與 measure() 一起使用可以提供更加詳細(xì)的性能分析。

2.4 PerformanceObserver

PerformanceObserver 是 Performance API 的一個(gè)高級(jí)特性，它可以監(jiān)聽性能事件的發(fā)生，并在事件觸發(fā)時(shí)執(zhí)行回調(diào)。這種觀察模式可以幫助開發(fā)者實(shí)時(shí)監(jiān)控頁(yè)面中的資源加載、導(dǎo)航和其他性能相關(guān)的事件。

// 創(chuàng)建 PerformanceObserver 實(shí)例，監(jiān)聽資源加載的事件
const observer = new PerformanceObserver((list) => {  const entries = list.getEntries();
  entries.forEach(entry => {
    console.log(`${entry.name}: ${entry.duration}ms`);
  });
});
// 監(jiān)聽資源類型的性能條目
observer.observe({ entryTypes: ['resource'] });

通過(guò) PerformanceObserver，你可以監(jiān)聽特定類型的性能條目，如 resource 或 mark，并實(shí)時(shí)分析其數(shù)據(jù)。對(duì)于監(jiān)控資源加載、關(guān)鍵操作或用戶交互時(shí)的性能表現(xiàn)非常有用。

總結(jié)

Performance API 是前端開發(fā)者進(jìn)行性能監(jiān)控的強(qiáng)大工具，它提供了對(duì)頁(yè)面加載、資源加載以及用戶交互的詳細(xì)分析能力。常用的 API，如 getEntries()、mark()、以及 PerformanceObserver，可以幫助開發(fā)者實(shí)時(shí)獲取和分析性能數(shù)據(jù)。

通過(guò)合理地使用 Performance API，你可以更好地了解頁(yè)面中各類操作的性能表現(xiàn)，從而有效地優(yōu)化 Web 應(yīng)用的加載速度和用戶體驗(yàn)。