网络问题指南Network issues guide

本指南将演示如何使用 Microsoft Edge DevTools 的网络面板检测网络问题或优化机会。This guide shows you how to detect network issues or optimization opportunities in the Network panel of Microsoft Edge DevTools.

若要了解网络工具的基础知识,请导航到入门To learn the basics of the Network tool, navigate to Get Started.

请求排队或暂停Queued or stalled requests

症状Symptoms

六个请求正在同时下载。Six requests are downloading simultaneously. 之后,一系列的请求处于排队或暂停状态。After that, a series of requests are queued or stalled. 一旦前六个请求中完成一个,队列中的一个请求开始下载。Once one of the first six requests finishes, one of the requests in the queue starts.

在下图的瀑布图中,edge-iconx1024.msft.png 资产的前六个请求同时开始。In the Waterfall in the following figure, the first six requests for the edge-iconx1024.msft.png asset start simultaneously. 后续请求将保持暂停,直到原来的六个请求中的一个完成。The subsequent requests are stalled until one of the original six finishes.

网络面板中排队或暂停系列的示例

原因Causes

对单个域提出的请求过多。Too many requests are being made on a single domain. 在 HTTP/1.0 或 HTTP/1.1 连接上,Microsoft Edge 允许每个主机最多同步六个 TCP 连接。On HTTP/1.0 or HTTP/1.1 connections, Microsoft Edge allows a maximum of six simultaneous TCP connections per host.

修补程序Fixes

  • 如果必须使用 HTTP/1.0 或 HTTP/1.1,则实施域分片。Implement domain sharding if you must use HTTP/1.0 or HTTP/1.1.
  • 使用 HTTP/2。Use HTTP/2. 不要将域分片用于 HTTP/2。Do not use domain sharding with HTTP/2.
  • 删除或延迟不必要的请求,以便提前下载关键请求。Remove or defer unnecessary requests so that critical requests download earlier.

第一字节时间 (TTFB) 缓慢Slow Time To First Byte (TTFB)

症状Symptoms

请求等待接收服务器的第一个字节的时间过长。A request spends a long time waiting to receive the first byte from the server.

下图中,瀑布图中的绿色条形图表示请求等待了很长时间。In the following figure, the long, green bar in the Waterfall indicates that the request was waiting a long time. 这是使用限制网速并添加延迟的配置文件进行的模拟。This was simulated using a profile to restrict network speed and add a delay.

第一字节时间缓慢的请求示例

原因Causes

  • 客户端和服务器之间的连接速度很慢。The connection between the client and server is slow.
  • 服务器响应缓慢。The server is slow to respond. 在本地托管服务器,以确定是连接速度慢还是服务器速度慢。Host the server locally to determine if it is the connection or server that is slow. 如果访问本地服务器时,第一字节时间(TTFB) 仍然缓慢,则表示是服务器速度慢。If you still get a slow Time To First Byte (TTFB) when accessing a local server, then the server is slow.

修补程序Fixes

  • 如果连接速度缓慢,请考虑在 CDN 上托管内容或更改托管提供者。If the connection is slow, consider hosting your content on a CDN or changing hosting providers.
  • 如果服务器运行缓慢,请考虑优化数据库查询,同时实现缓存或修改服务器配置。If the server is slow, consider optimizing database queries, implementing a cache, or modifying your server configuration.

内容下载缓慢Slow content download

症状Symptoms

下载请求需要很长时间。A request takes a long time to download.

下图中,png 旁瀑布图的蓝色条形图表示下载花费了很长时间。In the following figure, the long, blue bar in the Waterfall next to the png means it took a long time to download.

下载耗时较长的请求示例

原因Causes

  • 客户端和服务器之间的连接速度很慢。The connection between the client and server is slow.
  • 正在下载大量内容。A lot of content is being downloaded.

修补程序Fixes

  • 请考虑在 CDN 上托管内容或更改托管提供者。Consider hosting your content on a CDN or changing hosting providers.
  • 通过优化请求发送更少的字节。Send fewer bytes by optimizing your requests.

联系 Microsoft Edge DevTools 团队Getting in touch with the Microsoft Edge DevTools team

使用以下选项讨论帖子中的新功能和更改,或与 DevTools 相关的任何其他内容。Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • 使用“发送反馈”图标发送反馈,或在 DevTools 中选择Alt+Shift+I \ (Windows、Linux) 或 Option+Shift+I \ (macOS)。Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • 发推 @EdgeDevToolsTweet at @EdgeDevTools.
  • 我们想要的 Web 提交建议。Submit a suggestion to The Web We Want.
  • 若要提交有关本文的错误,请使用以下“反馈” 部分。To file bugs about this article, use the following Feedback section.

Microsoft Edge DevTools 中的“发送反馈”图标

备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
此处可以找到原始页面,由 Kayce Basques \(技术写作人员,Chrome DevTools & Lighthouse\)和 Jonathan Garbee \(Web技术的谷歌开发技术专家\)编写。The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) and Jonathan Garbee (Google Developer Expert for Web Technology).

知识共享许可协议
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。This work is licensed under a Creative Commons Attribution 4.0 International License.