☰

Page Load Time

Display the page load time using the Level 2 Navigation Timing API.

当前为 2024-04-30 提交的版本，查看 最新版本。

  1.   // ==UserScript==
  2.   // @name        Page Load Time
  3.   // @match       *://*/*
  4.   // @grant       none
  5.   // @version     1.0.0
  6.   // @author      NoUser
  7.   // @description Display the page load time using the Level 2 Navigation Timing API.
  8.   // @namespace
  9.   // @homepage
  10.   // @license     MIT
  11. // @namespace https://greasyfork.org/users/1016720
  12.   // ==/UserScript==
  13.  
  14. // https://w3c.github.io/navigation-timing/
  15. //
  16. // Note:
  17. // Initial loads show results which are longer than what the browser's console shows
  18. // Subsequent loads are consistent with what the browser's console shows
  19.  
  20. (function() {
  21.     'use strict';
  22.     window.addEventListener('load', function() {
  23.         setTimeout(() => {
  24.             const [navigationTiming] = performance.getEntriesByType('navigation');
  25.  
  26.             if (navigationTiming) {
  27.                 const loadTime = navigationTiming.loadEventEnd - navigationTiming.startTime;
  28.                 let loadTimeText;
  29.  
  30.                 // Check if load time is less than 1 second
  31.                 if (loadTime < 1000) {
  32.                     // Display in milliseconds
  33.                     loadTimeText = loadTime.toFixed(0) + 'ms';
  34.                 } else {
  35.                     // Display in seconds
  36.                     loadTimeText = (loadTime / 1000).toFixed(2) + 's';
  37.                 }
  38.  
  39.                 const loadTimeDiv = document.createElement('div');
  40.                 loadTimeDiv.textContent = 'Page Load Time: ' + loadTimeText;
  41.                 Object.assign(loadTimeDiv.style, {
  42.                     position: 'fixed',
  43.                     bottom: '0px',
  44.                     left: '50%',
  45.                     transform: 'translateX(-50%)',
  46.                     backgroundColor: 'rgba(0,0,0,0.5)',
  47.                     color: 'white',
  48.                     padding: '5px 10px',
  49.                     fontSize: '14px',
  50.                     zIndex: '10000',
  51.                     borderRadius: '4px',
  52.                     boxShadow: '0 2px 4px rgba(0,0,0,0.3)'
  53.                 });
  54.                 document.body.appendChild(loadTimeDiv);
  55.             } else {
  56.                 console.warn('Level 2 Navigation Timing API may not be supported in this browser.');
  57.             }
  58.         }, 10); // Without this delay it doesn't work properly, no clue why
  59.     });
  60. })();