testspeed html

### 如何测量 HTML 页面加载速度

#### 使用 WebPagetest 工具
为了测试网页的加载速度，可以利用在线工具如 WebPagetest。该平台允许用户输入待测网址并提供详细的性能分析报告[^1]。

- **获取测试结果**
访问 [WebPagetest](https://www.webpagetest.org/) 官方网站，在首页输入想要检测的目标URL地址，点击“Start Test”。完成后会得到一系列关于页面响应时间、首字节到达时间和完全加载所需的时间等数据图表和分数评估。

- **解读关键指标**
关键关注点包括首次内容绘制 (First Contentful Paint, FCP)，即浏览器渲染任何来自DOM的内容所需要花费的时间；以及总下载完成时刻(Total Load Time)。

#### 利用开发者工具进行本地调试
现代浏览器内置了强大的开发人员工具来帮助诊断网络请求效率问题：

- 打开 Chrome 或 Firefox 的开发者控制台（通常通过右击页面选择“检查”或按下 `F12` 键），切换到 “Network” 面板。

- 加载目标网页之后，这里列出了所有的资源请求及其状态码、耗时详情。还可以查看具体的 DNS 查询、TCP 握手及时延分布情况。

// JavaScript 可以用来记录特定事件发生前后的时间戳差值
console.time('loadTime');
window.addEventListener('load', () => {
    console.timeEnd('loadTime'); // 输出 'loadTime' : xxms 表明整个页面加载完毕所花时间
});