网络延迟是前端性能优化的一个重要方面。在 Web 应用程序中，前端代码必须从服务器获取数据以渲染页面。如果网络延迟过高，网站的性能就会受到影响。所以，减少网络延迟来提高网站性能就成为了一项非常重要的优化工作。
理解网络延迟
在进行优化之前，我们需要先理解什么是网络延迟。网络延迟指的是请求发送到服务器并收到响应所需的时间。这个时间延迟其实包含了多个子延迟，包括：
- DNS 解析时间：将域名解析为服务器 IP 地址所需的时间。
- 连接时间：建立 TCP 连接所需的时间。
- 发送时间：将请求发送到服务器所需的时间。
- 等待时间：等待服务器响应所需的时间。
- 响应时间：服务器实际响应客户端请求所需的时间。
以上所有延迟的总和就是网络延迟。为了更好地优化网站性能，我们应该尽可能减少这些延迟。
减少 DNS 解析时间
DNS 解析是将域名转换为 IP 地址的过程。在进行 DNS 解析时，会先查询浏览器缓存中是否已经有了该域名对应的 IP 地址。如果没有，则会向本地 DNS 服务器发出请求，获取该域名的 IP 地址。
为了减少 DNS 解析时间，我们可以采用以下策略：
- 避免使用过多子域名：每个子域名都需要进行 DNS 解析，因此避免过多的子域名可以有效减少 DNS 解析的时间。
- 利用 DNS 缓存：DNS 缓存可以在一定程度上减少 DNS 解析的时间，浏览器会将最近请求过的 DNS 记录缓存起来，下次请求同一域名时可以直接从缓存中获取 IP 地址。
减少连接时间
建立 TCP 连接需要进行三次握手，所以连接时间往往是一个较为耗时的过程。为了减少连接时间，我们可以采用以下策略：
- 启用 HTTP 持久连接：HTTP 持久连接可以复用已建立的 TCP 连接，避免频繁地创建和关闭 TCP 连接。
- 启用 HTTPS 协议的线程锁（TLS/SSL）：启用线程锁可以减少建立和关闭加密连接时的延迟。
减少发送时间和等待时间
发送请求和等待服务器响应是一项相对较为简单的任务。但是，这里依然有一些可以优化的地方。
- 减少请求数据大小：减少请求数据的大小可以缩短发送时间和等待时间。例如，压缩 JavaScript 和 CSS 文件可以减少传输大小，从而加速页面加载速度。
- 使用 CDN 加速：使用 CDN 可以离用户更近的位置提供资源，从而加速页面加载速度。
- 协商缓存：协商缓存可以在服务端对资源进行缓存，客户端在发送请求时会带上缓存标识，服务端会验证标识是否变化，如果未变则可以直接返回缓存资源，而不必重新获取。
建立 Socket.io 实现聊天室
下面提供一个简单的示例代码，分别使用了减少发送时间和等待时间的协商缓存和使用 CDN 加速的方法来加速聊天室的页面加载时间。
服务器端代码
----- ------- - ------------------
----- --- - ---------
----- ------ - ---------------------------------
----- -- - ----------------------------
----- ----- - --
-------------------------------- - ---------- -
------- ----- -- ------------
---
------------------- ------ -- -
--------------- --------- --- -- -
------------- --------- ----
--
-------------- ------ ---- -- -
----------------
------------- ------ ------
--
----------------------- -- -- -
----- ----- - ------------------------------
-- ------ --- --- -
------------------- --
------------- ------ ------
-
--
--
------------------- -- -- -
------------------- -- --------- -- ---- ------
--客户端代码
--------- -----
----- ----------
------
----- ----------------
---------------- ---- ---------------
------- ------------------------------------------------------------
-------
------
--- -------------------
----- --------- ----------
------ ---------- ------------------ -----------------------
-------
--------
----- ------ - -----
---------------------------------------------------------- - -- -
-------------------
----- ------- - ---------------------------------------
----------------- --------- ---------
-------------------------------------- - ---
---
--------------- --------- ------- -- -
----- -- - -----------------------------
-------------- - --------
----------------------------------------------------
---
--------------- ------ ----- -- -
----- --------- - ---------------------------------
------------------- - ---
------------------ -- -
----- -- - -----------------------------
-------------- - -----
--------------------------
---
---
---------
-------
-------结论
减少网络延迟可以显著提高网站性能。可以通过优化 DNS 解析、减少连接时间、减少发送时间和等待时间来降低网络延迟。最后，示例代码演示了如何使用协商缓存和 CDN 加速来加速聊天室页面的加载时间。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671068205f551281026ab68f