開發者應該關注的五項Web新興技術：WebGL和SVG名列其中

雲棲希望。發表於2017-12-10
WebSVG

最近一位HTML5專家Rich Clark（作者的好朋友）為大家做了一個HTML5 APIs的簡介，在文章中為大家指向了一個令人迷惑的網頁（web平臺：瀏覽器技術http://platform.html5.org/），其中包含兩個很長的專欄和小正文並提及到一些讓人感到迷茫的技術，例如“window.crypto.getRandomValues”和“DOM Mutation observer”。

別擔心，我們們不去管那些啦，因為有些還遠遠沒有完成呢，在瀏覽器中見到它們還要等一陣子。然而，其它已經在瀏覽器中，或者距離您很近，或者馬上就要出現。人們可能將稱之為“HTML5”，儘管它們並不是。其實，它們都屬於令人激動的新興Web技術（New Exciting Web Technology），值得每個開發者關注。

WebGL

WebGL是一種基於Web的Graphic庫，由非盈利組織Khronos運營,目前結合HTML5<canvas>元素廣泛應用在3D圖形開發中。

學習WebGL比較困難，因為它是底層開發——它執行在GPU上面，而且它實際上是一個OpenGL的JavaScript port，是一種遊戲開發者使用的已經長期建立的API集。WebGL的主要受眾是哪些已經擁有豐富OpenGL經驗的遊戲開發者，他們可以通過WebGL為web平臺編寫遊戲。

好在有很多資源可以幫助您學習WebGL，這些資源不僅僅是關於遊戲開發的，還有很多奇幻的圖形、視覺和音樂視訊等方面。作者個人比較推薦的是：

WebGL目前在所有桌面瀏覽器（釋出版和開發頻道）中都支援，除了IE10（微軟表示不支援）。對於移動產品來說，已經在Opera Mobile 12中釋出了，最終會出現在Android，BlackBerry Playbook 2.0，Nokia N900，SonyEricsson Xpertia Android Phones等以及Firefox移動瀏覽器中。

SVG

SVG（Scalable Vector Graphics）已經在Opera，Firefox，Chrome中存在多年了，但是直到IE9開始支援它之後才漸漸變得主流一些它在HTML5<Canvas>的光環下顯得有點暗淡，儘管SVG和HTML5<canvas>是面向不用應用的不同工具。

Canvas2D可以迅速paint圖形到螢幕上面，這一點很犀利。但是其全部功能就是paint了，沒有記憶體來做那些（位置，頂層或其他）其他功能。如果您需要那種book-keeping工作，就只能自己用JavaScript實現，因為Canvas2D不會把DOM儲存到記憶體中，也正因為如此Canvas2D速度快，十分適合第一人稱射擊類應用。

與Canvas2D不同，SVG在您需要儲存DOM的時候就給力了。使用JavaScript，所有的Objects都可以移動並且與動畫無關。您可以試試Daniel Davis做的復古類SVG遊戲Inbox Attack（http://people.opera.com/danield/svg/inbox-attack.svg）來體驗一下，並且看看原始碼來了解如何完成動畫效果。

因為shape和path是用Markup來描述的，所以他們可以用CSS來定型。與<canvas>不同，text在SVG中保持text格式並且更加的靈活，更加可擴充套件，更加易於訪問。在Canvas中，text變成了畫素，就像Photoshop中的圖形text。

SVG最強大的特性是它基於向量，這樣您的插圖，圖形和UI圖示等都是向量圖了，這樣無論是在50英寸的電視屏還是手機螢幕桌面上，看上去感覺都是一樣的清晰。在當今這樣一個web應用無處不在的時代，SVG圖形甚至可以包括媒體查詢（http://my.opera.com/ODIN/blog/2009/10/12/how-media-queries-allow-you-to-optimize-svg-icons-for-several-sizes），可以是響應式的，可以根據不同的目標裝置做尺寸的調整。

綜上所述，在最新的桌面瀏覽器中SVG已經能被廣泛支援了。在移動產品方面的支援總體上來說也很好，以及預期在Android 3.0版本之前原生瀏覽器也會支援它了。

Daniel Davis有一些SVG 介紹性的資源（http://my.opera.com/tagawa/blog/learning-svg），作者個人也推薦一本免費的電子書：Learn SVG（http://www.learnsvg.com/book-learnsvg/），您也可以看看《SVG or Canvas？Choosing Between the Two》（http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/）來了解二者的區別。

getUserMedia

不像那些被錯誤地稱為HTML5的API，getUserMeida（在下文中簡寫為gUM）有個相對正當的理由：起初它是HTML5<device>元素，之後它改名瞭然後離開了W3C WebRTC規範集合。

gUM允許訪問使用者的攝像頭和麥克風，本來是在WebRTC規範中在瀏覽器中進行P2P視訊會議的，當gUM擁有了其他的用途，就離開了WebRTC。

攝像頭的訪問最終在Opera12安卓版，Opera桌面實驗室和Google Chrome Canary裡面實現了，不過Opera和Chrome都還沒有實現麥克風的接入。

W3C規範依然在用，所以Opera和Webkit有不同的語法規範，這樣的麻煩被一個叫做The gUM Shield（https://gist.github.com/f2ac64ed7fc467ccdfe3）的小JavaScript片段搞定了。如果您想更深入地瞭解這方面請看作者的另一篇文章：It’s Curtains for Marital Strife Thanks to getUserMedia（http://html5doctor.com/getusermedia/）

當視訊從裝置開始流傳輸的時候，源資料可以被做成變成了<video>元素，如果需要的話還可以被定為到螢幕外面，然後拷貝到<canvas>裡面進行所需要的操作。Paul Neave寫的《HTML5 變成玩具！》（http://neave.com/webcam/html5/）為了方便操作把流媒體資料拷貝到WebGL中。作者在.net 雜誌的226話有采訪他的報導（http://www.netmagazine.com/shop/magazines/april-2012-226）。

如果想把web app的功能做得像native app，gUM需要做很多的工作。試了一下Neaver的gum和WebGL 在Opera Mobile 12上面的demo，感覺和平臺獨有的app一樣富有響應式並且很時髦。當在瀏覽器產品中其功能被廣泛應用的時候，作者語言會有很多基於web的QR程式碼閱讀者以及很多擴增實境的應用。

File APIs

W3C File APIs允許JavaScript訪問本地檔案，其中最常用的API是FileReader，可以從Opera，FireFox，IE10平臺等的預覽版看到（不包括Safari）。

這一份W3C規範“為了在web應用中提供API來代表檔案物件，以及程式設計選擇和訪問資料”。例如：你可以上傳檔案到瀏覽器中，並本地查詢相關資訊（例如檔名，尺寸，型別）而不需要到伺服器端。您也可以開啟檔案，操作內容，這樣可以加強基於瀏覽器的應用的互動性，用起來更像是本地應用。

另一個常用的用途是使傳統的影像上傳兌換狂更具有Web2.0特色：通過允許在瀏覽器內部的Drag and Drop，而不是本地檔案系統中改變。

您可以通過使用一個普通的<input type=”file”>開始，然後循序漸進地提高。HTML5 Drag&Drop支援特徵檢測，如果存在的話就使用<div>替換<input>，那就是您的drag影像目標了。當影像被drag到目標的時候，使用File Reader API來顯示一個指甲蓋大小的影像。您可以看一下Remy Sharp的demo（http://html5demos.com/file-api）。

還有很多寫檔案和操作檔案系統的規範，不過這些對目前的跨瀏覽器應用來說還不太夠：

W3C檔案API：（http://dev.opera.com/articles/view/the-w3c-file-api/）非常基礎的介紹。

開發檔案系統API：（http://www.html5rocks.com/en/tutorials/file/filesystem/）HTML5 Rocks文章，（僅限Chrome）。

Feature-detecting, progressive enhancement and upgrade messages（特徵檢測，漸進式增強和訊息通知）

誠然，在沒有那些奇幻的API的時候，大家總是試圖使用漸進式增強和HTML語義的方法讓網站照常工作。然而有時候卻不能這樣，例如Paul Neaver的《HTML5變成玩具》中，如果gUM和WebGL現在不存在的話，其網站不能有什麼補救措施了，整個網站的核心都沒了。

在這樣的情況下有兩種典型的慣例：要麼是顯示一條訊息說“你的瀏覽器太垃圾了，塞油哪啦”或者說“你必須用Chrome6/Firefox 4/Opera10等[插入能支援你應用的瀏覽器]才能訪問”。第一種方法又沒用又粗魯，沒有建議和補救措施；第二種方法是個臨時辦法，因為六個月之內所有瀏覽器可能都能支援你現在使用的技術了，讓你在網站上留下的資訊過時：例如您寫的解決方案是建議使用Firefox4來訪問，可是半年後使用者安裝著Firefox7回來訪問你的頁面了，這可就真的沒救了。

如果您真的不能使用漸進式增強，那麼就用新型的HTML 5 Please API吧（http://api.html5please.com/）。這是Jon Neal，Divya Manian和其他幾位大蝦創作的。通過使用它，可以先查詢caniuse.com然後返回一個最新（能支援你的新特性的）的瀏覽器版本列表。

如果您已經做了一個需要Canvas或WebSQL DB技術的DEMO或者網站，恐怕你已經處在一個這樣的尷尬境地了：您只是在告訴訪問者們他們的瀏覽器不咋地。但是您不能只推薦他們使用一個能支援這些特性的瀏覽器來補救，例如“找個支援WebRTC效能的瀏覽器再來吧”，這樣對於大家都沒啥效果。

HTML5 Please API把開發人員的語言（和特性）翻譯成使用者能理解的語言（瀏覽器）。通過呼叫這個API你就可以得到一些HTML返回值來告訴訪問者，或者返回一個帶有相關資料的JSON物件（包括瀏覽器Logo及下載介紹等資訊）。這樣您可以根據不同的客戶來顯示不同的補救資訊了。

使用這種方式最令人欣慰的是：如果所有新特性在客戶當前瀏覽器的升級版都能支援的情況下，Please API值建議訪客對瀏覽器升級，而不是讓訪客單純為了訪問你這個頁面而更換瀏覽器。效果圖如下：

結束語：

正如您所看到的，大量的令人驚喜的新技術正在接踵而至，您著手研究上述某項技術的時候恐怕又要擔心更新鮮的技術到來了吧。希望您開發得愉快，請記得讓您所開發的應用在儘可能多的瀏覽器上面測試一下。

本文轉自部落格園知識天地的部落格，原文連結：開發者應該關注的五項Web新興技術：WebGL和SVG名列其中，如需轉載請自行聯絡原博主。


相關文章