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

Question

我正在尝试提高使用多个（> 20）Javascript FETCH请求从PHP服务器获取数据的网站的性能。问题在于大多数请求在发送到服务器之前会停顿一段时间。

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

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

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

mysql

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

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);
        })
}

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

Answer 1

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