在 React Native 中测量网络延迟

Question

在React Native 中测量网络延迟的最佳方法是什么？

例如

const startTime = Date.now(); 
let response = await fetch(url)
const endTime = Date.now(); 
const totalTimeInMs = endTime - startTime;

如果我在上面共享的网络调用之前/之后放置启动和停止计时器，这可能不会提供真正的网络延迟，因为 JS 可能正忙于做其他一些工作，并且最终会在事件循环/回调队列/任务中没有任何内容时出现这种情况。

因此想知道是否有更好的方法来测量网络延迟？

Answer 1

我在寻找以axios为单位测量请求响应时间的方法时发现了这个问题......但我认为它足够有趣，可以对核心问题有一个替代答案。

如果您真的想知道网络延迟，精确时间协议使用的技术可能会有一些灵感。

概念
这张图希望能解释我所说的"网络延迟"是什么意思：

API Request             API Response
|                          ^
v                          |
UI ---+--------------------------+-----------> Time
A                          ^ B
                       /
                     /
                   /
v                 /
Backend -----+---------------+-------------> Time
a |               ^ b
|               |
+- processing --+
time
Where:
- A is the time when the UI sends the request
- a is the time when the backend receives the request
- b is the time when the backend sends the response
- B is the time when the UI receives the response
The time it takes from A->a is the network latency from UI->backend.
The time it takes from b->B is the network latency from backend->UI.
Each step of request/response can calculate these and add them to 
the respective request/response object.

你不能用这个做什么

• 您可能无法以这种方式精确同步时钟，会有太多抖动。
• 您实际上无法分辨入站/出站延迟。因为你没有办法知道A到a或B到b的时间关系。

你可以用这个做什么
在UI中看到的总时间(B - A(，减去在后端看到的总时间(b - a(，应该足以很好地估计往返网络延迟。

即network_latency = ((B-A) - (b-a)) / 2

在足够多的样本上取平均值，这可能足够好吗？

FWIW，你可以让后端在响应中包含自己的"processing_time"，然后UI可以在请求的上下文中存储"A"，并在成功的响应返回后计算"B-A"。不过，这个想法是一样的。

Answer 2

您可以使用 react-native-debugger 从 Web 开发中获取熟悉的网络选项卡，以便在 react-native 中使用！

https://github.com/jhen0409/react-native-debugger/blob/master/docs/network-inspect-of-chrome-devtools.md

Answer 3

解决方案 1：

安装公理函数库

yarn add axios

response.latency将给出总时间InM

完整代码

import React, { Component } from "react";
import { Text, StyleSheet, View } from "react-native";
import axios from "axios";
const axiosTiming = (instance) => {
instance.interceptors.request.use((request) => {
request.ts = Date.now();
return request;
});
instance.interceptors.response.use((response) => {
const timeInMs = `${Number(Date.now() - response.config.ts).toFixed()}ms`;
response.latency = timeInMs;
return response;
});
};
axiosTiming(axios);
export default class App extends Component {
componentWillMount() {
axios.get("https://facebook.github.io/react-native/movies.json")
.then(function (response) {
console.log(response.latency);  //17ms
})
.catch(function (error) {
console.log(error);
});
}
render() {
return (
<View>
<Text> test </Text>
</View>
);
}
}

解决方案 2：

通过使用 fetch，但 fetch 没有给我们默认的计时属性

const start = new Date();
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
const timeTaken= (new Date())-start;
return responseJson.movies;
})