1、webp

WebP是Google新推出的影像技術，它可讓網頁圖檔有效進行壓縮，同時又不影響圖片格式相容與實際清晰度，進而讓整體網頁下載速度加快。

2、webgl

WebGL（全寫Web Graphics Library）是一種3D繪圖協議，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript繫結，WebGL可以為HTML5 Canvas提供硬體3D加速渲染，這樣Web開發人員就可以藉助系統顯示卡來在瀏覽器裡更流暢地展示3D場景和模型了，還能建立複雜的導航和資料視覺化。顯然，WebGL技術標準免去了開發網頁專用渲染外掛的麻煩，可被用於建立具有複雜3D結構的網站頁面，甚至可以用來設計3D網頁遊戲等等。

3、Nuxt.js

Nuxt.js 是一個基於 Vue.js 的伺服器渲染框架  Nuxt.js團隊建立了腳手架工具 create-nuxt-app。

https://zh.nuxtjs.org/guide/installation  想要更多瞭解戳這裡

4、PWA

一個新的前端技術，PWA（ 全稱：Progressive Web App ）也就是說這是個漸進式的網頁應用程式。

官網：https://developers.google.com...

是 Google 在 2015 年提出，2016年6月才推廣的專案。是結合了一系列現代Web技術的組合，在網頁應用中實現和原生應用相近的使用者體驗。

PWA 可以新增在使用者的主螢幕上，不用從應用商店進行下載，他們通過網路應用程式 Manifest file 提供類似於 APP 的使用體驗（ 在 Android 上可以設定全屏顯示哦，由於 Safari 支援度的問題，所以在 IOS 上並不可以 ），並且還能進行 ”推送通知” 。

PWA 不是特指某一項技術，而是應用了多項技術的 Web App。其核心技術包括 App Manifest、Service Worker、Web Push、Credential Management API ，等等。其核心目標就是提升 Web App 的效能，改善 Web App 的使用者體驗。 下面我們詳細地看一下這些核心技術，是否能夠真正彌補 Web 劣勢。

5、Parcel

超快的Web應用打包器

6、HTML5.2新標籤dialog

HTMl5.2新的版本出現了一個有意思的標籤，那就是對話窗或視窗，也就是dialog,其基本用法如下：

open屬性表明該視窗是預設顯示的，使用者可與之互動。 相關js方法有：

1.close():關閉對話方塊，可選傳入型別為{domxref("DOMString")}}的引數，用來更新對話方塊的returnValue。

2.open():非模式化的顯示這個對話方塊, 即：開啟這個對話方塊之後依然可以和其他內容進行互動。 可選傳入型別為Element或者MouseEvent的引數，用來定義對話方塊的顯示位置。

3.showModal():模式化的顯示這個對話方塊， 並且將會至於所有其他對話方塊的頂層（遮蔽其他對話方塊的互動）。 可選傳入型別為Element或者MouseEvent的引數， 用來定義對話方塊的顯示位置。 show()和showModal()是有區別的，show只是顯示dialog,而showMadal()是會遮蔽其他的彈出層。 按ESC可以關閉dialog，dialog需要重新定義css樣式，畢竟本身css是預設的樣式。 下面是一個demo程式碼：