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

Question

我正在尝试提高使用多个（> 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);
}

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

Answer 1

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