上一篇
html检测网络
使用JavaScript的navigator.onLine属性及online/off
常用HTML网络检测工具
以下是主流浏览器自带的开发者工具中网络检测功能的入口及核心功能：
| 浏览器 | 打开方式 | 核心功能 |
|---|---|---|
| Google Chrome | F12 或 Ctrl+Shift+I | 实时监控网络请求、瀑布流展示、资源分类筛选、Timing详情、Headers查看 |
| Firefox | F12 或 Ctrl+Shift+I | 网络请求追踪、域名分组统计、缓存控制模拟、请求内容预览 |
| Microsoft Edge | F12 或 Ctrl+Shift+I | 与Chrome兼容，支持HTTPS解密、移动端网络模拟 |
| Safari | Option+Cmd+C 或 F12 | 资源依赖图分析、能源消耗统计、低数据模式测试 |
网络请求关键指标解析
状态码（Status）
| 状态码分类 | 含义 | 典型场景 |
|---|---|---|
| 2xx | 请求成功 | 页面正常加载、API返回有效数据 |
| 3xx | 重定向（需二次请求） | 永久跳转（301）、临时跳转（302） |
| 4xx | 客户端错误 | 404（资源不存在）、403（禁止访问） |
| 5xx | 服务器错误 | 500（服务器崩溃）、504（网关超时） |
请求时长（Duration）
- DNS查询时间：域名解析耗时（lt;50ms）
- TCP连接时间：建立三次握手耗时（需优化SSL握手）
- SSL握手时间：HTTPS加密协商耗时下载时间：服务器传输数据的耗时
常见问题定位与优化策略
问题1：首次加载白屏过久
| 现象 | 原因分析 | 优化方案 |
|---|---|---|
| 长时间无内容渲染 | JS/CSS阻塞渲染、关键资源过大 | 启用<link rel="preload">预加载、拆分代码块（Code Splitting） |
问题2：图片显示延迟
| 现象 | 原因分析 | 优化方案 |
|---|---|---|
| 图片逐步加载 | 未设置loading=lazy属性 | 添加<img loading="lazy">实现懒加载 |
| 高清图片卡顿 | 未做图片压缩/格式优化 | 使用WebP格式、CDN动态裁剪（如srcset） |
相关问题与解答
问题1：为什么有些请求显示为灰色？
解答：灰色请求表示浏览器从缓存中加载资源，未重复发起网络请求，这通常发生在以下情况：
- 资源被设置为强缓存（如
Cache-Control: max-age） - 浏览器自动缓存静态资源（如CSS/JS文件）
- 使用Service Worker离线缓存
问题2：如何减少网页的首次内容绘制（FCP）时间？
解答：
- 精简Critical CSS：仅内联渲染关键样式，其余CSS异步加载
- 移除非必要渲染阻塞：将
<script>标签改为defer或async - 优化字体加载：使用
font-display: swap避免字体闪烁 - 启用服务器推送（HTTP/2）：并行传输HTML与关键资源
