IE10,帶您走進(jìn)HTML5時(shí)代
微軟隨著 Windows 8 操作系統(tǒng)提供了 Internet Explorer 10.0 版,這標(biāo)志IE瀏覽器對HTML5等新技術(shù)支持性的進(jìn)一步發(fā)展與成熟,同時(shí),IE10也提供了新的 Windows 8 風(fēng)格的一個(gè)輕量級App,更加適合觸摸,帶給用戶沉浸式的用戶體驗(yàn)。
IE10 對 HTML5 的表現(xiàn)能力究竟如何?
先說一點(diǎn),那就是 HTML 5 的重要變化之一——引入了針對非標(biāo)準(zhǔn)HTML、特別是錯(cuò)誤格式HTML的標(biāo)準(zhǔn)化解析規(guī)則。也就是說,當(dāng)瀏覽器在遇到存在錯(cuò)誤的HTML時(shí)(如缺少結(jié)束標(biāo)記),通常會(huì)處理得很寬松。這是一個(gè)廣受贊譽(yù)的特點(diǎn),因?yàn)橄啾萖HTML來說,HTML?在此種情況下會(huì)繼續(xù)正常處理。IE10 就是這樣一個(gè)完全支持 HTML5 標(biāo)準(zhǔn)化解析規(guī)則的瀏覽器。
除此之外呢?我們來簡單看看 IE10 中針對 HTML5 等現(xiàn)代 Web 標(biāo)準(zhǔn)又增加的主要功能特性支持:
|
HTML5 方面 |
CSS3方面 |
其他方面 |
|
-異步腳本執(zhí)行 (Async Script Execution) - 文件API (File API) - 歷史 (History) - 表單驗(yàn)證 (Forms Validation) - Progress 和 Range 控制 - Web workers - Web sockets - 拖放(Drag and Drop) - 應(yīng)用緩存 (Application Cache) - 拼寫檢查 (Spellcheck) - 通道消息(Channel Messaging) - 更多 |
- Flexbox - Grid -定位浮動(dòng) (Positioned float) - 3D變換 (3D Transform) -動(dòng)畫 (Animation) -漸變 (Gradient) - Text Shadow - 去掉了CSS限制 - 更多 |
- Indexed Database - Web performance API - SVG 濾鏡效果 - 簡化觸控開發(fā)的 MS Pointers API - 比 IE9 更加強(qiáng)勁的圖形圖像處理 - 更多 |
其實(shí)早在 IE10 開發(fā)者預(yù)覽版的時(shí)候,就有人做過當(dāng)時(shí)的不同主流瀏覽器之間對 HTML5 支持度的綜合測評,這里給出一張圖表,展現(xiàn)的是各瀏覽器處理 HTML5 各種任務(wù)的能力考量,分?jǐn)?shù)越高越好:

當(dāng)然,當(dāng)時(shí)的測評還有其他的各方面,由于篇幅有限,就不一一列舉,當(dāng)時(shí)最后的結(jié)論是,IE10 除了在對 HTML5 標(biāo)準(zhǔn)支持度方面略顯落后外,在 HTML5 其他性能方面都完勝其他瀏覽器。時(shí)隔半年多,如今 IE10 正式版發(fā)布了,對 HTML5 標(biāo)準(zhǔn)的支持度方面又有了新的增強(qiáng)。
我們不妨找一臺帶獨(dú)立顯卡的 PC 體驗(yàn)一下魚缸速度測試(點(diǎn)擊圖片打開鏈接)
通過測試我們可以看到 IE10 對圖形圖像和 JavaScript 處理方面的性能優(yōu)勢,有了高性能的呈現(xiàn),那么對于富用戶體驗(yàn)的 HTML5 交互式網(wǎng)站而言,無疑是流暢體驗(yàn)的一種保障。
其實(shí)還有更多針對 HTML5 的測試,大家可以訪問 http://ietestdrive2.com/ 進(jìn)行體驗(yàn)。
IE10 能給消費(fèi)者和開發(fā)者帶來什么?
作為消費(fèi)者的我們,可以通過 HTML5 獲得一種輕量、明快的無插件瀏覽體驗(yàn),視頻、音頻和動(dòng)畫均不需要使用任何插件,直接通過瀏覽器呈現(xiàn)。而 IE10 會(huì)繼續(xù)利用 GPU 資源加速處理這些多媒體和 JavaScript,讓瀏覽體驗(yàn)變得更加快速自然。上圖展示的就是一個(gè) cnBeta 新聞?wù)军c(diǎn)利用 HTML5 等現(xiàn)代 Web 技術(shù)開發(fā)出來的新聞閱讀體驗(yàn),該網(wǎng)站在使用 Windows 8 UI 風(fēng)格的 IE10 打開之后體驗(yàn)更佳,帶給用戶專注的沉浸式用戶體驗(yàn)。
這幅圖展示的則是一個(gè)基于 HTML5 的網(wǎng)頁版游戲——割繩子,它的用戶體驗(yàn)毫不遜色于桌面版的應(yīng)用程序,或者 Windows 8 UI 風(fēng)格的、從應(yīng)用商店下載的割繩子 App.
上面這幅圖展示的也是一個(gè)網(wǎng)站應(yīng)用,通過瀏覽器訪問,基于 HTML5,在這里,您可以把照片自然地鋪開在桌子上,供您把玩和欣賞。該應(yīng)用著重展示的是觸控場景,通過它,您可以用手指輕松將照片鋪開、縮放和旋轉(zhuǎn),您可以體驗(yàn)到自然人機(jī)交互帶來的樂趣。當(dāng)然,照片應(yīng)用只是一個(gè)例子,生活中其實(shí)還有很多可以用觸摸作為交互手段的場景,特別是網(wǎng)頁游戲。微軟推出的 MS Pointers API 讓您的觸控開發(fā)起于一個(gè)全新高度,Pointer 事件封裝了觸摸、數(shù)字筆和鼠標(biāo)的輸入,有助于輕松構(gòu)建不依賴于硬件設(shè)備的交互方式的體驗(yàn)。
像這樣的炫酷的 HTML5 游戲和實(shí)用性網(wǎng)站,能夠給用戶帶來舒心的用戶體驗(yàn)。如果用戶具備觸摸設(shè)備,那么用戶還可以通過更加自然的人機(jī)交互方式與其互動(dòng)。試想,要是很多網(wǎng)站都具備這樣的用戶體驗(yàn),您每天瀏覽互聯(lián)網(wǎng)的時(shí)候,是不是會(huì)更加開心呢?我是非常期待的。

但是,這需要時(shí)間,需要開發(fā)者們的配合。開發(fā)人員一直是新技術(shù)普及和投產(chǎn)的核心人物,他們擔(dān)當(dāng)著應(yīng)用新技術(shù)開發(fā)出產(chǎn)品的重要使命。在 IE10,F(xiàn)12 開發(fā)人員工具將一如既往地為開發(fā)人員提供直觀的錯(cuò)誤排查和性能等跟蹤分析和調(diào)試,助力于 HTML5 網(wǎng)站的開發(fā)。國外已經(jīng)有了很多針對 HTML5 的成功網(wǎng)站和商業(yè)案例,國內(nèi)這一塊還得依靠我們國內(nèi)的廣大開發(fā)人員的努力。
"HTML5 增加了大量提升用戶體驗(yàn)的功能標(biāo)準(zhǔn):canvas 元素可以讓開發(fā)者在一個(gè)特定區(qū)域內(nèi)繪制各種復(fù)雜圖形,同時(shí)可以用 JavaScript 控制你所繪的圖形的動(dòng)效,使得非 flash 的豐富的視覺效果成為可能,用戶在移動(dòng)端和 PC 端可以享受到一致的視覺體驗(yàn);試想一個(gè)你曾經(jīng)使用過的網(wǎng)絡(luò)應(yīng)用程序,一個(gè)在線圖片編輯程序,你會(huì)用它做簡單的圖片處理,但絕對不會(huì)拿它代替 Photoshop,因?yàn)樗慕换バ浴㈨憫?yīng)率和功能性都遠(yuǎn)不及本地用程序。HTML5 能夠很好地解決這些問題。對于交互而言,它支持的 menu 元素能夠模擬菜單欄、工具欄、列表欄等本地應(yīng)用控件, 而且很容易實(shí)現(xiàn),Drag-and-Drop 功能可以模仿"將文件拖拽進(jìn)垃圾箱"的操作;對于響應(yīng)率而言, Programmable HTTP Cache and Serving 功能能使 Web app 內(nèi)容動(dòng)態(tài)寫入瀏覽器緩存,使 App 響應(yīng)率接近于本地應(yīng)用;Web Workers 允許 App 執(zhí)行多任務(wù),提高用戶并發(fā)操作的穩(wěn)定性能;Offline Web Application 允許 App 在離線狀態(tài)下存儲(chǔ)用戶數(shù)據(jù)、正常瀏覽。你還能通過瀏覽器獲取用戶的位置信息以及更多等待你去探索的功能。"—— 摘自IE瀏覽器中文網(wǎng)站 iefans.net
我覺得這對于開發(fā)者來說,是一個(gè)新的機(jī)遇,也是一份新的挑戰(zhàn)。從現(xiàn)在的趨勢看,Web 2.0 時(shí)代的網(wǎng)站已經(jīng)朝著應(yīng)用程序的趨勢在發(fā)展,只不過,現(xiàn)有的技術(shù)不能很好地滿足設(shè)計(jì)者對于渾然天成的網(wǎng)站效果的追求,也不能帶給用戶真正完好統(tǒng)一的用戶體驗(yàn)。踏入 HTML5 開發(fā)的園地,我們不僅可以開發(fā)出高質(zhì)量的、內(nèi)容精美的網(wǎng)站,更可以編織未來,編寫新的基于互聯(lián)網(wǎng)的 HTML5 應(yīng)用程序。設(shè)想一下未來的用戶不再下載應(yīng)用程序,而是打開一個(gè)網(wǎng)站完成他想做的事情的場景。
現(xiàn)在,各家主流瀏覽器廠商也為 HTML5 做好了準(zhǔn)備,是時(shí)候開始開發(fā) HTML5 的網(wǎng)站了,不論您是對現(xiàn)有的網(wǎng)站進(jìn)行升級,還是借機(jī)會(huì)將新的業(yè)務(wù)搭建在 HTML5 之上,都是很好的起點(diǎn)。使用 HTML5 做開發(fā),不僅可以給用戶帶來更多優(yōu)質(zhì)體驗(yàn),開發(fā)者自身也可以節(jié)省很多時(shí)間。其中最為突出的是,不必再為了不同的平臺和瀏覽器編寫差異性的代碼以確保用戶體驗(yàn)的一致了。Windows Phone 8 的移動(dòng)版 IE 瀏覽器采用的也是 IE10 的內(nèi)核,也有更多的掌上設(shè)備中的瀏覽器支持 HTML5,在我看看來,這對于開發(fā)者而言,是一個(gè)前所未有的機(jī)遇。
如果您想在這個(gè)新的開發(fā)領(lǐng)域大展拳腳,那么您也會(huì)遇到一些挑戰(zhàn)。針對 HTML5 的開發(fā),如果您選擇 IE10 作為一個(gè)平臺,那么正式版的 IE10 已經(jīng)能夠?yàn)槟拈_發(fā)提供卓越的支撐。IE10 對 HTML5 的支持已經(jīng)該進(jìn)得相當(dāng)好了,多點(diǎn)觸控技術(shù)可為用戶帶來新的自然體驗(yàn),同時(shí)支持多點(diǎn)觸控和多種觸控方式的 MS Pointers API 為您開發(fā)觸控友好的網(wǎng)站提供了捷徑,IE10 也使用了速度最快的 JavaScript 引擎,同時(shí)支持硬件加速,再有就是微軟 Windows 8 上桌面版的 IE10 同 Windows 8 UI 風(fēng)格的 IE10 一起實(shí)現(xiàn)了 PC 與平板瀏覽的體驗(yàn)一致。這從平臺的層面,為您步入 HTML5 開發(fā)掃清了一些障礙。另外,微軟也已通過一些案例的解讀和文檔的支持,為您掃除了一些頭疼的兼容性方面的障礙,例如如何兼容現(xiàn)有網(wǎng)站,如何在用戶使用舊版瀏覽器時(shí),HTML5 網(wǎng)站自動(dòng)進(jìn)行優(yōu)雅的降級(一樣具備良好的用戶體驗(yàn))等等。在這里,我想分享一份 IE10 開發(fā)兼容性白皮書 給大家,如果您感興趣,可以抽一點(diǎn)點(diǎn)時(shí)間進(jìn)行閱讀,如果它對您有幫助,也希望您能分享給您身邊的其他做 Web 開發(fā)的朋友們;如果您覺得它不夠好,請向我反饋各位的需求,看看大家還希望這份文檔講些什么內(nèi)容,以對大家的 HTML5 開發(fā)提供更大的幫助! J
最后,再給出一個(gè)針對開發(fā)者的資源——HTML5 開發(fā)攻略(http://www.beautyoftheweb.cn/bowdevelopers),這個(gè)是微軟為開發(fā)者準(zhǔn)備的聚合資源,這里有成功案例解析,有新特性的解讀,有開發(fā)好的示例,還有更多其他的您可能會(huì)用到的資源。希望大家能夠順利進(jìn)入 HTML5 開發(fā)的進(jìn)程中,也希望消費(fèi)者們能夠通過新的 HTML5 技術(shù)和 IE10 獲得您所喜愛的用戶體驗(yàn)!
佘華煜 (Eric Sheh),微軟 MVP,致力于為微軟 Windows 和 Office 用戶及 IT 專業(yè)人士提供更好的幫助與支持。 關(guān)注我的 新浪微博,加入 我要做電腦達(dá)人 微群,收聽每日 Office 效率提升秘籍~





浙公網(wǎng)安備 33010602011771號