在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,带来了哪些新特性呢?
362 0
Chrome 96 支持 WebAssembly 引用类型了!
|
Web App开发 人工智能 网络协议
Chrome 91 支持 WebAssembly SIMD,加速 Web 在 AI 等领域的应用
5月25日正式发布的Chrome 91,带来了哪些有意思的新特性呢?
|
搜索推荐 Web App开发 开发工具
V8引擎发布7.0正式版,支持WebAssembly线程预览、优化数组排序算法
该版本将会在几周内与Chrome 70稳定版一起发布,在此之前一直作为Beta版本与Chrome进行联调测试。V 7.0包涵了许多对开发人员很有帮助的新功能。本文带你一起了解其中的一些亮点。
1261 0
|
Web App开发 开发者 iOS开发
|
1月前
|
Web App开发 数据采集 存储
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
本文探讨了如何利用Chrome DevTools Protocol (CDP) 与 Selenium WebDriver 提升浏览器自动化效率,结合代理IP技术高效采集微博数据。通过CDP,开发者可直接操作浏览器底层功能,如网络拦截、性能分析等,增强控制精度。示例代码展示了如何设置代理IP、cookie及user-agent来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
292 3
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
|
9天前
|
Web App开发 开发者
|
11天前
|
Web App开发 JSON 安全
Chrome浏览器的跨域问题
【10月更文挑战第6天】
|
16天前
|
Web App开发 缓存 安全
Chrome浏览器启动参数大全
这是一组用于定制浏览器行为的命令行参数,包括但不限于:不停用过期插件、放行非安全内容、允许应用中心脚本、停用GPU加速视频、禁用桌面通知、禁用拓展及各类API、调整缓存设置、启用打印预览、隐身模式启动、设定语言、使用代理服务器、无头模式运行等。通过这些参数,用户可以根据需求灵活调整浏览器功能与性能。
|
1月前
|
Web App开发 存储 前端开发
Chrome浏览器的跨域问题
Chrome浏览器的跨域问题
|
2月前
|
Web App开发
Chrome——谷歌浏览器chrome如何模拟其他客户端
Chrome——谷歌浏览器chrome如何模拟其他客户端
91 1
Chrome——谷歌浏览器chrome如何模拟其他客户端