在Chrome 70中体验WebAssembly线程

简介: Chrome 70支持WebAssembly线程,我们鼓励感兴趣的开发人员开始使用它们并向我们提供反馈。

image.png

原文作者:Alex Danilo

译者:UC 国际研发 Jothy

----

WebAssembly(Wasm)支持编译用C++和其他语言编写的代码,以便在Web上运行。 本机应用程序的一个非常有用的功能是使用线程的能力 - 用于并行计算的原语。大多数C和C++开发人员都熟悉pthreads,它是应用程序中线程管理的标准化API。

WebAssembly社区组一直致力于将线程引入Web以实现真正的多线程应用程序。 作为这项工作的一部分,V8已经为WebAssembly引擎中的线程实现了必要的支持,可通过Origin Trial获得。 Origin Trials允许开发人员在完全标准化之前尝试新的Web功能。 这使我们能够收集来自勇敢的开发人员的实际反馈,这对于验证和改进新功能至关重要。

Origin Trial:
https://github.com/GoogleChrome/OriginTrials

Chrome 70支持WebAssembly线程,我们鼓励感兴趣的开发人员开始使用它们并向我们提供反馈。

线程? Workers怎么样?
从 2012 年的 Chrome 4 开始,浏览器们就利用 web workers 支持了并行;事实上听到类似于“在主线程上”的词语是很正常的。但是,Web Workers不会在它们之间共享可变数据,而是依赖于消息传递进行通信。 实际上,Chrome为每个引擎分配了一个新的V8引擎(称为隔离区)。 Isolates既不共享编译代码也不共享JavaScript对象,因此它们不能共享可变数据,如pthreads。

另一方面,WebAssembly线程是可以共享相同Wasm内存的线程。 共享内存的底层存储是通过SharedArrayBuffer完成的,SharedArrayBuffer是一个JavaScript原语,允许在worker之间共享单个ArrayBuffer的内容。 每个WebAssembly线程都在Web Worker中运行,但是它们共享的Wasm内存允许它们像在本机平台上一样工作。这意味着使用Wasm线程的应用程序负责管理对任何传统线程应用程序的共享内存的访问。有许多用C或C++编写的现有代码库使用pthreads,这些代码库可以编译为Wasm并以真正的线程模式运行,允许更多内核同时处理相同的数据。

一个简单的例子
这是一个简单的使用“C”编写的示例:

image.png

该代码以main() 函数开头,该函数声明了2个变量fg_val和bg_val。 还有一个名为fibonacci() 的函数,在本例中将由两个线程调用。 main() 函数使用pthread_create()创建一个后台线程,其任务是计算与bg_val变量值对应的斐波纳契数序列值。同时,在前台线程中运行的main() 函数为fg_val变量计算它。 后台线程完成运行后,将打印出结果。

编译线程支持
首先,您应该安装emscripten SDK,建议安装1.38.11或更高版本。要构建我们的示例代码,并且启用了在浏览器中运行的线程,我们需要将一些额外的标志传递给emscripten emcc编译器。 我们的命令行如下所示:

image.png

命令行参数'-s USE_PTHREADS = 1'打开编译的WebAssembly模块的线程支持,参数'-s PTHREAD_POOL_SIZE = 2'告诉编译器生成两(2)个线程池。

当程序运行时,它将加载WebAssembly模块,为线程池中的每个线程创建一个Web Worker,与每个worker共享模块,在这种情况下它是2,并且每次都会使用它们调用pthread_create()。 每个worker都使用相同的内存实例化Wasm模块,允许它们合作。 V8 7.0中的最新更改共享在工作程序之间传递的Wasm模块的编译本机代码,这使得即使是非常大的应用程序也可以扩展到许多工作程序。注意,确保线程池大小等于应用程序所需的最大线程数,或者线程创建可能失败是有意义的。同时,如果线程池大小太大,您将创建不必要的Web Workers,除了使用内存之外什么也不做。

如何体验?
测试我们的WebAssembly模块的最快方法是在Chrome 70以后启用实验性WebAssembly线程支持。 在浏览器中的访问URLchrome://flags,如下所示:

image.png

接下来,找到实验性WebAssembly线程设置,如下所示:

image.png

将设置更改为已启用,如下所示,然后重新启动浏览器。
image.png

浏览器重新启动后,我们可以尝试使用最小的HTML页面加载线程化的WebAssembly模块,代码如下:

<!DOCTYPE html>
<html>
  <title>Threads test</title>
  <body>
    <script src="test.js"></script>
  </body>
</html>

要尝试此页面,您需要启用Web服务器并从浏览器访问它。 这样才能使WebAssembly模块加载和运行。 打开DevTools,您应该在控制台中看到类似下面的输出结果:

image.png

带有线程的WebAssembly程序已成功执行! 我们建议您使用上面列出的步骤尝试自己的线程应用程序。

使用Origin Trial进行测试
以开发调试为目的可以通过在浏览器中启用实验标记来体验线程,但是如果您想在现实场景中测试您的应用程序,则可以使用origin trial来完成。

Origin trials允许您通过获取与您的域绑定的测试令牌,与您的用户一起尝试实验性功能。 然后,您可以部署您的应用并期望它可以在支持您正在测试的功能的浏览器中工作(在本例中为Chrome 70以上)。

WebAssembly线程是一个非常有用的新原语,用于将应用程序移植到Web上。 现在可以在WebAssembly环境中运行需要pthreads支持的C和C ++应用程序和库。

英文原文:

https://developers.google.com/web/updates/2018/10/wasm-threads

目录
相关文章
|
Web App开发 网络协议 JavaScript
Chrome 96 支持 WebAssembly 引用类型了!
11月16日正式发布的Chrome 96,带来了哪些新特性呢?
312 0
Chrome 96 支持 WebAssembly 引用类型了!
|
Web App开发 人工智能 网络协议
Chrome 91 支持 WebAssembly SIMD,加速 Web 在 AI 等领域的应用
5月25日正式发布的Chrome 91,带来了哪些有意思的新特性呢?
|
Web App开发 开发者 iOS开发
|
2月前
|
Web App开发 JavaScript 前端开发
从零开始,轻松打造个人化Chrome浏览器插件
从零开始,轻松打造个人化Chrome浏览器插件
71 0
|
4月前
|
Web App开发 JavaScript
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
300 0
|
4月前
|
Web App开发
喂~讲真~我很讨厌chrome谷歌浏览器的默认填充输入框input样式咧,敲击讨厌滴啦,怎么去掉介个样式尼
喂~讲真~我很讨厌chrome谷歌浏览器的默认填充输入框input样式咧,敲击讨厌滴啦,怎么去掉介个样式尼
|
3月前
|
Web App开发 前端开发
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
154 0
|
3月前
|
Web App开发 前端开发 搜索推荐
Chrome 浏览器中的一个隐藏设置页面
Chrome 浏览器中的一个隐藏设置页面
104 8
|
4月前
|
Web App开发
Google Chrome 浏览器 119.0.6045.106 版本提示 STATUS_INVALID_IMAGE_HASH 崩溃
Google Chrome 浏览器 119.0.6045.106 版本提示 STATUS_INVALID_IMAGE_HASH 崩溃
68 0
|
4月前
|
Web App开发 Linux Android开发
Chrome谷歌浏览器的WeChat微信模拟器,既可以设置模拟很多型号的手机设备Mozilla
Chrome谷歌浏览器的WeChat微信模拟器,既可以设置模拟很多型号的手机设备Mozilla