查看網頁各階段載入速度的 Bookmarklet

網頁載入有多少 request、查多少 Domain,總共花費多少時間... 等等,此 JavaScript 可以接撈出一個頁面整合查看。

查看網頁各階段載入速度的 Bookmarklet

此程式主要使用 JavaScript Timing API 來達成:

Source code:micmro/performance-bookmarklet: Performance-Bookmarklet helps to analyze the current page through the Resource Timing API, Navigation Timing API and User-Timing - requests by type, domain, load times, marks and more. Sort of a light live WebPageTest.

要做成自己的 Bookmarklet,只要將下述直接拉到"我的最愛"那條書籤列即可:

javascript:(function(){var el=document.createElement('script');el.type='text/javascript';el.src='https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js';el.onerror=function(){alert("Looks like the Content Security Policy directive is blocking the use of bookmarklets\n\nYou can copy and paste the content of:\n\n\"https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js\"\n\ninto your console instead\n\n(link is in console already)");console.log("https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js");};document.getElementsByTagName('body')[0].appendChild(el);})();

從外部網站測試的工具:WebPagetest - Website Performance and Optimization Test

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料