随着网页设计变得越来越复杂，了解如何在JavaScript中计算页面加载时间变得越来越重要。本文将介绍如何使用JavaScript测量页面加载时间，并提供有关优化加载时间的建议。
计算页面加载时间的方法
测量页面加载时间的最简单方法是使用window.performance.timing对象。该对象包含许多与页面加载相关的属性，例如navigationStart、loadEventEnd等等。以下是一些常用的属性及其含义：
- navigationStart：浏览器开始导航到当前页面的时间戳。
- fetchStart：浏览器开始检索页面文档的时间戳。
- responseEnd：浏览器收到页面文档的最后一个字节的时间戳。
- domContentLoadedEventEnd：DOMContentLoaded事件完成的时间戳。
- loadEventEnd：load事件完成的时间戳。
您可以通过几种方式使用这些属性来计算页面加载时间。以下是其中两种方法：
方法1：使用loadEventEnd和navigationStart属性
window.addEventListener('load', function() {
var loadTime = window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
console.log('页面加载时间：' + loadTime + '毫秒');
});上述代码将侦听load事件，并在页面加载完成时计算总时间。它使用loadEventEnd和navigationStart属性来确定加载时间。
方法2：使用domContentLoadedEventEnd和navigationStart属性
document.addEventListener('DOMContentLoaded', function() {
var loadTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart;
console.log('DOM加载时间：' + loadTime + '毫秒');
});上述代码将侦听DOMContentLoaded事件，并在DOM树加载完成时计算时间。它使用domContentLoadedEventEnd和navigationStart属性来确定加载时间。
优化页面加载时间的建议
减少网页加载时间可以提高用户体验和SEO排名。以下是一些有助于优化页面加载时间的建议：
- 压缩和合并CSS和JavaScript文件。
- 最小化HTML、CSS和JavaScript文件。
- 缓存静态资源，例如图片、字体和图标。
- 避免使用大型图像。
- 优化图像大小和格式，例如使用WebP格式代替JPEG格式。
- 使用CDN分发内容以减少请求延迟。
示例代码
下面是一个完整的示例代码，它计算页面加载时间并输出结果到控制台。
-- -------------------- ---- -------
--------- -----
------
------
-----------------------
----- ----------------
--------
------------------------------- ---------- -
--- -------- - -------------------------------------- - ------------------------------------------
--------------------- - -------- - ------
---
---------
-------
------
-----------------
----------------
-------
-------请注意，我们将JavaScript代码放在<head>标记中，以便在页面加载完成时立即执行。如果您将其放在<body>标记之后，则必须等到所有内容都加载完成才能执行代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24336