说明：此文是我的《软件前沿技术》大作业，仅仅是简单的入门介绍，如果有错误欢迎指出
随着用户体验的升级和技术的进步，浏览器中涌现了越来越多的技术。前端也从十年前网页中的纯HTML和CSS技术开始涵盖到服务端、移动端的领域。下面来介绍几项在未来几年很可能会大势、带来革新的前端技术。

一、PWA

移动应用在我们的生活中越来越重要，原生的APP应用启动渲染速度快，但往往需要几套代码去适应不同的操作系统和设备类型，还需要用户主动的更新软件的版本。于是前端涌现出了类似于React Native和Weex的框架平台，用JavaSript脚本去调用相应的原生接口，让我们可以用网页编程语言编写同时适配安卓和IOS系统。但这种方式的缺点也很明显，它们写出来的应用加载和渲染速度比较慢，用户体验感并不能尽善尽美。还有以webView嵌入网页的方式来代替，它的缺点也很明显，就是无法去干涉到原生的操作内容，没有网络的话无法进行使用，还存在白屏时间，在用户的设计体验上并不能达到最佳。
PWA全程为渐进式WEB应用，是谷歌在早年提出的未来想法。传统的网页必须以浏览器为载体浏览，假如网页应用去除浏览器的外壳，在用户看来，就可以达到和桌面软件、手机应用一样的视觉效果。同理，桌面的应用程序也可以达到这个效果。它搭配上HTML5的App Manifest和Service Worker来达到离线缓存和消息推送，这样就不用担心没有网络的情况下会是一片空白，达到类APP的效果。
目前谷歌浏览器在测试模式下可以运行PWA应用，国内最早有饿了么开发出了其PWA版本的应用，在未来的几年，这项技术一定会越来越多地被使用。
PWA和传统APP、传统桌面端程序相比，具有web应用的所有优点，没有原生APP的各种启动条件，能够快速对用户的指令进行相应，也无需用户手动更新，但是目前各产家对它的支持都都还不是很广泛。

二、webAR

AR技术如今越来越火，大家自然也希望能在方便传播使用的网页中能运用这项技术，于是有人提出了web VR和web AR的概念。
AR可以简单被认为是一种实时地把虚拟图像叠加在现实场景中的技术。目前实现AR的方式有两种方法，一种是光学透视式，另一种是视频透视式。光学式透视式就是人们眼前的屏幕上实时地出现特效，这样看起来就和实景合为一体，这样的优点是逼真度更高。视频透视式是把场景也实时录下来，然后生成特效和场景合并在一起，这样的优点是同步程度高，还可以对生成的结果根据用户的需求进一步的处理。以目前的技术来说，前端要想实现AR，只能靠视频透视式。
Web AR规范是W3C组织在2017年提出来的，要在网页中实现AR，要解决的一个问题就是要实时的捕捉画面对象，谷歌的AR 团队像web提供了WebARonARKit以及WebARonARCore 两个库，这两个库能帮助我们去进行对运动的追踪、对环境的感知和对光线的感应。
目前已有一位叫做Jerome Etienne的程序员封装了一款web AR库——AR.js，我们使用它可以用十行HTML就实现拥有60FPS的AR的技术。它主要是对提供实时捕捉的WebRTC，最大的开源AR框架JSARToolKit和几个WEBGL的库进行了封装。
而未来对于它的性能，还可以有很大的提升，也出现了很多例如使用Web Worker，WebAssembly的方法。在未来会有越来越多的人会加入到这个行列来。

三、WebAssembly

JavaScript作为长时间统治网页编程中地位的大军，拥有很明显的缺点，它的语法灵活，因此不适合大型应用，它的性能并不适合处理大量的计算。
弱类型让JavaScript灵活多变，随着前端逻辑愈发的复杂，就产生了像TypeScript、Flow这样的工具来让JavaScript拥有更多的约束，以减少出错的可能性。
但TypeScript、Flow本质上还是JavaScript，它们多了一个转化的过程，没有减少浏览器的编译过程，所以对于速度与性能的提高上来说，没有很大的帮助。虽然谷歌、火狐都提出了他们各自的解决方法，但都没能得到广泛的统一。
WebAssembly是一种新字节码规范，它相当于是JAVA对比JAVA字节码一样的，浏览器很容易读取它。浏览器在对JavaScript进行解释的时候，需要运行才能知道它的类型，然后判断结果，要对它的抽象语法树进行解析，转为中间代码，底层才能知晓它的涵义。WebAssembly作为一种“中间码”就可以省略这些过程。同样逻辑的代码，它需要的体积也更小。目前浏览器中使用的最多的JavaScript的编译器是JIT，它为了让JavaScipt执行地更加迅速，会对它进行一定的解析与优化，而WebAssembly可以完全省略这些过程。在垃圾回收上，WebAssembly提倡开发者编写代码进行废弃空间的回收，不用每次都浪费时间去进行检查。因为这些理由，它运行起来比JavaScript更加的迅速。
目前可以转换为WebAssembly的语言有多种，官方推荐使用C/C++来进行编程。WebAssembly可以使用在网页3D游戏的渲染计算上，现在我国的游戏引擎白鹭已经在慢慢的摸索。React框架的虚拟DOM diff算法存在大量的计算，用它重写后可以大大地提高效率。对于网页中对音频和视频的处理，也可以用WebAssembly来提高计算的效率。

四、CSS houdini

CSS领域存在许多令人惊叹的想像提案，但CSS的新标准被提出后往往要在几年年后才能刚开始被浏览器支持，因为这涉及到了浏览器的底层，浏览器的商家。但对比JavaScript社区非常的活跃，因为他们有可以进行转化的工具翻译成低版本。但CSS的兼容很多都是浏览器无法支持的。
CSS预处理器的欢迎也让大家更迫切的希望CSS也能支持一些动态的语言写法。虽然CSS预处理器的本质也只是进行了转化，并且不同的预处理器之间的语法也存在不同，也未解决浏览器兼容的问题。所以houdini出现了。
CSS Houdini是w3c的一个致力于解决浏览器兼容问题的小组，目前他们提出了几个草案，一个是扩展CSS变量的支持和功能，CSS Typed OM帮助我们能在JavaScript中更好的、更方便的去获取样式，Paint API让我们能在CSS中直接使用我们在JS中绘制的图案，Layout API能帮助我们在CSS中使用兼容性还没那么好的display布局，让我们能大胆放心使用新的布局。
他们是直接从浏览器的内核下手，对浏览器在进行网页渲染的过程的每一步埋下了不同的“钩子”，这样增加了我们的控制权，对于浏览器渲染来说，也可以省下不少白费功夫的时间。CSS Houdini还使用了worklet这个概念，它被认为是轻量级的Web Workers，开创新的线程来专门进行它们的渲染。
目前最新的版的谷歌浏览器已经开始支持CSS Houdini的部分API，相信在不久的将来，CSS的社区也会开始慢慢的活跃起来。