提高 Javascript 中多个 FETCH 请求的性能

Posted 2023-02-27

【中文标题】提高 Javascript 中多个 FETCH 请求的性能

【英文标题】：Improving performance of multiple FETCH requests in Javascript

【发布时间】：2019-01-19 09:27:28

【问题描述】：

我正在尝试提高使用多个 (>20) javascript FETCH 请求从 php 服务器获取数据的网站的性能。问题是大多数请求在发送到服务器之前会延迟一段时间。

我在网上了解到，我用于访问网站的 Google Chrome 仅支持到同一服务器的最多六个并发 TCP 连接。我猜每个 FETCH 请求都会建立一个新的 TCP 连接，这就是为什么只能同时处理其中的六个。

显然，我想到通过同一连接发送所有请求可以解决性能问题，但我找不到解决方案。

这是我的 js 代码的一部分：

draw_table(pageID, 28, fullUrls);

function draw_table(pageID, chartID, fullUrls) 
    fetch(fullUrls[chartID]).then(function (response) 
        response.json().then(function (json) 
            let data = new google.visualization.DataTable(json);
            let table = new google.visualization.Table(document.getElementById(`table_div_$graphs[chartID]`));
            table.draw(data,  height: '100%' );
        )
    ).catch(function(error) 
            console.error('Error:', error);
        )

这是我的服务器端代码的一部分：

if ($_GET['chart'] == $charts_sub[12]) 

    $total = mysqli_query($con, $sql_sub[44]);

    $rows = array();
    $table = array();

    $table['cols'] = array(
        array('label' => 'Method','type' => 'string'),
        array('label' => '#Requests','type' => 'number'),
    );

    $row1 = mysqli_fetch_row($total);
    $sub_array = array();
    $sub_array[] = array("v" => 'Total Packets');
    $sub_array[] = array("v" => $row1[0]);
    $rows[] =  array("c" => $sub_array);

    $table['rows'] = $rows;
    echo json_encode($table);
    mysqli_free_result($list);

我希望有人可以帮助我。谢谢。

【问题讨论】：

服务器在那里做什么？几个字节的 3 秒非常慢。

使用HTTP/2。它允许对请求进行流水线化和多路复用。

服务器运行一个mysql服务器，将数据库中的数据以JSON格式返回给Client。

这是一个服务器端问题。 1）服务器通常会变慢 2）如果您只想发出一个服务器必须支持的请求，那么请添加您的服务器端代码...

我添加了一些服务器端代码。我认为服务器响应缓慢可能是由于SQL查询或表结构没有完全优化造成的。

【参考方案1】：

您应该将一些请求组合成一个请求，服务器可以同时处理多个任务。例如，在URL中你可以发送10个chartIDs在服务器处理后的请求中，响应结果是10个图表的列表数据。