支付寶、騰訊前端開發工程師談實戰HTML5

如今大熱的 HTML5 到底美在哪里？HTML5到底能為實際的移動開發帶來哪些改變？來自支付寶和騰訊的前端開發工程師們有他們自己的看法。

上周，在一場名為“技術風云會”的定期討論活動中，HTML5小組杭州聯盟的同學、阿里巴巴集團 HTML5 愛好者，以及支付寶浙大校友會的會員集中討論了 HTML5 對前端開發帶來的直接改變。

“一個東西美不美就看解決實際問題的能力有多少”，阿里云云手機服務運營部的前端開發工程師正邪（花名）說，“現在 HTML5 這么火，很多人就拿它跟 Flash 去做對比，說 Flash 多么多么爛，說 HTML5 多么多么好。實際上我們創作的內容最后是給用戶去看的，如果這個東西用戶覺得好，不管用什么技術我覺得都是次要的。”

來自騰訊Q＋團隊的開發工程師元彥則從性能分析的角度介紹了他眼中的 HTML5，“預取一共有兩部分：一部分是資源的預取，還有一部分是 DNS 的預解析，”元彥說，他分享了來自騰訊Q+ 的多個案例。

另外，支付寶移動產品部前端開發工程師軒與（花名）分享了對于 CSS3 中的變形矩陣的理解，“一位日本工程師使用 CSS 畫了一張圖，粗看上去大家或許會以為這是一張圖片，可惜不是，我可以很明確地告訴大家它是由 DIV 組成的，CSS 通過 TRANSFORM 已經可以實現到這樣一個程度。”

來自一淘的前端開發工程師玄寂（花名）著重闡述了 web app 離線應用的構建，“給大家描述一種情形，當我們在無任何網絡的情況下使用 wifi 版 iPad 用 safari 訪問頁面的時候會有如下提示‘safari cannot open the page because it is not connected to the Internet’。今天講的主題就是如何解決這種問題，applicationCache，離線緩存”。

支付寶技術部支付開發組的工程師心武（花名）則仔細分析了 HTML5 帶來的移動開發變革，“‘Hybrid’融合了 web 與 native 的優點，更能滿足企業應用。使用 HTML5 作為顯示載體的 Hybrid App 具有跨平臺特性，能輕松展現復雜的排版內容，降低了開發的門檻，提高了整體的效率。”

下面看看這些一線開發者們的 HTML5 實戰體會分享。

阿里云前端開發工程師正邪（廖健）——HTML5之美

HTML5的產生以及它的設計完全是遵循了一些常見的原理。

第一條：發送時保守、接受時開放。作為工程師，發送給瀏覽器的文檔應該盡量的嚴謹，但是瀏覽器作為接收方，應該持有一個開放的姿態，而不會因為某個文檔有問題，到瀏覽器窗口里面就不顯示了，只是留下一片空白給用戶。既然 HTML 存在標簽沒有正常閉合的可能性，也存在屬性丟失的情況，只要文檔沒有產生二義性，瀏覽器應該猜測到最終的行為并做出正確處理，在技術層面瀏覽器有理由這么做。

第二：避免不必要的復雜性。我們在編寫的 HTML 的時候，可能會定義一個很長行長的文檔類型聲明，這個文檔類型聲明是給瀏覽器看的，如果能夠簡化它，在說創作的時候能省下一些時間，而且也不用浪費力氣去記那些難記的字符。實際上，省略大多數字符，瀏覽器也能按照我們期望的那樣去運行。 還有 script 標簽，我們可能會設置它的 type 為“text/javascript”，實際上也是不必要，如果 type 屬性沒有被聲明，默認就按 JavaScript 處理。類似的東西有很多，在文檔里面能省掉的我們就應該大膽地省掉，這樣不僅是在創作這個文檔的時候，能夠給我們帶來這些方便，而且在共同維護的時候也能帶來一些益處。

第三：網絡價值同達到網絡用戶數量的平方成正比。現在 HTML5 這么火，很多人就拿它跟 Flash 去做對比，說 Flash 多么多么爛，說 HTML5 多么多么好。實際上我們創作的內容最后是給用戶去看的，如果這個東西用戶覺得好，不管用什么技術我覺得都是次要的。

最后我們要的是將服務推送到用戶面前，而不是要說某種技術多么好，可以殺死另一個技術。實際上在這里，它們的協同工作才是符合 HTML5 的設計思想，在這個層面上我覺得 Flash 也是 HTML5 中的一員。 第四，大多數人的意見和可運行的代碼。沒有 HTML5 規范的時候，瀏覽器廠商可以各自為陣，可以加入了自己的標準，雖然這些標準不是 W3C 制定的，但是大多人都有這些需求，它們能解決實際問題。所以也刺激 W3C 加入到這些標準的制定中去。

騰訊Q＋團隊開發工程師元彥——從性能分析的角度去介紹 HTML5

關于簡潔的標簽方式

HTML5從這個名字大家可以聽出，它是從 HTML4 繼承過來的。HTML4里面有嚴格模式跟過渡模式，HTML5是支持這種過渡模式的，就是你可以不把一些標簽閉合。但是，我并不推薦所有的標簽，比方說 BODY 標簽的不閉合，這種我們不推薦。但是像最常用的P標簽，還有列表標簽 li 可以。為什么這樣說？首先從視覺角度來說，這樣的方式更簡潔。關鍵的是：在文檔傳輸過程中，內容會更少。

HTML5標簽屬性的聲明支持三種方式。一種是單括號、雙括號和不加括號。為了減少文檔大小，我選擇不加雙引號的方式或單引號的方式。但是要注意，假設是類屬性的聲明，因為屬性可能包括多個類，多個類的時候則必須用括號括起來。在這方面，給大家看一下谷歌的一個實踐。谷歌自己有一個頁面完全實踐了上面的東西，文檔的大小減少了 20%，使 HTML 文檔的傳輸減少了 20%。如果把整個都實踐起來，可以達到5%—20% 之間的減少。這是第一步，縮減 HTML 文檔的大小。

關于預取

預取，一共有兩部分：一部分是資源的預取，還有一部分是 DNS 的預解析。

資源預加載有幾個點需要注意：  

一，預加載只是在瀏覽器空閑的時候才會去拉，但不保證一定會去拉，這是很重要的一點。因為本身瀏覽器有一個全局的監聽器，這是內部的一個接口，當瀏覽氣空閑的時候，它會去執行瀏覽器空閑的時候應該做事情，但是這個空閑的回調不一定被觸發，所以說并不保證一定會執行預加載。 

二，Chrome 不支持 HTTPS 資源的預加載，像 Alipay 是 HTTPS 的頁面，Chrome 不會去預拉取。

三，一個預拉取的頁面雖存在后不可見，實際上它是在正常解析。假如說我預拉取登陸頁面，登陸頁面有很多資源，比方說有圖片，有 CSS 文件，JS 文件。它是從上往下正常的會被解析，解析的過程中，這個頁面沒有顯現，但是它實際上是存在的。在 HTML5 里面，可通過 document.visibilityState 得到當前頁面狀態，通常頁面有兩種狀態，可見與不可見，但是現在有一個新的狀態，叫做預渲染的狀態。可以直接通過 document.visibilityState 是否等于 prerender 來判斷頁面是否在預渲染狀態。

支付寶前端開發工程師軒與 （王煒）——CSS3-Transform：Matrix2D & 3D

一位日本工程師使用 CSS 畫了一張圖，粗看上去大家或許會以為這是一張圖片，可惜不是，我可以很明確地告訴大家它是由 DIV 組成的，可能有人會懷疑這怎么會是由 DIV 組成的，為了證明我不是在忽悠，使用 safari 的調試器，我們可以看到它確實通過了很多的 DIV 的變形來完成的，可以說非常地美輪美奐，但是你卻完全看不出來它是由 DIV 畫成的。CSS 通過 TRANSFORM 已經可以實現到這樣一個程度。

接下來我們一起深入了解一下他背后的東西。

先講 2D 變形的四種基本方法。

第一個變形方式叫平移（TRANSLATE）。

第二個是伸縮（SCALE）。

第三個叫傾斜（SKEW）。

第四個叫旋轉（ROTATE）。

然后進入主題 MATRIX。2DTRANSFORM 用了六個參數組成了2*3階的矩陣，其實標準的是 9 個參數，一共是3×3的矩陣，但是由于這塊主要是 2D 的，所以實際使用過程中（變化當中）是通過六個參數來表達。

A 是代表了X軸的 SCALE，就是我們前面說的X軸的伸縮，這個具體的值是代表了在X軸上它所伸縮的單位長度。B對應的Y軸上 SKEW，是在Y軸上歪斜的角度；C是X SKEW，是在X軸上傾斜的角度；D是在Y SCALE，是在Y軸上面的伸縮，E是X軸上的 TRANSLATE，即在在X軸上平移。F對應的是Y軸的 TRANSLATE，在Y軸上的平移。

通過 TRANSLATE 你可以傳 1 和0，也可以通過 MATRIX 傳遞把它改成 0 和1，然后可以得到同樣變形的效果。

一淘前端開發工程師玄寂（姜維）——Web app 離線應用的構建

手機淘寶，當初定了兩種方案，一種是 localStorage，另外一種是 applicationCache，最后采取的方案是 applicationCache+localStorage。

我們的做法是分離出數據層和基礎資源文件層，數據層主要是 ajax 獲得的數據，而我們利用的 applicationCache 緩存的是一個框架性的東西，基礎 HTML 文檔、JS 文件、CSS 文件、圖片文件、字庫文件 ttf，以及可能需求的一些媒體文件，localStorage 存一些系統信息，關于字庫文件，其實這里的字庫是一個 icon 集合，我們把大量 icon 集合到一個字庫文件，通過對應表來對應相應的 icon，由于字體是矢量的這解決了為不同 iPhone 分辨率的適配問題。當然還減少了 http 請求數。最最重要的是，字庫把原有圖片體積上足足可以減小 2 分之一。當然這也存在一點點的維護性問題。

這種結合 applicationCache，localStorage 的 OPOA 的方案，看上去似乎高枕無憂，但是在多人協作問題上顯現的特別棘手，由于我們在項目中又引入了 backbone（JS 中的 MVC 框架）項目成員溝通成本增大很多。最后我們的方案是先有專人介入 MVC，架設好最核心的應用體系，然后分配到 page 由不同人開發。另外和 pc 端 one page 還有點不一樣的地方是我們移動端可能還需求頁面與頁面間切換的效果，所以大部分時候我們的 view 層可能需要被緩存，這個緩存言下之意就是顯示與隱藏，所以在管理 view 上要做好特別的管理，否則很可能會導致內存的溢出。這個問題目前還沒有很好的解決方案，但是之后會參考 iOS native 里面有一個 navigator 的對象，它會有一個動態管理的過程。

大家可以到 http://www.slideshare.net/pigcan/applicationcache 查看本次分享的 ppt。

支付寶開發工程師心武 （杜偉）——HTML5帶來的移動開發變革

如何實現“Hybrid”

“Bridging the gap between the web and the SDK”，這是對于如何實現 Hybrid 的最好描述。在手機 OS 中，Web 頁面的載體（如 WebView）是 OS 的一部分，被包含在 SDK 中的。當 Html 頁面解析時，WebViewWebBrowser 充當了中間人的作用，它以超出瀏覽器的界限在 Html 頁面中加入額外的操作，這就成為了 web 與 native 建立連接的基礎。例如在 Android 中，webview 組件有 addJavascriptInterface (Object,String)方法，這個接口的作用是將一個 Java 對象提供給 Html 頁面的 JS 代碼訪問。

Hybrid 利器——PhoneGap

PhoneGap 是現下比較流行的 Hybrid 框架，08年推出，11年 10 月被 Adobe 收購，隨后被捐贈給 Apache 軟件基金會，并更名為“Cordova”。PhoneGap 入門并不困難，在官網上可以方便的找到它的使用步驟、支持的 API 以及跨平臺應用構建工具。

其實，PhoneGap 自帶的 API 意義不是很大，它提供的 Plugin 擴展機制才是解決問題的關鍵。實際應用開發中，我們需要針對不同平臺開發特定的 Plugin 插件，這會喪失一定的跨平臺能力，但卻可以達到“隨心所欲”的地步。