大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

postMessage 是 JavaScript 在多个工作线程之间发送数据的最常用方法，在 Bun v1.2.21 中，postMessage(string) 的性能做到了几乎与字符串大小无关，这对于多线程 JavaScript 服务器和命令行界面 (CLI) 来说是一项重大的性能改进。

 // 主页面发送消息和接收消息
function sendMessage() {
    document.getElementById('iframe').contentWindow.postMessage('你好，子页面！', '*');
}
window.addEventListener('message', function(event) {
    document.getElementById('messages').innerHTML += '<p>收到: ' + event.data + '</p>';
});
// 子页面发送消息和接收消息
function sendMessage() {
    window.parent.postMessage('你好，父页面！', '*');
}
window.addEventListener('message', function(event) {
    document.getElementById('messages').innerHTML += '<p>收到: ' + event.data + '</p>';
});

通过避免对可以安全跨线程共享的字符串进行序列化，postMessage 速度提高了 500 倍，并且在此基准测试中使用的峰值内存减少了约 22 倍。

当开发者在工作线程之间发送字符串时，优化会自动启动：

// 在worker之间发送数据
const response = await fetch("https://api.example.com/data");
const json = await response.text();
postMessage(json); 
// 大型字符串带来500x的性能提升

这对于在工作线程之间传递大型 JSON 的应用程序特别有用，例如： API 服务器、数据处理管道和实时应用程序。

如何在 JavaScriptCore 中实现这一点

postMessage 通常使用结构化克隆算法对数据进行序列化，然后再将其发送到另一个线程。这意味着需要将字符串的每个字节复制到一个新的缓冲区，然后在另一端对其进行反序列化。

// 原始对象
const original = {
    name: "张三",
    age: 25,
    hobbies: ["读书", "游泳"],
    details: {
        city: "北京"
    }
};
// 使用 structuredClone 深拷贝
const cloned = structuredClone(original);
// 修改克隆对象，不会影响原始对象
cloned.name = "李四";
cloned.hobbies.push("编程");
cloned.details.city = "上海";
console.log("原始对象:", original);
// 输出: { name: "张三", age: 25, hobbies: ["读书", "游泳"], details: { city: "北京" } }
console.log("克隆对象:", cloned);
// 输出: { name: "李四", age: 25, hobbies: ["读书", "游泳", "编程"], details: { city: "上海" } }

但问题是，在 JavaScriptCore（Bun 使用的引擎）中，字符串已经是线程安全的引用计数对象。字符串数据本身在创建后是不可变的，并且引用计数使用 std::atomic:

class StringImplShape {
    std::atomic<unsigned> m_refCount;  // 线程安全
    unsigned m_length;                  // 不可变
    union {
        const LChar* m_data8;           // 不可变
        const char16_t* m_data16;       // 不可变
    };
    mutable unsigned m_hashAndFlags;    // 唯一可变的部分
};

因此，如果字符串已经是线程安全的，那么在同一进程的线程之间发送时可以有效避免序列化。

寻找快速路径

并非所有字符串都能安全地共享，主要包括三种需要序列化的类型：

• 原子字符串 ：线程本地属性名称和Symbol
• 子字符串 ：指向具有复杂生命周期的其他字符串
• Rope 字符串 ： 由“foo”+“bar”或 .slice() 等操作创建的字符串

对于其他字符串可以完全跳过序列化，只需确保在共享之前惰性计算哈希值，因为这是唯一可变的部分，例如：

WTF::String toCrossThreadShareable(WTF::String& string)
{
    auto* impl = string.impl();
    // 不能共享原子字符串，symbol和substring字符串
    if (impl->isAtom() || impl->isSymbol() ||
        impl->bufferOwnership() == StringImpl::BufferSubstring)
        return string.isolatedCopy();
    // 在共享之前计算hash
    impl->hash();
    // Prevent this thread from atomizing.
    impl->setNeverAtomicize();
    return string;  
    // 直接共享指针
}

快速路径条件

优化适用于以下情况：

• 使用 postMessage 或 StructuredClone
• 仅发送字符串而非混合数据
• 非子字符串、Row、Atom 或 Symbol
• 向同一进程中的另一个线程发送数据
• string.length >= 256 个字符

以上场景涵盖了在 Worker 之间发送字符串的极其常见的模式，这也是性能提升如此显著的原因。

参考资料

https://bun.com/blog/how-we-made-postMessage-string-500x-faster

https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/structuredClone