Javascript 获取速度很慢(60 毫秒 vs 3 毫秒)

问题描述 投票:0回答:2
在我的机器上,每次调用

运行 Javascript fetch 大约需要 60 毫秒。与 3ms 的 Python requests 相比,这要慢得多。

问题

  • 为什么
    fetch
    慢这么多?
  • 有什么办法可以加快速度吗?我可以接受需要我重新配置浏览器的答案。

实验

这些是我实验的细节。

系统

  • 浏览器:Firefox 74.0(64位)
  • 操作系统:Ubuntu 18.04.4 LTS
  • 服务器:Django 3.0.3(但由于
    requests
    速度更快,所以这应该不重要)。服务器和客户端在同一台机器上。
  • 对于
    requests
    :Python 3.7.6 和
    requests
    2.23.0
  • 处理器:Intel(R) Core(TM) i5-6600K CPU @ 3.50GHz

Javascript 获取

运行下面 Javascript 的 HTML:

<!DOCTYPE html>
<html>
  <head>
    <script src="script.js"></script>
  </head>
  <body>
  </body>
</html>

Javascript 发出多个

fetch
请求并报告每个请求的平均时间。

// record all times
const times = [];

function call() {
    // record starting time
    const startFetch = performance.now();
    fetch("http://127.0.0.1:8000/timer/time")
        .then((response) => {
            // compute fetch duration
            const elapsedFetch = performance.now() - startFetch;

            // record result
            console.log(elapsedFetch);
            times.push(elapsedFetch);

            if (times.length<100) {
                // start next call
                call();
            } else {
                // report statistics
                const totalFetch = times.reduce((a, b) => a + b, 0);
                const averageFetch = totalFetch/times.length;
                const standardDeviation = Math.sqrt(times.reduce((a, b) => a + (b-averageFetch) ** 2, 0)/times.length);
                const totalElapsed = performance.now() - startTime;
                console.log("Average fetch time:", averageFetch, '+-', standardDeviation);
                console.log("Percentage of overall elapsed:", totalFetch/totalElapsed)
            }
        });
}

var startTime = performance.now();
call();

访问 HTML 页面时 Firefox 控制台输出:

Average fetch time: 62.51 +- 31.450117646838777
Percentage of overall elapsed: 0.9993605115907274

Google Chrome 版本 80.0.3987.149(官方版本)(64 位)的类似结果

Average fetch time: 49.93 +- 4.92596183501253
Percentage of overall elapsed: 0.9993995196156925

使用 XMLHttpRequest 而不是

fetch

xhr.open("GET", "http://127.0.0.1:8000/timer/time");
xhr.send();
xhr.onload = ...

产生相似的结果:

Average fetch time: 60.19 +- 26.325157169521326
Percentage of overall elapsed: 0.9993358791300017

Python 请求

类似于 Javascript 的代码,但使用 Python:

import requests
import time
import numpy as np

times = []
start_time = time.time()

for i in range(100):
    start_get = time.time()
    response = requests.get('http://127.0.0.1:8000/timer/time')
    elapsed_get = time.time() - start_get
    times += [elapsed_get]

total_elapsed = time.time() - start_time

total_get = np.sum(times)
average_get = np.average(times)
standard_deviation = np.std(times)

print("Average get time:", average_get, '+-', standard_deviation)
print("Percentage of overall elapsed:", total_get/total_elapsed)

输出:

Average get time: 0.0025661182403564453 +- 0.0001961814487345112
Percentage of overall elapsed: 0.9994576986364464
javascript fetch-api
2个回答
2
投票

虽然我仍然不知道为什么 Javascript 获取如此慢,但我已经能够切换到更快的选项:

我现在使用WebSockets(在客户端)和Django Channels(在服务器上),它们的速度明显更快。


0
投票

我想我知道你的测试和结果出了什么问题。 您正在通过浏览器测试 Javascript Fetch 性能,但所有浏览器可用的并发连接数都非常有限 - 大多数浏览器只有 6 个,一些较旧的浏览器只有 2 个,而 Firefox 中可用的最多连接数为 8 个IIRC。无论如何,

您的 JavaScript 提取实际上是并行触发的,因此除了前 6 个之外的所有提取都会在浏览器的连接池中排队,并且排队时间可能非常长(相对于提取的响应时间)。

你的Python的获取没有这个限制,因此感觉要快得多。

为了更公平的比较,我建议使用node.js,例如创建一些route.js来获取请求并使用fetch并行复用它。

© www.soinside.com 2019 - 2024. All rights reserved.