<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>网络延迟和丢包 on Last Stand</title><link>https://amatsuzero.github.io/LastStand/tags/%E7%BD%91%E7%BB%9C%E5%BB%B6%E8%BF%9F%E5%92%8C%E4%B8%A2%E5%8C%85/</link><description>Recent content in 网络延迟和丢包 on Last Stand</description><generator>Hugo</generator><language>zh-cn</language><lastBuildDate>Wed, 06 Aug 2025 00:00:00 +0800</lastBuildDate><atom:link href="https://amatsuzero.github.io/LastStand/tags/%E7%BD%91%E7%BB%9C%E5%BB%B6%E8%BF%9F%E5%92%8C%E4%B8%A2%E5%8C%85/index.xml" rel="self" type="application/rss+xml"/><item><title>网络延迟和丢包</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/network/network-014/</link><pubDate>Mon, 28 Jul 2025 00:00:00 +0800</pubDate><guid>https://amatsuzero.github.io/LastStand/posts/frontend/network/network-014/</guid><description>&lt;h3 id="1什么是延迟呢"&gt;1、什么是延迟呢？&lt;/h3&gt;
&lt;p&gt;延迟其实就是我们在网页浏览或者使用应用时，从我们点击请求到服务器返回结果给我们之间的时间差。就像你在跟朋友打电话，你说完话后，朋友听到并回应你所说话的时间差一样。&lt;/p&gt;
&lt;p&gt;我们的最终目标是创建一个系统，让这个时间差变得尽可能短，也就是实现零延迟。但现实世界中，有各种各样的问题会导致系统出现延迟。如果系统的延迟很低，那么我们请求得到响应的时间就会很短。每次你在浏览器中输入网址或者点击一个链接，浏览器都会向服务器发出一个请求信号，然后服务器需要处理这个请求，获取需要的信息，最后把这些信息返回给你的浏览器。整个过程中就会有一些时间差，这就是延迟。所以，我们要不断努力降低延迟，提高系统的响应速度。&lt;/p&gt;
&lt;p&gt;&lt;img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/network/network-014/image-01.webp"&gt;&lt;/p&gt;
&lt;h3 id="2延迟是怎么回事呢"&gt;2、延迟是怎么回事呢？&lt;/h3&gt;
&lt;p&gt;延迟其实就是你在请求后需要等待的时间，就像等待快递送到家门一样。来看个例子，更容易理解它是怎么运作的。&lt;/p&gt;
&lt;p&gt;想象你正在和一个电子商务网站（比如淘宝）互动，你喜欢一个商品，然后把它加入购物车。现在，当你点击“添加到购物车”按钮时，下面的事情会依次发生：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;你点击了“添加到购物车”按钮，这时就像你启动了一个计时器，浏览器开始向服务器发请求。&lt;/li&gt;
&lt;li&gt;服务器收到请求，然后开始处理它，就像你的快递订单到了快递中心一样。&lt;/li&gt;
&lt;li&gt;服务器处理完后，回应你的请求，信息到达你的浏览器，商品成功添加到购物车中，就像你的包裹送到了家门口一样。&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;你可以想象在第一步按下了计时器的启动按钮，然后在最后一步停下，这段时间就是延迟。希望这个例子能让你更容易理解延迟是如何运作的。&lt;/p&gt;
&lt;p&gt;&lt;img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/network/network-014/image-02.webp"&gt;&lt;/p&gt;
&lt;h3 id="3延迟都是怎么来的呢"&gt;3、延迟都是怎么来的呢？&lt;/h3&gt;
&lt;p&gt;现在，你应该已经理解了要点，但是你知道是什么造成了延迟吗？网络中的延迟受多种因素影响，它们在确定延迟的具体数值时扮演着关键角色。其中一个主要因素是出站呼叫。回到之前添加购物车的例子，当你点击浏览器上的按钮时，请求会发送到后端的某个服务器，这个服务器可能会在内部调用多个服务来进行计算（可能是同时或者按顺序），然后等待它们的响应或将它们汇总。所有这些因素都会增加呼叫的延迟。但总结起来，主要由以下几个因素引起：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;传输介质：&lt;/strong&gt; 传输介质指的是信息在起点和终点之间的物理路径。系统的延迟会取决于用于传输请求的介质类型。广域网、光纤电缆等传输介质都广泛应用，但每种介质都有自己的限制，这会影响延迟。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;传播延迟：&lt;/strong&gt; 这指的是数据包从一个源传播到另一个源所需的时间。系统的延迟很大程度上取决于通信节点之间的距离。节点距离越远，系统的延迟就会越高。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;路由器：&lt;/strong&gt; 路由器在通信中扮演着重要的角色，它们需要一些时间来分析数据包的标头信息。延迟取决于路由器处理请求的效率。每一次路由器到路由器的跳跃都会增加系统的延迟。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;存储延迟：&lt;/strong&gt; 系统的延迟还受到所使用的存储系统类型的影响，因为处理和返回数据可能需要一些时间。因此，访问存储中的数据会增加系统的延迟。&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id="4如何测量延迟"&gt;4、如何测量延迟？&lt;/h3&gt;
&lt;p&gt;要量化延迟其实很简单，我们有几种常用的方法，让我们来看看最常见的三种：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Ping（网络探测）：&lt;/strong&gt; Ping是测量延迟最常用的工具之一。它的原理是向目标地址发送一个小数据包，然后查看接收到响应所需的时间。更快的Ping意味着连接更敏捷，响应更迅速。&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/network/network-014/image-03.webp"&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Traceroute（路径跟踪）：&lt;/strong&gt; Traceroute是另一个用于测试延迟的工具。它也使用数据包，但不止如此，它还会逐一记录数据包从源到目的地经过的每个中间节点所需的时间。这有助于识别网络中的延迟点。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;MTR（网络诊断工具）：&lt;/strong&gt; MTR是Ping和Traceroute的超级组合。MTR提供了详尽的报告，列出了从一个端点到另一个端点所需的每个网络节点的信息。这份报告通常包括了各种细节，比如丢包率、平均延迟等，非常有助于分析网络性能。&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id="5延迟优化"&gt;5、延迟优化&lt;/h3&gt;
&lt;p&gt;延迟是系统性能的绊脚石，所以我们需要采取一些措施来进行优化。下面是一些简单又实用的方法，可以帮助我们减少延迟：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;采用HTTP/2：&lt;/strong&gt; 使用HTTP/2协议可以显著减少延迟。它支持并行传输，最大程度地减少了数据从发送方到接收方的往返次数，这对于降低延迟非常有效。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;减少外部HTTP请求：&lt;/strong&gt; 第三方服务会增加延迟。通过减少外部HTTP请求的数量，我们可以提高系统的响应速度和质量。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;使用CDN：&lt;/strong&gt; 内容分发网络（CDN）被证明能够减少延迟。CDN会在全球多个位置缓存资源，从而减少请求和响应的传输时间。这意味着可以从更接近客户端的缓存位置获取请求，而不必每次都回到原始服务器。&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/network/network-014/image-04.webp"&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;浏览器缓存：&lt;/strong&gt; 利用浏览器缓存，可以减少向服务器发送的请求次数，从而降低延迟。浏览器会在本地缓存特定资源，这对于提高页面加载速度很有帮助。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;优化磁盘I/O：&lt;/strong&gt; 为了减小磁盘I/O的影响，我们需要优化算法，尽量减少频繁的磁盘写入操作。可以考虑使用直写式缓存、内存数据库，或者在适当的情况下进行写入合并，还可以考虑使用快速存储系统，比如SSD。&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;作为开发人员，我们还可以在应用程序级别采取一些方法来优化延迟：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;避免低效算法：&lt;/strong&gt; 高效的算法是代码中延迟的主要来源之一。要尽量避免不必要的循环或昂贵的嵌套操作。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;避免锁定的设计模式：&lt;/strong&gt; 锁定会引入延迟，因此我们应该采用避免锁定的设计模式，特别是在多线程环境中。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;采用异步编程模型：&lt;/strong&gt; 异步编程可以更好地利用硬件资源，因为它避免了阻塞操作，从而减少等待时间。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;限制无界队列深度：&lt;/strong&gt; 限制无界队列深度并提供反压通常可以减少代码中的等待时间，从而产生更可预测的延迟。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;这些方法可以帮助我们优化延迟，提高系统性能，让用户获得更好的体验。&lt;/p&gt;
&lt;h2 id="常见考点"&gt;常见考点&lt;/h2&gt;
&lt;p&gt;在前端面试中，&lt;strong&gt;网络延迟和丢包&lt;/strong&gt;是评估你对网络传输、性能瓶颈及应对策略理解的重要考点。面试官会通过这些话题判断能否从&lt;strong&gt;网络层面&lt;/strong&gt;分析问题、优化用户体验，特别是在弱网环境、移动端场景下。&lt;/p&gt;
&lt;h2 id="一网络延迟的考点"&gt;一、网络延迟的考点&lt;/h2&gt;
&lt;h3 id="1-网络延迟的构成"&gt;1. 网络延迟的构成&lt;/h3&gt;
&lt;p&gt;面试官可能会问：“用户输入 URL 后，请求延迟可能发生在哪些阶段？”&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;阶段&lt;/th&gt;
&lt;th&gt;含义&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;DNS 解析&lt;/td&gt;
&lt;td&gt;域名 → IP 地址&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;TCP 建立连接&lt;/td&gt;
&lt;td&gt;三次握手耗时&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;TLS 握手&lt;/td&gt;
&lt;td&gt;HTTPS 建立安全连接耗时&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;请求发送&lt;/td&gt;
&lt;td&gt;客户端发送数据&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;首字节返回 TTFB&lt;/td&gt;
&lt;td&gt;服务端处理 + 网络传输&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;内容下载&lt;/td&gt;
&lt;td&gt;响应内容下载耗时&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;渲染耗时&lt;/td&gt;
&lt;td&gt;浏览器解析和绘制页面&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h3 id="2-常见影响网络延迟的因素"&gt;2. 常见影响网络延迟的因素&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;地域距离：客户端与服务端物理距离大（如中国访问美国服务器）&lt;/li&gt;
&lt;li&gt;DNS 缓存未命中或 DNS 配置不合理&lt;/li&gt;
&lt;li&gt;TLS 握手过长（HTTPS 开销）&lt;/li&gt;
&lt;li&gt;带宽瓶颈：文件过大、网络拥堵&lt;/li&gt;
&lt;li&gt;长连接未复用（未启用 HTTP/2）&lt;/li&gt;
&lt;li&gt;移动网络抖动高（4G/5G 网络波动）&lt;/li&gt;
&lt;li&gt;首包延迟（TTFB 过高）&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id="3-如何优化延迟"&gt;3. 如何优化延迟？&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;启用 CDN，部署全球节点，减少 RTT&lt;/li&gt;
&lt;li&gt;启用 DNS 预解析：&lt;code&gt;&amp;lt;link rel=&amp;quot;dns-prefetch&amp;quot;&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;启用 HTTP/2 或 HTTP/3，减少连接耗时&lt;/li&gt;
&lt;li&gt;减少重定向跳转、合并请求&lt;/li&gt;
&lt;li&gt;使用 &lt;code&gt;preconnect&lt;/code&gt;、&lt;code&gt;prefetch&lt;/code&gt; 提前连接目标源&lt;/li&gt;
&lt;li&gt;SSR 提前输出首屏 HTML，减少白屏&lt;/li&gt;
&lt;li&gt;缓存优化（减少服务端响应压力）&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="二丢包的考点"&gt;二、丢包的考点&lt;/h2&gt;
&lt;h3 id="1-丢包的本质"&gt;1. 丢包的本质&lt;/h3&gt;
&lt;p&gt;网络传输中，部分数据包因&lt;strong&gt;链路拥堵、信号弱、硬件丢包率高&lt;/strong&gt;等原因，未能到达目的地。&lt;/p&gt;</description></item></channel></rss>