有没有办法在 http 请求中组合文件？答案

【问题标题】：Is there a way to combine files in an http request?有没有办法在 http 请求中组合文件？
【发布时间】：2020-12-28 00:13:48
【问题描述】：

My website 的加载时间比最佳状态要长，因为它会请求大量小文件，而这些小文件最终会占用大量请求。我最能控制的是一些将始终加载的数据文件，但是将它们作为单独的文件使生成它们的过程更容易。有没有一种方法可以将一个 HTTP 请求放入（tar？）文件，然后使用 JavaScript 有效地处理它？这是我现在用来读取数据文件的函数。我真正想要的是一种请求一个可以轻松解析的文件的方法。文件结构非常简单，只是一个 4 字节浮点数的集合，以重复的模式。我想我可以，而且我可能会将它们组合成一个稍微复杂一点的数据结构，但如果有一种方法可以组合所有这些文件并用 JavaScript 读取它，我会很乐意使用它！

另外值得注意的是一些小图标文件，我有十几个我想做同样事情的文件，合并到一个文件中，然后加载那个文件。

function loadBinaryFloatArray(url, convertFunction,variable_name, onLoaded) {
    
    var mRequest = new XMLHttpRequest();
    mRequest.open('GET', url);
    mRequest.responseType = 'arraybuffer';

    mRequest.onreadystatechange = function () {
        if (this.readyState === 4) {

            // Get bytes
            var buffer = this.response;
            var dataview = new DataView(buffer);

            // Create buffer (4 bytes / float)
            var mFloatArray = new Float64Array(buffer.byteLength / 8);

            // Copy floats
            for (var i = 0; i < mFloatArray.length; i++) 
            {
                mFloatArray[i] = dataview.getFloat64(i * 8,true); // At every 8th byte
            }
            
            onLoaded(convertFunction(Array.prototype.slice.call(mFloatArray)),variable_name)
        }
    };
    mRequest.send();
}

【问题讨论】：

but if there's a way to just combine all of these files and read it - 当然你可以在服务器端这样做 - 但你没有提到你正在运行的 http 服务器或者你可以使用什么（脚本）语言在您的服务器上使用 - 真的 - 在服务器上执行此操作很简单
您可以尝试对所有小图标文件使用 base64 编码的内联图像吗？ - base64-image.de/tutorial
这真的会提高性能吗？我们现在广泛支持 gzip 和 http/2 以及多路复用请求。
我不同意你的第一句话。我刚刚在您的应用程序上运行了 Google Lighthouse，您可以进行许多优化，而不涉及合并请求或其他任何内容。例如，该站点加载了 7 秒未使用的 JavaScript！此外，加载后还有 50 秒的 JavaScript 执行时间。我建议您整理一下 Google Lighthouse 建议列表，这应该可以帮助您完成很多工作。
然后看看谷歌灯塔。该网站是 100% 静态的，因此不允许使用服务器脚本。

标签： javascript httprequest tar

【解决方案1】：

嗯，对于您的图标来说，最简单的事情就是使用 spritemap。

话虽如此。这通常不是你应该做的事情：加入服务器上的文件，因为如果失败，你必须重新发送这个巨大的请求。

我还查看了您的网站。对我来说，它的加载速度非常快。主要问题是您一遍又一遍地请求相同的图像（WhereIsRoadster.png），这可能是减慢您的网站速度的原因。或者也可能取决于您的互联网连接。没有更多细节，我不能告诉你更多。

【讨论】：