提高Javascript中多个获取请求的性能

提高Javascript中多个获取请求的性能,javascript,php,performance,fetch-api,Javascript,Php,Performance,Fetch Api,我正在尝试改进一个网站的性能,该网站使用多个(>20)Javascript获取请求从PHP服务器获取数据。问题是,大多数请求在发送到服务器之前都会暂停一段时间 我在网上看到,我用来访问网站的Google Chrome最多只支持六个到同一服务器的并发TCP连接。我猜每个FETCH请求都会建立一个新的TCP连接,这就是为什么只有六个请求可以并发处理的原因 显然,我想到通过同一个连接发送所有请求可以解决性能问题,但我找不到解决方案 这是我的js代码的一部分: draw_table(pageID, 2

我正在尝试改进一个网站的性能,该网站使用多个(>20)Javascript获取请求从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);
}

我希望有人能帮助我。谢谢。

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

服务器在那里做什么?对于几个字节,3秒的速度非常慢。请使用。它允许请求的流水线和多路复用。服务器运行mysql服务器,并以JSON格式将数据从数据库返回到客户端。这是服务器端的问题。1) 一般来说,服务器的速度很慢2)如果您只想发出一个必须由服务器支持的请求,请添加服务器端代码…我添加了一些服务器端代码。我认为服务器响应缓慢可能是由于SQL查询或表结构未完全优化所致。