Javascript 中的性能 Api 在 Vue js 中無法按預期工作

Question

所以我正在做一個小項目，在這個項目中我必須計算每個頁面加載所需的時間並實現我正在使用Performance API並且准確地說我正在使用getEntriesByName()在 Performance API 中，如圖所示以下。

performance.getEntriesByName(window.location.href)

按鍵盤上的F12打開控制台並運行上面的行並查看結果。

結果

connectEnd: 1.55999994603917
connectStart: 1.55999994603917
decodedBodySize: 132839
domComplete: 1405.1149999722838
domContentLoadedEventEnd: 887.4099999666214
domContentLoadedEventStart: 867.9899999988265
name: "https://stackoverflow.com/questions/ask"
nextHopProtocol: "h2"
redirectCount: 0
....

所以它會顯示一些關於頁面的數據。 如您所見， name的值是頁面 url。 因此，在不同頁面上運行上述行將為我們提供該特定頁面的指標。

問題

所以問題是，當我在vue js 項目的任何頁面上執行此操作時，它只提供主頁的信息。 假設我的主頁是/dashboard ，當我在儀表板上的控制台中運行該行代碼時，它為我提供了指標並且運行良好，但讓我們說我在/dashboard/users上運行該行。 它返回一個EMPTY數組。

筆記

任何人都可以猜測為什么會發生這種情況，或者任何人都可以告訴我一種不同的方式，我們可以通過任何其他方式獲得RESULT值。 （不使用 JS 的性能 api），比如我們如何在不使用性能 api 或任何解決此問題的方法的情況下獲得所有這些細節

檢查這個

用vue js制作的網站

轉到此網站並更改那里的路線並執行上述程序。這里也發生了同樣的事情。 為什么它發生在所有 vue js 網站中。

Answer 1

您嘗試通過 performance.getEntriesByName(window.location.href) 獲取的數據類型取決於頁面加載。 帶有 Vue Router 的 Vuejs 項目將只執行一個初始頁面加載。 路由更改時不會發生后續頁面加載。 任何單頁應用程序都會發生這種情況。

通過轉到您選擇的路線，重新加載頁面並再次執行 performance.getEntriesByName(window.location.href)，您可以在給定的示例中看到這一點。 您將獲得所需的數據集而不是空數組。

通常，您必須在 Vuejs 應用程序中手動創建一些性能“標記”，然后才能訪問從這些標記創建的條目。