WebAssembly 實戰 (WebAssembly in Action)
內容描述
在人們極力渴求提高JavaScript性能的情況下,WebAssembly應運而生,現已得到所有主流Web瀏覽器的支持。由於其卓越的性能和可移植性,WebAssembly也被用於Web瀏覽器之外的許多場景。本書圍繞WebAssembly技術棧介紹如何通過C、C++等語言編寫高性能的瀏覽器端應用程序。你將掌握WebAssembly的基礎知識,學習如何創建原生WebAssembly模塊,與JavaScript組件交互,使用WebAssembly文本格式進行調試,並利用多線程支持機制。
目錄大綱
第1部分起步
第1章初識WebAssembly 2
1.1 WebAssembly是什麼2
1.1.1 WebAssembly的先驅:asm.js 3
1.1.2從asm.js到MVP 3
1.2 WebAssembly解決了哪些問題4
1.2.1性能改進4
1.2.2比JavaScript更快的啟動速度5
1.2.3可以在瀏覽器中使用JavaScript之外的語言5
1.2.4代碼復用的機會5
1.3 WebAssembly的工作原理6
1.3.1編譯器工作原理概覽6
1.3.2模塊的加載、編譯和實例化8
1.4 WebAssembly模塊的結構9
1.4.1前導10
1.4.2已知段10
1.4.3自定義段10
1.5 WebAssembly文本格式10
1.6 WebAssembly如何獲得安全性11
1.7哪些語言可用來創建WebAssembly模塊11
1.8我的模塊可以用在何處12
1.9小結13
第2章初探WebAssembly模塊內部14
2.1已知段15
2.2自定義段18
2.3小結19
第3章創建自己的2 2個WebAssembly模塊20
3.1 Emscripten工具包20
3.2 WebAssembly模塊21
3.3 Emscripten輸出選項23
3.4用Emscripten編譯C/C++並使用HTML模板24
3.5讓Emscripten生成JavaScript plumbing代碼29
3.5.1用Emscripten生成的JavaScript編譯C/C++ 30
3.5.2創建一個供瀏覽器使用的基本HTML網頁32
3.6讓Emscripten只生成WebAssembly文件35
3.6.1用Emscripten將C/C++編譯為副模塊36
3.6.2瀏覽器中的加載與實例化38
3.7功能檢測:如何測試WebAssembly是否可用44
3.8現實用例45
3.9練習46
3.10小結46
第二部分使用模塊
第4章復用現有C++代碼庫48
4.1用C/C++創建帶Emscripten plumbing的模塊50
4.1.1修改C++代碼50
4.1.2將代碼編譯為WebAssembly模塊55
4.1.3創建網頁56
4.1.4創建與模塊交互的JavaScript代碼57
4.1.5查看結果62
4.2用C/C++創建不使用Emscripten的模塊63
4.2.1修改C++代碼64
4.2.2將代碼編譯為WebAssembly模塊69
4.2.3創建與模塊交互的JavaScript代碼69
4.2.4查看結果74
4.3現實用例74
4.4練習74
4.5小結75
第5章創建調用JavaScript的WebAssembly模塊76
5.1用C/C++創建帶Emscripten plumbing的模塊78
5.1.1調整C++代碼79
5.1.2創建將要包含到Emscripten生成的JavaScript文件中的JavaScript代碼81
5.1.3將代碼編譯為WebAssembly模塊82
5.1.4調整網頁的JavaScript代碼83
5.1.5查看結果86
5.2用C/C++創建不帶Emscripten plumbing的模塊86
5.2.1 C++修改88
5.2.2將代碼編譯為WebAssembly模塊89
5.2.3調整將與模塊交互的JavaScript代碼90
5.2.4查看結果92
5.3現實用例93
5.4練習93
5.5小結93
第6章創建通過函數指針與JavaScript交流的WebAssembly模塊95
6.1用C/C++創建帶Emscripten plumbing的模塊96
6.1.1使用JavaScript傳給模塊的函數指針96
6.1 .2調整C++代碼97
6.1.3將代碼編譯為WebAssembly模塊101
6.1.4調整網頁JavaScript代碼102
6.1.5查看結果107
6.2用C/C++創建不帶Emscriptenplumbing的模塊108
6.2.1使用JavaScript傳給模塊的函數指針109
6.2.2修改C++代碼109
6.2.3將代碼編譯為WebAssembly模塊110
6.2.4調整與模塊交互的JavaScript 111
6.2.5查看結果119
6.3現實用例119
6.4練習120
6.5小結120
第三部分高級主題
第7章動態鏈接:基礎122
7.1動態鏈接:優點與缺點12 3
7.2動態鏈接選項123
7.2.1副模塊與主模塊124
7.2.2動態鏈接:dlopen 125
7.2.3動態鏈接:dynamicLibraries 133
7.2.4動態鏈接:WebAssembly JavaScript API 137
7.3動態鏈接回顧143
7.4現實用例144
7.5練習144
7.6小結144
第8章動態鏈接:實現145
8.1創建WebAssembly模塊147
8.1. 1將文件validate.cpp中的邏輯分割為兩個文件149
8.1.2為Place Order表邏輯創建新的C++文件151
8.1.3用Emscripten生成WebAssembly副模塊154
8.1.4定義一個JavaScript函數來處理驗證問題158
8.1.5用Emscripten生成WebAssembly主模塊158
8.2調整網頁160
8.2.1調整網頁的JavaScript代碼163
8.2.2查看結果171
8.3現實用例172
8.4練習172
8.5小結173
第9章線程:Web worker與pthread 174
9.1 Web worker的好處175
9.2使用Web worker的考量176
9.3用Web worker預取WebAssembly模塊176
9.3.1調整calculate_primes邏輯178
9.3.2用Emscripten生成WebAssembly文件180
9.3.3 22文件到正確位置180
9.3.4為網頁創建HTML文件181
9.3.5為網頁創建JavaScript文件182
9.3.6創建Web worker的JavaScript文件184
9.3.7查看結果185
9.4使用pthread 186
9.4.1調整calculate_primes邏輯以創建並使用4個pthread線程187
9.4.2用Emscripten生成WebAssembly文件190
9.4.3查看結果191
9.5現實用例193
9.6練習194
9.7小結194
第10章Node.js中的WebAssembly模塊195
10.1回顧前面所學內容196
10.2服務器端驗證196
10.3使用Emscripten創建模塊197
10.3.1加載WebAssembly模塊198
10.3.2調用WebAssembly模塊內函數199
10.3.3調入JavaScript代碼202
10.3.4調用JavaScript函數指針204
10.4使用WebAssembly JavaScript API 206
10.4.1加載並實例化WebAssembly模塊207
10.4.2調用WebAssembly模塊內函數208
10.4.3 WebAssembly模塊調入JavaScript代碼212
10.4.4 WebAssembly模塊調用JavaScript函數指針215
10.5現實用例218
10.6練習219
10. 7小結219
第四部分調試與測試
第11章WebAssembly文本格式222
11.1用WebAssembly文本格式創建遊戲的核心邏輯225
11.1.1模塊段225
11.1.2註釋227
11.1.3函數簽名227
11.1.4 module節點228
11.1.5 import節點229
11.1.6 global節點232
11.1.7 export節點233
11.1.8 start節點234
11.1.9 code節點235
11.1.10 type節點252
11.1.11 data節點254
11.2從文本格式生成WebAssembly模塊255
11.3 Emscripten生成模塊256
11.3.1創建C++文件256
11.3.2生成WebAssembly模塊257
11.4創建HTML和JavaScript文件258
11.4.1修改HTML文件258
11.4.2創建JavaScript文件260
11.5查看結果265
11.6現實用例265
11.7練習265
11.8小結266
第12章調試267
12.1擴展遊戲268
12.2調整HTML代碼269
12.3顯示試驗次數270
12.3.1 JavaScript函數generateCards 271
12.3.2調整文本格式272
12.3.3生成Wasm文件272
12.3.4測試修改274
12.4增加試驗次數275
12.4.1 JavaScript函數updateTriesTotal 276
12.4.2調整文本格式277
12.4.3生成Wasm文件278
12.4.4測試修改279
12.5更新總結屏幕286
12.5.1 JavaScript函數levelComplete 287
12.5.2調整文本格式288
12.5.3生成Wasm文件289
12.5.4測試修改290
12.6練習290
12.7小結291
第13章測試——然後呢292
13.1安裝JavaScript測試框架293
13.1.1文件package.json 294
13.1.2安裝Mocha和Chai 295
13.2創建並運行測試295
13.2.1編寫測試296
13.2.2從命令行運行測試299
13.2.3加載測試的HTML頁面300
13.2.4從瀏覽器運行測試302
13.2.5讓測試通過303
13.3下一步是什麼304
13.4練習304
13.5小結304
附錄A安裝與工具設置306
附錄B ccall、cwrap以及直接函數調用314
附錄C Emscripten宏320
附錄D練習答案335
附錄E文本格式進階354
作者介紹
C.傑勒德.加倫特(C. Gerard Gallant),微軟認證專家,Dovico公司高級軟件工程師,DZone技術網站專欄作者。
【譯者簡介】
計算機專業碩士,軟件工程師,現居於上海,另譯有《你不知道的JavaScript》(中捲和下卷)。