原生技術&內核 - 3 - 徐君 - TypeScript+WebAssembly_前端框架技術底座的新方向 .pdf

《原生技術&內核 - 3 - 徐君 - TypeScript+WebAssembly_前端框架技術底座的新方向 .pdf》由會員分享，可在線閱讀，更多相關《原生技術&內核 - 3 - 徐君 - TypeScript+WebAssembly_前端框架技術底座的新方向 .pdf（23頁珍藏版）》請在三個皮匠報告上搜索。

1、徐君TypeScript+WebAssembly:前端框架技術底座的新向目錄 JavaScript在端側面臨的挑戰 WebAssembly的優勢與應用案例 WebAssembly在端側應用的挑戰 基于TypeScript+WebAssembly的新方向JavaScript在終端開發中的困境項目維護困難 JavaScript沒有類型信息，沒有類型安全保障性能與資源瓶頸 啟動速度慢 運行效率低 內存占用大JavaScript引擎選型挑戰 由Google開發，主要用于Chrome瀏覽器和Node.js JIT加持，性能強勁 內存消耗高，footprint大，資源受限設備不適用V8 由蘋果開發，用于S

2、afari瀏覽器和WebKit引擎 第三方app不支持JIT，僅解釋執行 在IOS上不增加包體積，但對Android不友好JSC 由Fabrice Bellard開發，輕量級的JavaScript引擎 不支持JIT，僅解釋執行 體積小QuickJS高性能輕量級JavaScript無法靜態編譯，決定了其runtime無法同時兼顧性能和資源消耗WebAssembly的特點與優勢WebAssembly(wasm)WebAssembly(wasm)是一個可移植、體積小、加載快并且兼容WebWeb的全新格式 安全 沙箱隔離機制，宿主資源訪問可控制 高效 靜態類型 通過JIT/AOT技術加持，可接近原生應

3、用的執行性能 多語言支持 C/C+,AssemblyScript,Python,Go,Rust,PortabilityCapabilitiesPerformanceSandboxing跨平臺低抽象層次的字節碼長期的可維護性標準的分發格式兼容性保障更小的文件尺寸緊湊的二進制格式WebAssembly Micro Runtime（WAMR）WAMR于2019年由英特爾捐贈字節碼聯盟(BA)，目前是BA的兩個Wasm runtime開源項目之一已大量應用于商業產品,技術委員會成員來自Intel、小米、螞蟻、亞馬遜、索尼、西門子和Midokura完整支持WASM MVPWASM MVP。積極跟進POS

4、T MVPPOST MVP豐富的執行模式：Interpreter（classic，fast）JIT（兩級），AOT，dynamic PGO自研AoT Module LoaderAoT Module Loader源碼調試支持WASI多模塊,多線程SIMD128XIPWasmGC支持的CPUCPU架構X86-32,X86-64ARM,THUMB,AARCH64MIPS,ARCXTENSA,RISC-V支持的操作系統Linux,SGX-Linux,Windows,MacOSAndroid,IOSZephyr,AliOS Things,VxWorks,RT-Threads,OpenRTOSWebAss

5、embly在終端的應用案例Disney application development kitDisney application development kit自研底層框架，擺脫對瀏覽器的依賴通過WebAssembly Runtime提供應用開發能力高性能受管控的資源訪問，安全性強使用Rust作為應用開發語言WebAssembly在終端的應用案例Prime video software architecturePrime video software architecture 由純JavaScript引擎轉向WebAssembly+JavaScript雙引擎 將底層框架用Rust開發并遷移到

6、WebAssembly獲取更高的性能 節省約30M JavaScript heap空間，并提升啟動速度WebAssembly在終端應用的挑戰目前WebAssembly支持的語言對終端開發不友好C/C+/RustC/C+/Rust 直接編譯成WebAssembly 高性能 需要手動內存管理JavaScript/PythonJavaScript/Python 將各自的VM編譯到WebAssembly 較高的內存開銷和性能損耗 調試困難學習效率學習效率運行效率運行效率開發效率開發效率Wasmnizer-ts:TypeScript+WebAssembly構建前端新底座TypeScript是一個帶有類型

7、注解的JavaScript超集，但其最終需要編譯成JavaScript腳本執行TypeScript Compiler(tsc):TypeScript Compiler(tsc):類型信息僅用于類型檢查WasmnizerWasmnizer-ts:ts:類型信息用于確定內存布局，實現靜態化編譯Wasmnizer-ts簡介由英特爾、小米合作開源，正規劃捐贈至某獨立的開源基金組織Wasmnizer-ts是一個將TypeScript直接編譯為wasm的工具鏈TypeScript嚴格子集盡可能地靜態化編譯基于WasmGC的自動內存管理目的:為WebAssembly生態帶來新的應用編程語言利用TypeScr

8、ipt靜態類型信息提升執行效率ts typewasm typetype checking rulebooleani32staticnumberf64staticstringstruct/stringrefstaticclassstructstaticfunctionfuncstaticinterfacestructstatic+reflectiontype unionexternrefdynamicanyexternrefdynamicflexibilityperformanceWasmnizer-ts原理WasmGCWasmGC新的引用類型（struct，array，funcref，I31r

9、ef，anyref，externref）對象可以交給runtime托管，無需自行管理內存subtyping純靜態類型系統LibdyntypeLibdyntype通過externref委托外部JavaScript引擎管理動態對象盡可能靜態化的同時，保留一定的動態能力可以利用JavaScript的部分builtin object其他Exception handling,stringref 等Wasmnizer-ts靜態化:classclass A x:number=1y:number=2let obj=new A();console.log(obj.x)編譯時運行時A_proto_xyObject

10、Functionnothing12keyvalp_vtable12訪問x字段以字符串“x”為key找到對應的value若當前object中沒有，則沿著原型鏈往上找A instance(WasmGC struct)vtablexyClass A012fieldidxtypei32f64f64struct.get$A 1tscWasmnizer-ts*以上均為簡化表達，省略了JavaScript中Function的prototype對象，省略了Wasmnizer-ts中class的vtable和metaWasmnizer-ts靜態化:interfaceinterface I x:numbery:n

11、umberclass A y:number=2x:number=1let obj:I=new A();console.log(obj.x)編譯時運行時p_vtable12訪問x字段A instance(WasmGC struct)Wasmnizer-tsClass A typeid:1000Interface I typeid:1001p_metaA vtable(WasmGC struct)typeidx:1y:0Wasm linear memory$idx=search metastruct.get_indirect$I$idx編譯器看到的interface I的信息和實際的class類型

12、不一定一致，無法靜態確定layoutWasmnizer-ts靜態化:interfaceinterface I x:numbery:numberclass A x:number=1y:number=2let obj:I=new A();console.log(obj.x)編譯時運行時p_vtable12訪問x字段A instance(WasmGC struct)Wasmnizer-tsClass A typeid:1000Interface I typeid:1000p_metaA vtable(WasmGC struct)tid:1000 x:0y:1 Wasm linear memoryif

13、 typeid equal:ref.cast$Istruct.get$I 1else:slow path若class和interface定義的形狀一致，則根據typeid進行快速訪問Wasmnizer-ts靜態化:interfaceinterface I x:numbery:numberclass A implements I y:number=2z:number=3x:number=1let obj:I=new A();console.log(obj.x)編譯時運行時p_vtable12訪問x字段A instance(WasmGC struct)Wasmnizer-tsinterface I

14、 typeid:1000class A typeid:1001,implementid:1000p_metaA vtable(WasmGC struct)tid:1001Impl:1000Wasm linear memory若class顯式地實現了某個interface，則將class和interface共有的字段按interface聲明順序排在前面并根據implement id進行快速訪問vtablexyClass A012fieldidxtypei32f64f64z3f64if typeid equalor impl_id=typeid:ref.cast$Istruct.get$I 1el

15、se:slow pathWasmnizer-ts靜態化:類型轉換function foo(obj:any)let a=obj as A;a.f();foo()運行時調用a.f()Uncaught TypeError:a.f is not a functiontscWasmnizer-tsnothingref.castCast failas時間第一時間暴露錯誤錯誤延遲暴露，難以調試Wasmnizer-ts應用方向通過WAMR暴露底層API，直接替換現有執行引擎性能對比QuickJSWAMR fast-interpreterWAMR AOT單位:mshttps:/ AOT基本接近原生性能僅靜態類型

16、訪問（classclass，arrayarray）Wasm模式領先，AoT編譯后優勢明顯接口訪問（interfaceinterface）Wasm目前還存在差距binarytrees_classbinarytrees_interfacefibonaccimandelbrotnbody_classnbody_interfacespectral_norm3.41x0.62x3.12x19.5x29.1x3.36x28.5xWAMR AOT performance/QJS performance:總結Wasmnizer-ts通過結合TypeScript和WebAssembly，為終端開發帶來了新的可能盡可能地靜態化編譯，減小運行時負擔源碼中的類型信息被充分利用，實現靜態化編譯class字段訪問基于field index，而非名字，效率更高模塊尺寸小無需編譯整個runtime到WebAssemblyWebAssembly模塊中無需自帶內存管理邏輯開發門檻低嚴格的TypeScript子集，保持TypeScript原有語義前端開發者無需學習新的語言就能開發高性能的WebAssembly模塊暫時無法靜態化編譯的部分可以通過any類型fallback到JavaScript感謝歡迎使和參與WasmnizerWasmnizer-ts ts 項https:/ YOU