在前端开发中，文件上传和下载是很常见的操作。然而，文件上传和下载的性能往往受到网络带宽、服务器响应速度和文件大小等因素的影响，导致用户的等待时间过长，影响用户体验。本文将介绍一些优化文件上传下载性能的方法和技巧，以更好地提升用户体验。
一、文件上传优化
1. 使用流式传输
在文件上传时，使用流式传输能够提高上传速度和减少内存占用。可以使用 XMLHttpRequest 对象中的 upload.onprogress 事件监听上传进度，并在上传结束后回调处理上传结果。
// javascriptcn.com 代码示例
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = function () {
// 上传成功
};
xhr.onerror = function () {
// 上传失败
};
xhr.upload.onprogress = function (evt) {
if (evt.lengthComputable) {
const percentComplete = (evt.loaded / evt.total) * 100;
console.log(percentComplete.toFixed(2) + '%');
}
};
xhr.send(file);2. 压缩文件
对于一些文件类型，如图片、音视频等，可以使用图像压缩、音视频编/解码等技术对文件进行压缩，减小文件大小，从而提高上传速度。同时，也可以在客户端进行文件转码，如将高分辨率图片转换成低分辨率图片、将大视频拆分成多个碎片进行上传，以便加快上传速度。
3. 分片上传
对于大文件的上传，可以使用分片上传技术，将文件拆分为多个小文件进行上传，从而减小单个文件的大小，避免因网络中断或传输失败等情况导致整个文件上传失败。上传完成后，再将这些小文件合并成一个完整文件。
// javascriptcn.com 代码示例
const fileChunkList = []; // 将文件拆分成多个片段
for (let i = 0; i < file.size; i += chunkSize) {
fileChunkList.push(file.slice(i, i + chunkSize));
}
for (let i = 0; i < fileChunkList.length; i++) {
const chunkBlob = fileChunkList[i];
const formData = new FormData();
formData.append('chunk', chunkBlob);
formData.append('filename', file.name);
formData.append('index', i);
// 上传该片段
}二、文件下载优化
1. 避免重复下载
为减少用户等待时间和服务器负担，可通过检测文件的“修改时间”或“文件 ETag 标识”等信息判断文件是否已被下载过，若已下载过，则不再重复下载。
// javascriptcn.com 代码示例
fetch('/file.txt', {
method: 'HEAD'
})
.then(function(res) {
// res.headers.get('last-modified');
// res.headers.get('etag');
});
fetch('/file.txt')
.then(function(res) {
if (res.status === 304) {
// 文件已被下载过，不再重复下载
console.log('File has not been modified');
}
return res.text();
})
.then(function(text) {
console.log('Content: ' + text);
});2. 使用 CDN 加速
对于需要频繁访问和下载的文件，可以将其存储在 CDN（内容分发网络）上，通过就近访问 CDN 节点，从而加快文件的下载速度和用户的响应速度。
3. 支持断点续传
对于大文件的下载，若下载过程中因网络等原因导致下载中断，可以使用断点续传技术，将已下载的文件片段保存下来，下次继续下载时，只需从上次中断的位置继续下载，而不必从头重新下载一遍。
// javascriptcn.com 代码示例
let startPos = 0, endPos = '';
if (localStorage.getItem('startPos')) {
startPos = parseInt(localStorage.getItem('startPos'));
endPos = parseInt(localStorage.getItem('endPos'));
}
fetch('/file.txt', {
headers: {
Range: 'bytes=' + startPos + '-' + endPos
}
})
.then(function(res) {
const data = res.arrayBuffer();
localStorage.setItem('startPos', endPos + 1);
localStorage.setItem('endPos', endPos + 1 + data.byteLength);
return data;
})
.then(function(data) {
// 将数据写入文件
const blob = new Blob([data], { type: 'application/octet-stream' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'file.txt';
link.click();
});三、总结
文件上传下载是前端开发中重要的一环，优化其性能能够提升用户体验，为用户带来更好的网站使用体验。本文介绍了一些文件上传下载的优化技巧，涉及流式传输、文件压缩、分片上传、避免重复下载、使用 CDN 加速和支持断点续传等方面，希望对广大开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654c4b737d4982a6eb5df0b2