利用rust+webassembly进行web开发，如何解决wasm和js交互的额外成本

Question

目前，我正在尝试使用Rust开发web应用程序的一部分，将其编译为wasm部分(有类似的框架，如yew，等等)，但我发现使用组件可能会有更多的消耗，例如，我必须执行单击按钮调用JS函数。JS函数执行一些计算(非常简单的计算)，并将结果呈现给dom。

只使用js的解决方案：

• JS调用另一个JS函数
• 另一个JS函数执行一些计算，并通过文档的一些API直接呈现结果。

使用Rust +组件的解决方案：

• JS调用wasm函数。
• Wasm执行一些计算。计算之后，将结果编码到一个TypedArray中，并调用JS函数来呈现dom。
• JS对TypeArray中的相应内容进行解码，然后将dom呈现给屏幕。

在这里，我们不考虑使用React或Vue，仅仅使用WebAssembly可能会降低性能，这主要体现在：

• 更多函数调用
• 添加了编码/解码过程和可能的内存副本。

We子组件的优点可能是计算速度更快，但由于上述开销的增加，这种优势可能不会节省整个时间，而且在DOM操作方面显然比较慢。

但我仍然对DOM操作进行了比较测试：

JS创建了10,000个p标记，并花费了大约120 JS：

function web_bench() {
  let container = document.getElementById("container");
  let begin = Date.now();
  for(let i = 0; i < 10000; i += 1) {
    let str = "1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890" +
      "123456789012345678901234567890123456abcd123456789012345678901234567890123456789012345678901234567890" +
      "1234567890123456789012345678901234567890123456789012345678哈哈1234567890123456789012345678901234567890" +
      "1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890" +
      "1234567890123456789012345678901234567890123456789哈哈2345678901234567890123456789012345678901234567890" +
      "1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890" +
      "1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890" +
      "1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890" +
      "123456789012345678901234567890123456789012345678901234567890123嘻嘻67890123456789012345678901234567890" +
      "12345678901234567890123456789012345678901234哈哈哈012345678901234567890123456789012345678901234567890";

    let p = document.createElement("p");
    p.innerHTML = str;
    container.appendChild(p);
  }
  let time = Date.now() - begin;
  console.log('cost time:', time);
}

如果我使用铁锈:费用180毫秒

#[wasm_bindgen]
pub fn bench() {
    let document = web_sys::window().unwrap().document().unwrap();
    for i in 0..10000 {
        let str = "1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456abcd1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678哈哈123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789哈哈234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678902345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123嘻嘻6789012345678901234567890123456789012345678901234567890123456789012345678901234哈哈哈012345678901234567890123456789012345678901234567890";
        let p = document
          .create_element("p")
          .unwrap();
        p.set_inner_html(str);
        document
          .get_element_by_id("container")
          .unwrap()
          .append_child(&p);
    }
}

这是否意味着rust+wasm不适合与dom操作频繁交互的web开发，而只适用于计算模块。当前的锈蚀网络框架是如何看待这个问题的？我的分析正确吗？

谢谢你的意见~

Answer 1

有一些东西会增加JS <=> WebAssembly调用的开销，并影响性能：

1. WebAssembly和JavaScript之间的通信涉及相当多的开销，涉及到一个称为通过C++代码进行蹦床的过程。
2. 为了交换数据(简单数字除外)，需要通过线性存储器对值进行编码/解码。

这两种方法都会在每个函数调用的基础上产生可测量的开销。

然而，情况正在改善..。

1. 浏览器供应商是想要移除蹦床。
2. 通过接口类型方案，编码/解码开销将大大减少。

WebAssembly是一种非常新的技术，优化和解决性能问题需要时间。

这是否意味着rust+wasm不适合与dom操作频繁交互的web开发？

目前，有可能是的。在未来，这可能是可行的。

我的分析正确吗？

你目前的观察，它现在有点慢是正确的。