說明：此文是我的《軟件前沿技術》大作業，僅僅是簡單的入門介紹，如果有錯誤歡迎指出
隨着用戶體驗的升級和技術的進步，瀏覽器中涌現了越來越多的技術。前端也從十年前網頁中的純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的社區也會開始慢慢的活躍起來。