HOW - 弱网处理（含超时重试和DNS探测机制）

一、介绍

在前端项目中，弱网场景指的是网络条件较差或不稳定的情况。在这种情况下，用户可能会遇到网络延迟、丢包、请求超时等问题，从而影响到前端应用的性能和用户体验。

以下是一些常见的弱网场景和对策：

1. 网络延迟：

• 使用加载动画或占位符来提高用户体验，在等待数据加载时给用户一些反馈。
• 考虑使用服务端渲染 (SSR) 或预渲染来提高首屏加载速度。
• 对于重要数据，可以使用缓存机制，减少对网络请求的依赖。另外，也使用 Service Worker 实现离线缓存，使应用在没有网络连接时仍然可以访问部分内容。

3. 丢包：

• 实现请求重试机制，当请求失败时，可以让用户主动点击按钮重试，也可以开发实现自动重试，直到请求成功或达到最大重试次数。
• 使用 WebSocket 进行实时通信，可以更好地处理丢包和网络不稳定的情况。

因为WebSocket 是一种全双工通信协议，它在客户端和服务器之间建立持久性的连接，使得双方可以进行实时的双向通信。相比传统的 http 请求，它建立一次连接后，连接会保持活跃状态，不需要像 HTTP 请求那样每次都重新建立连接；支持双向通信，客户端和服务器可以随时发送消息给对方，而不受请求-响应模式的限制，在网络不稳定的情况下，服务器可以主动发送数据给客户端，从而减少了因延迟或丢包而导致的通信中断问题；可以使用心跳机制来保持连接的活跃状态，如果某一方长时间没有收到对方的心跳消息，可以判断连接已经断开，并进行重连或其他处理；最后一点，WebSocket 使用数据帧来传输数据，数据帧的结构相对简单，可以更好地处理丢包和网络不稳定的情况，WebSocket 协议还提供了一套机制来处理丢失的数据帧，如分片、控制帧等，以确保数据的可靠传输。

4. 请求超时：

• 设置合理的请求超时时间，并为请求设置超时处理逻辑，如显示错误信息或进行重试。
• 尽量减少单个请求的耗时，可以通过拆分请求、压缩静态资源、使用图片懒加载、使用 CDN 加速等方式来优化。

二、弱网和白屏问题

弱网不可避免会遇到白屏问题，可以参考另一篇文章：HOW - 移动端白屏问题优化和监控

三、弱网模拟

在开发过程中，可以通过模拟弱网环境进行测试，以验证应用在弱网环境下的性能和稳定性。常用的模拟工具包括 Chrome DevTools 中的 Network Throttling 功能和第三方工具如 Charles、Fiddler 等。

1、限制CPU内存和网络流量占用

入口：

• 高速 3G
  会同时限制CPU 速度，比普通性能低 4 倍

• 低速 3G
  会同时限制CPU 速度，比普通性能低 6 倍

2、仅限制CPU内存占用
入口：

这里的4倍、6倍效果同前面的高速3G、低速3G，只是仅会影响内存性能。

3、仅限制网络流量
入口：

四、获取网络状态

浏览器也通过了一些 API 支持获取网络状态信息。

1. 在线或离线

在前端开发中，可以使用 navigator.onLine 属性来判断当前网络状态。这个属性返回一个布尔值，表示浏览器是否处于在线状态。当浏览器能够访问网络时，navigator.onLine 返回 true，否则返回 false。

除了 navigator.onLine 属性之外，还可以通过监听 online 和 offline 事件来实时监测网络状态的变化。当网络连接状态改变时，浏览器会触发相应的事件，可以通过监听这些事件来执行相应的操作。

例如：

window.addEventListener('online', () => {
   
  console.log('网络已连接');
});
window.addEventListener('offline', () => {
   
  console.log('网络已断开');
});

2. 网络状态指标：网络质量

关于网络状态的指标信息，除了在线和离线状态之外，还可以通过其他一些指标信息来判断网络质量和性能，例如：网络速度和网络类型。

可以使用 navigator.connection 对象来获取当前网络连接的速度信息，包括下载速度、上传速度等。

downlink: 10
effectiveType: "4g"
onchange: null
rtt: 50
saveData: false

包括以下几个属性：

• downlink： 表示当前网络连接的下载速度，单位为 Mbps（兆位每秒）。在这个示例中，downlink 为 10，表示下载速度为 10 Mbps。
• effectiveType： 表示当前网络连接的类型，通常指网络的有效类型，即网络的实际传输性能。在这个示例中，effectiveType 为 “4g”，表示当前连接为 4G 网络。
• onchange： 表示一个事件处理程序，在网络连接状态变化时触发相应的事件。在这个示例中，onchange 为 null，表示未设置事件处理程序。
• rtt： 表示网络往返时间（Round-Trip Time），即从发送请求到接收到响应所需的时间，单位为毫秒。在这个示例中，rtt 为 50，表示网络往返时间为 50 毫秒。
• saveData： 表示用户是否启用了数据节省模式。如果用户启用了数据节省模式，浏览器会尝试减少数据使用量以节省用户的数据流量。在这个示例中，saveData 为 false，表示未启用数据节省模式。

这些信息可以帮助开发人员了解用户的网络环境和性能，从而优化网站或应用的加载速度、性能和用户体验。例如，可以提前获取并根据网络类型和下载速度加载适当大小的图片、延迟加载资源或提供不同网络条件下的用户体验等，避免出现网络延迟、丢包、请求超时等问题。

五、具体实践

1. 基本实现

以下是一个简单的示例代码，展示了如何在弱网场景下实现一个首屏信息流页的处理方案：

// 模拟一个异步请求，获取信息流数据
function fetchNewsFeed() {
   
  return new Promise((resolve, reject) => {
   
    setTimeout(() => {
   
      // 模拟请求超时的情况
      // reject(new Error('请求超时'));

      // 模拟网络延迟和丢包的情况
      // if (Math.random() < 0.5) {
   
      //   reject(new Error('网络错误'));
      // }

      // 模拟请求成功，并返回信息流数据
      const newsFeedData = [
        {
    id: 1, title: '新闻标题1', content: '新闻内容1' },
        {
    id: 2, title: '新闻标题2', content: '新闻内容2' },
        {
    id: 3, title: '新闻标题3', content: '新闻内容3' }
      ];
      resolve(newsFeedData);
    }, 5000); // 模拟请求延迟 2 秒
  }