【F12】网络面板

本文介绍了如何使用Chrome DevTools的网络面板来分析和优化网页加载性能。内容涵盖网络面板的基础知识,如资源加载时间、HTTP请求和响应、DOMContentLoaded和load事件、资源详细信息以及网络带宽限制的模拟。通过学习,你可以了解资源时间轴,诊断网络问题,以及模拟不同网络条件下的性能表现。
摘要由CSDN通过智能技术生成

使用网络面板了解请求和下载的资源文件并优化网页加载性能

(1)网络面板基础

 测量资源加载时间

使用 Network 面板测量您的网站网络性能。

Network 面板记录页面上每个网络操作的相关信息,包括详细的耗时数据、HTTP 请求与响应标头和 Cookie,等等

TL;DR

  • 使用 Network 面板记录和分析网络活动。
  • 整体或单独查看资源的加载信息。
  • 过滤和排序资源的显示方式。
  • 保存、复制和清除网络记录。
  • 根据需求自定义 Network 面板。

Network 面板概览

Network 面板由五个窗格组成:

  1. Controls。使用这些选项可以控制 Network 面板的外观和功能。
  2. Filters。 使用这些选项可以控制在 Requests Table 中显示哪些资源。提示:按住 Cmd (Mac) 或 Ctrl(Windows/Linux) 并点击过滤器可以同时选择多个过滤器。
  3. Overview。 此图表显示了资源检索时间的时间线。如果您看到多条竖线堆叠在一起,则说明这些资源被同时检索。
  4. Requests Table。 此表格列出了检索的每一个资源。 默认情况下,此表格按时间顺序排序,最早的资源在顶部。点击资源的名称可以显示更多信息。 提示:右键点击 Timeline 以外的任何一个表格标题可以添加或移除信息列。
  5. Summary。 此窗格可以一目了然地告诉您请求总数、传输的数据量和加载时间。

默认情况下,Requests Table 会显示以下列。您可以添加和移除列

  • Name。资源的名称。
  • Status。HTTP 状态代码。
  • Type。已请求资源的 MIME 类型。
  • Initiator。发起请求的对象或进程。值为以下选项之一:

    (1)Parser。Chrome 的 HTML 解析器发起请求。
    (2)Redirect。HTTP 重定向发起请求。
    (3)Script。脚本发起请求。
    (4)Other。某些其他进程或操作发起请求,例如用户通过链接或者在地址栏中输入网址导航到页面。

  • Size。响应标头(通常为数百字节)加响应正文(由服务器提供)的组合大小。
  • Time。从请求开始至在响应中接收到最终字节的总持续时间。
  • Timeline(Waterfall)。Timeline 列可以显示所有网络请求的可视瀑布。 点击此列的标题可以显示一个包含更多排序字段的菜单。

记录网络活动

 Network 面板打开时,DevTools 在默认情况下会记录所有网络活动。 要记录活动,只需在面板打开时重新加载页面,或者等待当前加载页面上的网络活动。

您可以通过 record 按钮指示 DevTools 是否记录。 显示红色 () 表明 DevTools 正在记录。 显示灰色 () 表明 DevTools 未在记录。 点击此按钮可以开始或停止记录,也可以按键盘快捷键 Cmd/Ctrl+e

在记录期间捕捉屏幕截图

Network 面板可以在页面加载期间捕捉屏幕截图。此功能称为幻灯片

点击摄影机图标可以启用幻灯片。图标为灰色时,幻灯片处于停用状态 (已停用幻灯片)。如果图标为蓝色,则说明已启用 (已启用幻灯片)。

重新加载页面可以捕捉屏幕截图。屏幕截图显示在概览上方。

查看 DOMContentLoaded 和 load 事件信息

Network 面板突出显示两种事件:DOMContentLoaded 和 load。<

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值