CN112269602B - 一种WebAssembly加载方法、装置及存储介质 - Google Patents
一种WebAssembly加载方法、装置及存储介质 Download PDFInfo
- Publication number
- CN112269602B CN112269602B CN202011246964.6A CN202011246964A CN112269602B CN 112269602 B CN112269602 B CN 112269602B CN 202011246964 A CN202011246964 A CN 202011246964A CN 112269602 B CN112269602 B CN 112269602B
- Authority
- CN
- China
- Prior art keywords
- file
- wasm
- content
- loading
- loading method
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 37
- 238000003860 storage Methods 0.000 title claims abstract description 7
- 238000000034 method Methods 0.000 claims abstract description 48
- 238000010276 construction Methods 0.000 claims abstract description 21
- 230000006837 decompression Effects 0.000 claims abstract description 14
- 238000004806 packaging method and process Methods 0.000 claims abstract description 8
- 238000004590 computer program Methods 0.000 claims description 6
- 238000004458 analytical method Methods 0.000 claims description 3
- 239000000126 substance Substances 0.000 description 6
- 230000000007 visual effect Effects 0.000 description 6
- 230000003993 interaction Effects 0.000 description 5
- 238000004519 manufacturing process Methods 0.000 description 5
- 238000005457 optimization Methods 0.000 description 3
- 239000013078 crystal Substances 0.000 description 2
- 238000012800 visualization Methods 0.000 description 2
- 238000002441 X-ray diffraction Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/51—Source to source
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Devices For Executing Special Programs (AREA)
- Stored Programmes (AREA)
Abstract
本发明提供一种WebAssembly加载方法、装置及存储介质，包括如下几个步骤：A1：采用emscripten编译器将c++源码编译到wasm文件和中间层build.js文件;A2,读取wasm文件二进制内容，压缩内容，再转换为十六进制字符串;A3,读取中间层build.js内容，与转换后的wasm字符串合并;A4,进行封装，在合并的字符串前面注入自动解压代码;A5,将封装后的字符串内容保存到本地文件，完成整个构建过程。
Description
技术领域
本发明属于WebAssembly加载技术领域，尤其涉及一种WebAssembly加载方法、装置及存储介质。
背景技术
使用WebAssembly可以更快地在 web 应用上运行代码，其有如下特点：
文件加载 - WebAssembly 文件体积更小，所以下载速度更快。
解析 - 解码 WebAssembly 比解析 JavaScript 要快。
编译和优化 - 编译和优化所需的时间较少，因为在将文件推送到服务器之前已经进行了更多优化，JavaScript 需要为动态类型多次编译代码。
重新优化 - WebAssembly 代码不需要重新优化，因为编译器有足够的信息可以在第一次运行时获得正确的代码。
执行 - 执行可以更快，WebAssembly 指令更接近机器码。
垃圾回收 - 目前 WebAssembly 不直接支持垃圾回收，垃圾回收都是手动控制的，所以比自动垃圾回收效率更高。
WebAssembly在2019年12月正式纳入W3C标准，在前端领域的应用逐渐普及，业界主流的应用方法为：通过emscripten编译器将c++源码编译到wasm文件和中间层build.js文件；Web应用中引入中间层build.js文件；build.js文件内部通过网络请求完成wasm的加载；以此实现web应用中加载WebAssembly。
已有技术的加载过程如图1和图2所示，以上方法存在的不足：对前端模块化兼容性不好，不能将wasm文件与web应用完全解耦， 对于单页面web应用（SPA），需要将wasm文件单独拆出，与静态文件部署到同级目录下。操作繁琐，且通过网络单独异步请求wasm文件的速度受网络环境影响较大，不利于开发体验和用户体验。
发明内容
为了解决以上技术问题，本发明提供了一种模块化的WebAssembly的构建过程，包括如下几个步骤：
A1， emscripten编译器将c++源码编译到wasm文件和中间层build.js文件;
A2,读取wasm文件二进制内容，压缩内容，再转换为十六进制字符串;
A3,读取中间层build.js内容，与转换后的wasm字符串合并;
A4,进行封装，在合并的字符串前面注入自动解压代码;
A5,将封装后的字符串内容保存到本地文件，完成整个构建过程。
其中，使用的现有技术进行编译的，使用的编译工具就是 “emscripten编译器”。
优选的，所述步骤A4中，封装代码的作用就是A2的反向过程：从十六进制提取出压缩内容，再解压，解压后得到的内容即为wasm文件原始的二进制内容，将wasm二进制内容赋值给Module全局变量。优选的，所述步骤A4中，合并就是将封装的代码或字符串添加到build.js内容或字符串前面，然后保存为本地文件，也就是构建生成的文件，即步骤A5。
相应的，本发明还提供了一种WebAssembly的加载过程,包括如下步骤：
B1,构建的生成文件被加载到web浏览器后，会进行解析执行;
B2,执行过程中会自动运行构建时封装的自动解压代码，进行wasm内容的解压和实例化，完成加载过程。
优选的，所述步骤B1中，解析是浏览器自动完成的，当“构建生成的javascript文件”被加载到浏览器后，浏览器会自动解析并执行该javascript文件的内容
优选的，所述浏览器执行“构建生成的文件”时，首先会执行步骤A4中封装的代码：先从十六进制字符串中提取出压缩内容，然后将压缩内容解压，得到wasm二进制内容，并赋值给Module全局变量。此过程完成解压，执行完“构建生成的文件”后，会执行emscripten编译生成的“中间层build.js”代码，该中间层会判断Module全局变量中是否已经存在wasm二进制内容。如果不存在，则通过http网络加载wasm二进制内容，加载完成之后再进行实例化；如果存在，则直接使用Module全局变量中的wasm二进制内容进行实例化。实例化的方法是WEB浏览器自带的。
由于所述步骤A4中，已经将wasm二进制内容存入到Module全局变量，所以中间层代码会直接使用该二进制内容进行实例化。完成加载过程。
在解析和加载过程中，中间层代码“build.js”可以直接使用从封装中提取的wasm二进制内容，不需要额外通过http网络请求去加载wasm二进制内容。所以web应用只需要将“构建生成的（javascript）文件”部署到一起即可， 对于单页面WEB应用还可以将“构建生成的（javascript）文件”一起构建到web单页面文件中，不需要部署wasm二进制文件，这样实现了web应用与wasm文件的解耦。
本发明还提供一种WebAssembl加载装置，包括：
编译模块：采用emscripten编译器将c++源码编译到wasm文件和中间层build.js文件;
第一读取模块：读取wasm文件二进制内容，压缩内容，再转换为十六进制字符串;
第二读取模块：读取中间层build.js内容，与转换后的wasm字符串合并;
处理模块：进行封装，在合并的字符串前面注入自动解压代码;
保存模块：将封装后的字符串内容保存到本地文件。
一种存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现本发明所述的加载方法。
一种加载装置，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现本发明所述的加载方法。
本发明带来了如下有益效果：
1.通过将wasm文件与构建的目标文件的合并，可以将合并后的目标文件作为模块独立发布与部署；在解析和加载过程中，中间层代码“build.js”可以直接使用从封装中提取的wasm二进制内容，不需要额外通过http网络请求去加载wasm二进制内容。所以web应用只需要将“构建生成的（javascript）文件”部署到一起即可， 对于单页面WEB应用还可以将“构建生成的（javascript）文件”一起构建到web单页面文件中，不需要部署wasm二进制文件，这样实现了web应用与wasm文件的解耦。
2.去除了单独网络请求wasm文件的过程，提升了加载速度。
3.本发明兼容Web端、Electron端、Node端运行环境，均以相同方式引入合并后的模块。此处“相同方法”指的是加载wasm二进制文件的方法。对于已有技术： 在web/electron端是通过http网络单独加载wasm二进制内容的，在node端是通过读取本地文件来获取wasm二进制内容的。所以需要针对不同的运行环境以不同的方式部署wasm二进制文件，即：在web/electron环境下将wasm文件部署到web服务器，在node环境下将wasm文件部署到对应的文件目录下。
4.对于本发明的方法：由于wasm二进制文件已经封装到“构建生成的文件”中，而构建生成的文件可以直接被其他js调用或者合并到其他js文件，不需要针对不同环境做不同的部署。
附图说明
图1是已有技术的加载过程。
图2是已有技术的加载过程。
图3说明了该方法的构建过程。
图4是本发明的方法中的加载过程。
具体实施方式
下面结合附图，对本发明的较优的实施例作进一步的详细说明：
图3说明了该方法的构建过程。首先，使用emscripten编译器将c++源码编译到wasm文件和中间层build.js文件。读取wasm文件二进制内容，压缩内容，再转换为十六进制字符串。读取中间层build.js内容，与转换后的wasm字符串合并。再进行封装，在合并的字符串前面注入自动解压代码。将封装后的字符串内容保存到本地文件，完成整个构建过程。
图4说明了加载过程。构建的生成文件被加载到web浏览器后，会进行解析执行，执行过程中会自动运行构建时封装的自动解压代码，进行wasm内容的解压和实例化，完成加载过程。
实施例1
RDKit是一套开源的化学信息软件，支持分子的操作、修改和格式转换。在XFEP和通用力场项目中，需要将一批化学分子的2D图像展示到人机交互界面上。项目中使用了RDKit工具，将化学分子的原始数据转换为2D图像数据，以便在人机交互界面进行展示。实施过程中，采用了该方法所述的技术方案，具体步骤如下:
1. 使用emscripten编译器将RDKit的c++源码编译到rdkit.wasm文件和中间层build.js文件;
2. 读取rdkit.wasm文件二进制内容，压缩内容，再转换为十六进制字符串;
3. 读取中间层build.js内容，与转换后的wasm字符串合并;
4. 进行封装，在合并的字符串前面注入自动解压代码;
5. 将封装后的字符串内容保存为本地文件rdkit.js，完成整个构建过程;
6. 将构建生产的文件（rdkit.js）与人机交互界面软件代码（前端代码）一起部署到生产环境（用户个人电脑）；
7. 当用户打开人机交互软件时，rdkit.js被加载到软件中并自动执行；
8. 执行rdkit.js后，rdkit.wasm内容被解压和提取出来，并进行实例化；
9. 人机交互软件通过实例化的rdkit来将化学分子数据转换为2D图像，并在界面上进行展示；
10. 以上是从构建wasm到加载使用的过程。
实施例2
晶体数据库是一套报告可视化软件，可视化界面向用户展示报告的分子统计图表和分子3D视图，软件运行在WEB浏览器环境。项目中使用了theforce算法库，将化学分子的原始数据转换为3D可视化数据结构。实施过程中，采用了该方法所述的技术方案，具体步骤如下：
1. 使用emscripten编译器将theforce的c++源码编译到theforce.wasm文件和中间层build.js文件;
2. 读取theforce.wasm文件二进制内容，压缩内容，再转换为十六进制字符串;
3. 读取中间层build.js内容，与转换后的wasm字符串合并;
4. 进行封装，在合并的字符串前面注入自动解压代码;
5. 将封装后的字符串内容保存为本地文件theforce.js，完成整个构建过程;
6. 将构建生产的文件（thefroce.js）与可视化界面软件代码（前端代码）一起部署到生产环境（WEB服务器）；
7. 当用户通过浏览器访问晶体数据库网站时，可视化界面软件和thefroce.js被加载到浏览器并自动执行；
8. 执行theforce.js后，theforce.wasm内容被解压和提取出来，并进行实例化；
9. 可视化软件通过实例化的theforce来将化学分子数据转换为3D可视化数据，并在界面上进行3D展示；
10. 以上是从构建wasm到加载使用的过程。
实施例3：
XRD客户端是一套X射线衍射文件（简称XRD文件）可视化的软件，可视化界面向用户展示XRD文件的重叠视图和平行视图，软件运行在用户本地电脑。项目中使用了xrdio第三方开源库，将不同类型的xrd文件的原始数据转换为通用的数据结构，方便展示。实施过程中，采用了该方法所述的技术方案，具体步骤如下：
1. 使用emscripten编译器将xrdio的c++源码编译到xrdio.wasm文件和中间层build.js文件;
2. 读取xrdio.wasm文件二进制内容，压缩内容，再转换为十六进制字符串;
3. 读取中间层build.js内容，与转换后的wasm字符串合并;
4. 进行封装，在合并的字符串前面注入自动解压代码;
5. 将封装后的字符串内容保存为本地文件xrdio.js，完成整个构建过程;
6. 将构建生产的文件（xrdio.js）与可视化界面软件代码（前端代码）一起部署到生产环境（用户本地电脑）；
7. 当用户打开XRD客户端软件时，可视化界面软件和xrdio.js被加载到客户端并自动执行；
8. 执行xrdio.js后，xrdio.wasm内容被解压和提取出来，并进行实例化；
9. 可视化软件通过实例化的xrdio来将不同类型的xrd文件的原始数据转换为通用的数据结构，并在重叠视图和平行视图展示；
10. 以上是从构建wasm到加载使用的过程。
以上内容是结合具体的优选实施方式对本发明所作的进一步详细说明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属技术领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干简单推演或替换，都应当视为属于本发明的保护范围。
Claims (5)
1.一种WebAssembly的构建方法，其特征在于，包括如下几个步骤：
A1：采用emscripten编译器将c++源码编译到wasm文件和中间层build.js文件；
A2，读取wasm文件二进制内容，压缩内容，再转换为十六进制字符串；
A3，读取中间层build.js内容，与转换后的wasm字符串合并；
A4，进行封装，在合并的字符串前面注入自动解压代码；
A5，将封装后的字符串内容保存到本地文件，完成整个构建过程。
2.一种WebAssembly的加载方法，其特征在于，所述WebAssembly采用如权利要求1所述的WebAssembly的构建方法构建，所述加载方法包括如下步骤：
B1，构建的生成文件被加载到web浏览器后，会进行解析执行；
B2，执行过程中会自动运行构建时封装的自动解压代码，进行wasm内容的解压和实例化。
3.如权利要求2所述的加载方法，其特征在于，所述步骤B1中，所述解析是浏览器自动完成的，当构建生成的文件被加载到浏览器后，浏览器会自动解析并执行该构建生成的文件的内容。
4.一种存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求2所述的加载方法。
5.一种加载装置，包括存储器、处理器及存储在所述存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求2所述的加载方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011246964.6A CN112269602B (zh) | 2020-11-10 | 2020-11-10 | 一种WebAssembly加载方法、装置及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011246964.6A CN112269602B (zh) | 2020-11-10 | 2020-11-10 | 一种WebAssembly加载方法、装置及存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112269602A CN112269602A (zh) | 2021-01-26 |
| CN112269602B true CN112269602B (zh) | 2023-12-29 |
Family
ID=74339763
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011246964.6A Active CN112269602B (zh) | 2020-11-10 | 2020-11-10 | 一种WebAssembly加载方法、装置及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112269602B (zh) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113779168A (zh) * | 2021-08-26 | 2021-12-10 | 广州和辰信息科技有限公司 | 一种基于WebAssembly的矢量空间数据解析方法 |
| CN114189369B (zh) * | 2021-11-30 | 2024-04-26 | 中国建设银行股份有限公司 | 一种浏览器下的安全通讯方法及装置 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2018096232A1 (fr) * | 2016-11-28 | 2018-05-31 | Wallix | Intégration d'une couche protocolaire réseau standard dans un navigateur web par compilation vers webassembly et utilisation d'un websocket |
| CN108614960A (zh) * | 2018-05-11 | 2018-10-02 | 西北大学 | 一种基于前端字节码技术的JavaScript虚拟化保护方法 |
| CN109284104A (zh) * | 2018-09-28 | 2019-01-29 | 北京航空航天大学青岛研究院 | 基于网页汇编语言控制页面跳转的方法 |
| CN111176625A (zh) * | 2019-12-31 | 2020-05-19 | 杭州趣链科技有限公司 | 一种在浏览器端高效编译Solidity智能合约的方法 |
| CN111459463A (zh) * | 2019-01-21 | 2020-07-28 | 中科星图股份有限公司 | 算法模块生成方法和线状符号绘制方法 |
| CN111724248A (zh) * | 2020-06-29 | 2020-09-29 | 深圳壹账通智能科技有限公司 | 机器学习算法的部署方法、微表情识别方法及终端设备 |
-
2020
- 2020-11-10 CN CN202011246964.6A patent/CN112269602B/zh active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2018096232A1 (fr) * | 2016-11-28 | 2018-05-31 | Wallix | Intégration d'une couche protocolaire réseau standard dans un navigateur web par compilation vers webassembly et utilisation d'un websocket |
| CN108614960A (zh) * | 2018-05-11 | 2018-10-02 | 西北大学 | 一种基于前端字节码技术的JavaScript虚拟化保护方法 |
| CN109284104A (zh) * | 2018-09-28 | 2019-01-29 | 北京航空航天大学青岛研究院 | 基于网页汇编语言控制页面跳转的方法 |
| CN111459463A (zh) * | 2019-01-21 | 2020-07-28 | 中科星图股份有限公司 | 算法模块生成方法和线状符号绘制方法 |
| CN111176625A (zh) * | 2019-12-31 | 2020-05-19 | 杭州趣链科技有限公司 | 一种在浏览器端高效编译Solidity智能合约的方法 |
| CN111724248A (zh) * | 2020-06-29 | 2020-09-29 | 深圳壹账通智能科技有限公司 | 机器学习算法的部署方法、微表情识别方法及终端设备 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112269602A (zh) | 2021-01-26 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10810359B2 (en) | System and method for provisioning a mobile software application to a mobile device | |
| AU2004202235B2 (en) | Web page rendering mechanism using external programmatic themes | |
| US7814404B2 (en) | System and method for applying workflow of generic services to component based applications for devices | |
| JP5225399B2 (ja) | デスクトップ・アプリケーション移行のためのシステムと方法 | |
| US5987256A (en) | System and process for object rendering on thin client platforms | |
| CN109766099B (zh) | 前端源码编译方法、装置、存储介质及计算机设备 | |
| US20140089395A1 (en) | Framework for thin-server web applications | |
| CN112269602B (zh) | 一种WebAssembly加载方法、装置及存储介质 | |
| JPH08339304A (ja) | 機械独立コードを含むプラットフォーム標準オブジェクト・ファイルを生成する方法および装置 | |
| JP2012529093A (ja) | スクリーンキャプチャに関する方法、システムおよびコンピュータ・プログラム | |
| CN112905179A (zh) | 移动端h5页面生成方法、装置、电子设备和存储介质 | |
| WO2022099459A1 (zh) | 一种WebAssembly加载方法、装置及存储介质 | |
| US20220027172A1 (en) | Assigning computing resources to execution of evaluators for image animation | |
| CN113761419A (zh) | 拓扑信息的显示方法、装置、电子设备及存储介质 | |
| CN117519691B (zh) | 应用程序处理方法、装置、计算机设备和存储介质 | |
| CN113741900B (zh) | 一种前端页面应用的开发方法、装置及相关设备 | |
| EP1698975A1 (en) | System and method for applying workflow of generic services to component based applications | |
| CN112947938B (zh) | 一种文件转化方法、装置、电子设备及存储介质 | |
| CN114296694A (zh) | 小程序的生成方法和加载方法 | |
| CN117195239A (zh) | 微应用资源包生成方法、装置、计算机设备和存储介质 | |
| CN115309396A (zh) | 页面构建方法及电子设备和计算机可读存储介质 | |
| CN113761437A (zh) | 一种信息处理方法及装置、存储介质 | |
| CN118057306A (zh) | 安装包的生成方法、装置、服务器、介质和程序产品 | |
| CN117707531A (zh) | 一种基于uni-app的小程序开发、编译和运行系统 | |
| CN116107577A (zh) | 基于汽车平台的代码文件的生成方法、装置、设备及介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |