IE10帶您走進HTML5時代

佘華煜發表於2013-01-25

  微軟隨著 Windows 8 作業系統提供了 Internet Explorer 10.0 版,這標誌IE瀏覽器對HTML5等新技術支援性的進一步發展與成熟,同時,IE10也提供了新的 Windows 8 風格的一個輕量級App,更加適合觸控,帶給使用者沉浸式的使用者體驗。

  IE10 對 HTML5 的表現能力究竟如何?

  先說一點,那就是 HTML 5 的重要變化之一——引入了針對非標準HTML、特別是錯誤格式HTML的標準化解析規則。也就是說,當瀏覽器在遇到存在錯誤的HTML時(如缺少結束標記),通常會處理得很寬鬆。這是一個廣受讚譽的特點,因為相比XHTML來說,HTML​在此種情況下會繼續正常處理。IE10 就是這樣一個完全支援 HTML5 標準化解析規則的瀏覽器。

  除此之外呢?我們來簡單看看 IE10 中針對 HTML5 等現代 Web 標準又增加的主要功能特性支援:

HTML5 方面

CSS3方面

其他方面

-非同步指令碼執行 (Async Script Execution)

- 檔案API (File API)

- 歷史 (History)

- 表單驗證 (Forms Validation)

- Progress 和 Range 控制

- Web workers

- Web sockets

- 拖放(Drag and Drop)

- 應用快取 (Application Cache)

- 拼寫檢查 (Spellcheck)

- 通道訊息(Channel Messaging)

- 更多

- Flexbox

- Grid

-定位浮動 (Positioned float)

- 3D變換 (3D Transform)

-動畫 (Animation)

-漸變 (Gradient)

- Text Shadow

- 去掉了CSS限制

- 更多

- Indexed Database

- Web performance API

- SVG 濾鏡效果

- 簡化觸控開發的 MS Pointers API

- 比 IE9 更加強勁的圖形影像處理

- 更多

  其實早在 IE10 開發者預覽版的時候,就有人做過當時的不同主流瀏覽器之間對 HTML5 支援度的綜合測評,這裡給出一張圖表,展現的是各瀏覽器處理 HTML5 各種任務的能力考量,分數越高越好:

  當然,當時的測評還有其他的各方面,由於篇幅有限,就不一一列舉,當時最後的結論是,IE10 除了在對 HTML5 標準支援度方面略顯落後外,在 HTML5 其他效能方面都完勝其他瀏覽器。時隔半年多,如今 IE10 正式版釋出了,對 HTML5 標準的支援度方面又有了新的增強。 

  我們不妨找一臺帶獨立顯示卡的 PC 體驗一下魚缸速度測試(點選圖片開啟連結) 

  通過測試我們可以看到 IE10 對圖形影像和 JavaScript 處理方面的效能優勢,有了高效能的呈現,那麼對於富使用者體驗的 HTML5 互動式網站而言,無疑是流暢體驗的一種保障。

  其實還有更多針對 HTML5 的測試,大家可以訪問 http://ietestdrive2.com/ 進行體驗。 

  IE10 能給消費者和開發者帶來什麼?  

  作為消費者的我們,可以通過 HTML5 獲得一種輕量、明快的無外掛瀏覽體驗,視訊、音訊和動畫均不需要使用任何外掛,直接通過瀏覽器呈現。而 IE10 會繼續利用 GPU 資源加速處理這些多媒體和 JavaScript,讓瀏覽體驗變得更加快速自然。上圖展示的就是一個 cnBeta 新聞站點利用 HTML5 等現代 Web 技術開發出來的新聞閱讀體驗,該網站在使用 Windows 8 UI 風格的 IE10 開啟之後體驗更佳,帶給使用者專注的沉浸式使用者體驗。 

  這幅圖展示的則是一個基於 HTML5 的網頁版遊戲——割繩子,它的使用者體驗毫不遜色於桌面版的應用程式,或者 Windows 8 UI 風格的、從應用商店下載的割繩子 App. 

  上面這幅圖展示的也是一個網站應用,通過瀏覽器訪問,基於 HTML5,在這裡,您可以把照片自然地鋪開在桌子上,供您把玩和欣賞。該應用著重展示的是觸控場景,通過它,您可以用手指輕鬆將照片鋪開、縮放和旋轉,您可以體驗到自然人機互動帶來的樂趣。當然,照片應用只是一個例子,生活中其實還有很多可以用觸控作為互動手段的場景,特別是網頁遊戲。微軟推出的 MS Pointers API 讓您的觸控開發起於一個全新高度,Pointer 事件封裝了觸控、數字筆和滑鼠的輸入,有助於輕鬆構建不依賴於硬體裝置的互動方式的體驗。 

  像這樣的炫酷的 HTML5 遊戲和實用性網站,能夠給使用者帶來舒心的使用者體驗。如果使用者具備觸控裝置,那麼使用者還可以通過更加自然的人機互動方式與其互動。試想,要是很多網站都具備這樣的使用者體驗,您每天瀏覽網際網路的時候,是不是會更加開心呢?我是非常期待的。 

  但是,這需要時間,需要開發者們的配合。開發人員一直是新技術普及和投產的核心人物,他們擔當著應用新技術開發出產品的重要使命。在 IE10,F12 開發人員工具將一如既往地為開發人員提供直觀的錯誤排查和效能等跟蹤分析和除錯,助力於 HTML5 網站的開發。國外已經有了很多針對 HTML5 的成功網站和商業案例,國內這一塊還得依靠我們國內的廣大開發人員的努力。

  "HTML5 增加了大量提升使用者體驗的功能標準:canvas 元素可以讓開發者在一個特定區域內繪製各種複雜圖形,同時可以用 JavaScript 控制你所繪的圖形的動效,使得非 flash 的豐富的視覺效果成為可能,使用者在移動端和 PC 端可以享受到一致的視覺體驗;試想一個你曾經使用過的網路應用程式,一個線上圖片編輯程式,你會用它做簡單的圖片處理,但絕對不會拿它代替 Photoshop,因為它的互動性、響應率和功能性都遠不及本地用程式。HTML5 能夠很好地解決這些問題。對於互動而言,它支援的 menu 元素能夠模擬選單欄、工具欄、列表欄等本地應用控制元件, 而且很容易實現,Drag-and-Drop 功能可以模仿"將檔案拖拽進垃圾箱"的操作;對於響應率而言, Programmable HTTP Cache and Serving 功能能使 Web app 內容動態寫入瀏覽器快取,使 App 響應率接近於本地應用;Web Workers 允許 App 執行多工,提高使用者併發操作的穩定效能;Offline Web Application 允許 App 在離線狀態下儲存使用者資料、正常瀏覽。你還能通過瀏覽器獲取使用者的位置資訊以及更多等待你去探索的功能。"—— 摘自IE瀏覽器中文網站 iefans.net 

  我覺得這對於開發者來說,是一個新的機遇,也是一份新的挑戰。從現在的趨勢看,Web 2.0 時代的網站已經朝著應用程式的趨勢在發展,只不過,現有的技術不能很好地滿足設計者對於渾然天成的網站效果的追求,也不能帶給使用者真正完好統一的使用者體驗。踏入 HTML5 開發的園地,我們不僅可以開發出高質量的、內容精美的網站,更可以編織未來,編寫新的基於網際網路的 HTML5 應用程式。設想一下未來的使用者不再下載應用程式,而是開啟一個網站完成他想做的事情的場景。

  現在,各家主流瀏覽器廠商也為 HTML5 做好了準備,是時候開始開發 HTML5 的網站了,不論您是對現有的網站進行升級,還是藉機會將新的業務搭建在 HTML5 之上,都是很好的起點。使用 HTML5 做開發,不僅可以給使用者帶來更多優質體驗,開發者自身也可以節省很多時間。其中最為突出的是,不必再為了不同的平臺和瀏覽器編寫差異性的程式碼以確保使用者體驗的一致了。Windows Phone 8 的移動版 IE 瀏覽器採用的也是 IE10 的核心,也有更多的掌上裝置中的瀏覽器支援 HTML5,在我看看來,這對於開發者而言,是一個前所未有的機遇。

  如果您想在這個新的開發領域大展拳腳,那麼您也會遇到一些挑戰。針對 HTML5 的開發,如果您選擇 IE10 作為一個平臺,那麼正式版的 IE10 已經能夠為您的開發提供卓越的支撐。IE10 對 HTML5 的支援已經該進得相當好了,多點觸控技術可為使用者帶來新的自然體驗,同時支援多點觸控和多種觸控方式的 MS Pointers API 為您開發觸控友好的網站提供了捷徑,IE10 也使用了速度最快的 JavaScript 引擎,同時支援硬體加速,再有就是微軟 Windows 8 上桌面版的 IE10 同 Windows 8 UI 風格的 IE10 一起實現了 PC 與平板瀏覽的體驗一致。這從平臺的層面,為您步入 HTML5 開發掃清了一些障礙。另外,微軟也已通過一些案例的解讀和文件的支援,為您掃除了一些頭疼的相容性方面的障礙,例如如何相容現有網站,如何在使用者使用舊版瀏覽器時,HTML5 網站自動進行優雅的降級(一樣具備良好的使用者體驗)等等。在這裡,我想分享一份 IE10 開發相容性白皮書 給大家,如果您感興趣,可以抽一點點時間進行閱讀,如果它對您有幫助,也希望您能分享給您身邊的其他做 Web 開發的朋友們;如果您覺得它不夠好,請向我反饋各位的需求,看看大家還希望這份文件講些什麼內容,以對大家的 HTML5 開發提供更大的幫助!

  最後,再給出一個針對開發者的資源——HTML5 開發攻略(http://www.beautyoftheweb.cn/bowdevelopers),這個是微軟為開發者準備的聚合資源,這裡有成功案例解析,有新特性的解讀,有開發好的示例,還有更多其他的您可能會用到的資源。希望大家能夠順利進入 HTML5 開發的程式中,也希望消費者們能夠通過新的 HTML5 技術和 IE10 獲得您所喜愛的使用者體驗!

相關文章