浏览器可以做到这一点吗？
自从几年前我开始着手开发网页桌面环境以来，我就一直对现代网页浏览器的功能和局限性充满好奇。这些年来，我们取得的进步以及如今一些浏览器所具备的功能，都让我感到无比惊喜。
以下是我列出的浏览器能够做到的惊人事情！
本地目录访问
请勿将此与文件和目录条目 API混淆。这个相对较新且仍在开发中的规范名为文件系统访问 API，它允许“读取文件、写入或保存文件以及访问目录结构”。目前，包括 Edge、Chrome 和 Opera 在内的 Chromium 内核浏览器均支持此 API。此外，自 2021 年 12 月起， Safari 浏览器15.2版本也开始部分支持此 API。上周，该规范的部分内容已移交至WHATWG，这可以被视为朝着更好地支持所有浏览器迈出的重要一步。
const dirHandle = await window.showDirectoryPicker();
for await (const [key, value] of dirHandle.entries()) {
console.log({ key, value });
}
多线程
我最近一直在尝试使用 Web Workers，发现它们能显著提升性能，具体效果取决于你能将哪些类型的工作负载卸载到它们上面。虽然可以通过引用.js文件来创建 Worker，但我更喜欢直接将函数转换为 Worker 可以加载的字符串。
我发现，将three.js 动画 3D 背景移到 web worker 中，并通过OffscreenCanvas将 canvas 传递给 worker，可以大大提高加载速度。但OffscreenCanvas目前在 Firefox 或 Safari 上不可用，因此传统的主线程渲染方法目前仍需要作为备选方案。
const workerFunction = () =>
console.log(`typeof window === ${typeof window}`);
const workerUrl = URL.createObjectURL(
new Blob(["(", workerFunction.toString(), ")()"], {
type: "application/javascript",
})
);
new Worker(workerUrl, { name: "ExampleWorker" });
模拟、操控与压缩
早在 WebAssembly 流行之前，人们就已经开始将一些非常棒的东西移植到WebAssembly 上，这些程序通常.wasm需要借助一个.js文件才能在浏览器中运行。这使得将现有的代码库（例如 C、C++ 和 Rust 等语言编写的代码）转换为可在浏览器中运行的代码变得更加容易。
例如，虽然Adobe Flash已停止在浏览器中运行，但您现在可以使用Ruffle，它使用 Rust 编写，并已编译为可在浏览器中运行。另一个非常酷的例子是名为v86的 x86 模拟器，它使用 C 和 Rust 编写，能够在浏览器中运行各种操作系统，例如 Linux。
此外，借助WebAssembly的强大功能，媒体格式的转换/编辑不再是后端独有的职能。理论上，大多数此类操作都可以在前端完成。
说到音频/视频处理，桌面端常用的可靠工具是FFmpeg，它也已被移植到浏览器端。不过，如果需要多线程，则需要启用特殊的 CORS 标头才能访问 SharedArrayBuffer 。对于桌面端的图像处理，流行的ImageMagick也已被移植到浏览器端。
有时我们需要将多个文件合并成一个压缩文件。实际上，客户端有很多压缩工具可供选择（例如jszip和pako），但就速度、文件大小和兼容性而言，我目前最喜欢的.zip是fflate。当然，如果您想处理其他格式的文件，也有相应的库可以解压缩7-Zip、RAR 和 TAR文件。
行动中的未来
感谢您阅读这篇文章，文中我介绍了一些我最感兴趣的浏览器技术。如果您想尝试这些技术，我已将它们全部应用到我的网站上。此外，我还在 YouTube 上直播我的网页开发和编程之旅，欢迎访问我的频道。