高级Web应用开发前沿技术简述( 二 )


具体的使用方法如下:
//在web worker中的用法let worker = new Worker(moduleScriptURL,{type:"module"})//在service worker中的用法nivagator.serviceWorker.register(scriptURL,{type:"module"});//在worklet中的用法var audioContext = new AudioContext();dusioContext.audioWorklet.addModule(moduleScriptURL);1.5 Internationalization API的更新
更新了5个国际化的API,分别如下:

  • Intl.NumberFormat 设置数字显示格式
  • Intl.DateTimeFormat 根据不同国家设置时间/日期的显示格式
  • Intl.Segmenter 根据不同语言的语法规则进行分词
  • Intl.ListFormat 根据不同语言的语法进行连词
  • Intl.DisplayNames 自动根据当前页面设置的语言,展示语言切换内容
其中最值得一提的是Intl.Segmenter,可以实现语句的分词功能,在做一些算法的时候进行分词是一项基本的工作,在此基础之上可以做很多有趣的功能,更详细的代码参见demo,感兴趣的同学不妨一试 。
 
2 WebAssembly2008年很多浏览器中开始引入JITs,实现了js运行速度的骤然提升,而WebAssembly被认为可能是web应用性能提升的又一个转折点,funkykarts[3]就是一个采用WebAssembly的例子,其实funkykarts的源码是使用C++来实现的,那在Web中的这一切又是怎么做到的呢?
【高级Web应用开发前沿技术简述】WebAssembly 可以理解为一种web版的汇编,其实它并不是一种编程语言,但是可为C/C++/Rust等高级语言提供一个高效的编译目标,使Web应用程序获得和原生App相媲美的性能 。这就意味着,对于一个现成的Native应用,为了将它移植到web中,不需要从头开始编写JavaScript代码,通过WebAssembly将它编译成浏览器支持的wasm模块,然后通过Webassembly API执行调用即可 。这一过程如下图所示:
高级Web应用开发前沿技术简述

文章插图
 
上图中Emscripten是一种生成wasm的工具,目前常见的这类工具还包括:
高级Web应用开发前沿技术简述

文章插图
 
目前Chrome、FireFox和Safari都已支持WebAssembly,在具体的功能上还存在些微差异,具体的支持情况可以可以在 WebAssembly 官网[4]找到 。
从WebAssembly 展示的信息可以看到Chrome、FireFox、Safari等浏览器对WebAssembly增加了多项功能的支持,具体包括在以下几个方面:
  • 通过采用新的内存指令让批量内存操作具备更好的性能 。比如批量的复制和初始化操作 。
  • 通过新的指令告诉用户进程在部分情况下无需捕获异常 。比如在在float和int之间转换时的正溢出 。
  • 新增了符号扩展运算符,实现低位数转高位数,所谓的低位数转高位数的基本原理就是在低位数的左边补上低位数的符号位,直到数字位数达到要求 。用来实现WebAssembly的i64类型和JavaScript的BigInt数据类型之间的转换,这一改进可以提高代码的执行速度并且比之前的实现方法更加简单 。
  • 增加了新的引用类型,允许WebAssembly模块持有JavaScript和DOM对象的引用,并且可以传递和保存它们 。
  • 通过数据流式的下载和编译,缩短了整体执行时间 。
 
3 New Web APIs这部分主要是介绍部分新颖的API以及他们各自适用的不同场景,有些功能还是很有意思的,比如Speech Recogintion可以借助Siri引擎实现实时文本转换,Web Share功能今年新增了文件共享,而Storage Access在保证用户Cookies安全性的前提下增加了适用范围 。下面分别介绍一下它们:
3.1 WebGL2.0
WebGL是实现页面渲染的不二法门,可以帮助开发者在Web中实现非常绚丽的画面效果,就像下图这样,Apple这次在Safari和Webkit中为我们带来了WebGL2.0的支持,下面我们就简单解下什么是WebGL2.0:
WebGL2.0是基于OpenGL ES 3.0实现的Web API,核心是WebGL2RenderingContext接口,在WebGL1的基础上增加了很多的新特性,比如:
  • 增加了3d纹理,能够渲染出像云朵一样的volumetric effects(容积效果) 。
  • 它的WebGLSampler可以用来存储一系列采样参数,在着色器中使用纹理更加灵活 。
  • 增加了Transform Feedback来帮助在GPU上实现高性能的粒子系统效果 。
由于旧版本的Safari不支持WebGL2.0,所以之前只能通过WebGL1.0实现部分效果,但是从14.2版本开始,所有苹果设备上的Safari都可以支持WebGL2.0,更重要的是今年Apple将WebGL的底层实现从OpenGL迁移到了Metal,这就意味着可以使用IOS模拟器愉快的调试WebGL代码了,同时可以使用Xcode frame debugger来分析webGL的代码,对开发者来说是真的很香 。


推荐阅读