网页加载速度测试

测试网页加载速度

  1. // ==UserScript==
  2. // @name 网页加载速度测试
  3. // @author ChatGPT
  4. // @version 3.1.3
  5. // @description 测试网页加载速度
  6. // @match *://*/*
  7. // @run-at document-start
  8. // @type bookmarklet
  9. // @grant none
  10. // @namespace https://greasyfork.org/users/452911
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.  
  15. const loadTimeElement = document.createElement('span');
  16. loadTimeElement.style.cssText = `
  17. position: fixed;
  18. top: 50%;
  19. left: 50%;
  20. transform: translate(-50%, -50%);
  21. background: white;
  22. padding: 10px;
  23. border-radius: 5px;
  24. box-shadow: 0 0 10px rgba(0,0,0,0.3);
  25. text-align: center;
  26. white-space: nowrap;
  27. width: 220px;
  28. z-index: 9999;
  29. background-color: white;
  30. color: black;
  31. `;
  32.  
  33. const startTime = performance.now();
  34.  
  35. window.addEventListener('load', () => {
  36. const endTime = performance.now();
  37. const timeElapsed = endTime - startTime;
  38. loadTimeElement.innerText = `页面加载耗时 ${timeElapsed.toFixed(2)} ms`;
  39. document.body.appendChild(loadTimeElement);
  40. setTimeout(() => {
  41. loadTimeElement.remove();
  42. }, 1200);
  43. });
  44. })();