一、前言
在目前的移動應用開發大潮下，使用web技術進行移動應用開發正變得越來越流行，它主要使用html5、css3、js等技術，在跨平台性、可移植性方面具有無可比擬的優勢，特別適合開發對性能要求不太高、項目不太龐大的應用。這對於有過web經驗及剛入門移動應用的同學來說，絕對是福音。
接下來的幾篇文章主要介紹使用web技術進行移動應用開發時，應遵循的一些‘最佳實踐’。這里所說的最佳實踐其實就是一些建議，它可以讓你的程序更加高效，涉及到代碼風格、標准等，例如縮進、空格、行寬、命名、代碼樣式、變量聲明和使用……隨着開發經驗的豐富，我會逐步更新這些文章。
使用‘最佳實踐’的好處：
- 提高性能（使用更少的CPU和帶寬）
- 提高跨瀏覽器的兼容性
- 提高代碼的可維護性（這對於較大的項目和團隊尤其重要）
- 提高代碼可讀性，以利於日后的審查和重構
- 有利於自動化任務實施，如構建腳本，自動化測試
- 更容易調試，節省時間，減少成本
二、html概述
html即超文本標記語言（Hyper Text Markup Language），它並不是一種編程語言，而是使用一套標記標簽來描述網頁。它的主要功能是展現網頁內容。
在經歷了幾代的標准的進化后，html5是目前的最新標准，而且正往這個方向大力推進。下面幾個章節中，將重點介紹使用html過程中的最佳實踐方案。這里主要參考了黑莓10的開發指南和W3C標准。
三、從模板開始
這個，做很多事情都是差不多的。把自己常用的代碼片段保存為一個模板，隨時調用，不僅節省時間而且能加快開發進度。寫重復的代碼是沒有意義的，因此當你創建了一個可以重用的基本結構時，就把它保存下來，供日后復用，這樣你的效率就越來越高。一個html模板應該包括web頁面的典型元素。比如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Heading</title> <link href="favicon.ico" rel="icon" type="image/x-icon"> <link rel="stylesheet" href="css/app.css"> <style type="text/css"> </style> </head> <body> <h1>Heading</h1> <p>The quick brown fox jumps over the lazy dog.</p> <script src="js/app.js"></script> </body> </html>
這個模板中，有幾個注意點：
- 這個應用會設置為全屏顯示，因為它包含了以下meta標簽：
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0
- Zooming函數被關閉了，因為設置了：
user-scalable=no
- 為了提高性能，js腳本部分被放在了body元素的底部，關於這點會在以后的js篇中介紹。
四、指定文檔類型（document type）
文檔開頭的 DOCTYPE 聲明位於文檔中的最前面的位置，處於<html>標簽之前。它會告訴瀏覽器書寫文檔的html版本，這會影響到瀏覽器對內容的渲染。還有就是當你進行html標准校驗時，校驗器也會根據這個 DOCTYPE 來選擇相應的html版本，以確定所寫代碼是否符合規范。
如果你沒有包括 DOCTYPE 的聲明，那么不同的瀏覽器就可能出現不同的渲染結果。使用這個聲明會要求瀏覽器使用相應的標准來解析頁面內容。
h5是目前的標准，包含了大量的新特性，聲明是很簡單的：
<!DOCTYPE html>
對於一些較老的設備和瀏覽器，可能需要聲明為其他的類型(HTML 4.01 Strict or XHTML 1.0 Strict)：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
五、把程序設計為離線下仍然可以使用
能隨時隨地地使用手機設備上應用程序的需求正越來越強，即使在離線狀況下。對於web應用，你可以使用h5的緩存功能W3C HTML5 application cache來：
- 離線下仍然可以使用
- 把資源緩存在本地以提高速度
- 僅下載更新的或改變的資源以減少加載次數和數據使用
程序緩存（即AppCache）可以讓你指定緩存的文件，這樣即使離線仍然可以訪問。當然你還可以利用開發平台提供的API來獲取本地存取文件的權限。
1.創建一個緩存清單（manifest）
為了使用AppCache，你的web應用必須為瀏覽器提供一個"manifest"，這個清單要列舉出在離線情況下你的應用需要的所有資源。頁面第一次加載后，"manifest"中列舉的資源就會從程序緩存中加載，而不是web服務器。"manifest"其實就是一個以".appcache"為后綴的文本文件（配置文件）。例如：
CACHE MANIFEST # 2012-03-08:v1 # Explicitly cached resources index.html css/app.css js/app.js # offline.html displays if the user is offline FALLBACK: / /offline.html # All other resources require an online connection NETWORK: * # Additional cached resources CACHE: img/logo.png
你的manifest文件的mime-type必須是"text/cache-manifest"，因此你需要在web服務器添加一行配置。例如，在Apache的httpd.conf文件添加一行：
AddType text/cache-manifest .appcache
為了訪問manifest文件，你必須在html文檔中聲明（通過添加html標記的manifest屬性，如下），manifest屬性指向相應的manifest文件。如果你的應用有多個頁面，那么每個頁面都要包含manifest屬性，否則這些頁面就不會成為AppCache，離線下也就不會工作了。
<html manifest="html5.appcache">
2.更新appcache
一旦你的應用被緩存了，它會一直被緩存直到滿足以下任何一個條件：
- 用戶清除了緩存
- manifest文件被改變了。注意：更新服務器上的資源不會觸發緩存的更新，你必須修改manifest文件本身
- 程序的緩存被程序自動更新了
3.相關資源
- ApplicationCache API specification
- Article from A List Apart Magazine
- BlackBerry WebWorks API reference
六、使用正確的viewport語法
viewpoint是用戶在手機設備上可以看到的矩形區域。你可以再meta標記中重寫viewpoint。但是記住，viewpoint在meta標記中的語法和在CSS中的語法並不一樣，你必須用逗號（commas）分隔不同的值，而不是分號（semicolons）。例如：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
七、創建一個站點的圖標（icon）
每一個瀏覽器都會把名為favicon.ico的文件作為該站點的icon。比如你經常會在地址欄、tab欄、書簽欄或者收藏夾看見這些小圖標：
瀏覽器在加載web頁面時，也會發送一個獲取favicon.ico的請求，如果沒有這個文件，你會在服務器日志中看到404的錯誤。為了避免錯誤，也為了頁面的美觀，你應該在web應用中包含一個這樣的文件。例如：
<link href="favicon.ico" rel="icon" type="image/x-icon">
八、使用外部文件
使用外部的js和css文件有很多好處，最主要的好處是讓頁面響應更快，原因如下：
- 外部文件會被瀏覽器緩存，這會減少http請求次數，另外，內聯的js和css會在每次加載主文檔的時候被下載
- 減少主文檔大小
當然，這並不是對每種情況都適用的，當滿足如下兩種情況時，就可以考慮將資源放在外部：
- 在多個html文檔中都有用到
- 並不經常改變
關於使用外部文件，這里有一些建議：
- 把資源轉移到一些知名的站點，這樣可以減少DNS查詢的次數
- 使用另一個域名的資源，對於特定的域名，瀏覽器有鏈接次數的限制，使用其他域名的資源，瀏覽器就可以並行地發送請求
- 對於常用的js庫，使用CDN（Content Delivery Network）托管的文件。這樣就可以減少延遲，提高緩存利用率和程序性能。例如使用google的CDN-hosted jQuery：
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
- 使用Web Inspector分析web應用的性能。
九、把css文件放在頂部
另一種提高頁面加載速度的辦法是把css文件放在文檔的頂部。把css文件放在head節點內，頁面就會逐步渲染，這樣就會感覺加載速度變快，而且能給用戶提供視覺上的反饋。但是如果放在文檔底部，瀏覽器就會阻塞渲染過程以避免樣式改變后的重繪過程，用戶在此時就會看到白屏。還有一種好處就是提高並行化，不像腳本，css並不需要同步處理。例如：
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="styles1.css"> </head> <body> ... </body> </html>
十、css中避免使用import
在html文檔中使用外部css文件時，要避免使用 @import規則，而是使用<link>標簽。因為在一些瀏覽器中，它的效果就像是該css文件處在html文檔底部一樣，這會阻塞頁面的加載。
<!--Not recommended: Using @import--> <style> @import url("styles2.css"); </style>
<!--Recommended: Using a LINK tag--> <link rel="stylesheet" href="styles1.css">
另外，@import規則還可以嵌套到css文件里，這阻塞了css文件的並行加載，例如：如果style1.css包含了以下
<!--Not recommended: Using @import--> @import url(styles2.css)
十一、把腳本放在底部
盡管W3C spec允許你可以把腳本放在head或body的任意地方，但是位置不同會影響到頁面的渲染，因為瀏覽器會停下來執行js代碼，而后面的內容渲染就會被阻塞。放在body底部就會有更多的內容被渲染，同樣有利於並行下載，你還不必擔心DOM是否加載完成，因為所有的東西都已經加載完了。
除非你使用不贊成使用的document.write來產生body元素，你的腳本通常都可以移到html文檔的底部。
<!--Recommended: Placing the script near the bottom of the BODY--> <html lang="en"> <body> ... <script src="js/app.js"></script> </body> </html>
<!--Not recommended: Placing the script in the HEAD--> <html lang="en"> <head> <script src="js/app.js"></script> </head> <body onload="init();"> ... </body> </html>
十二、推遲腳本加載（defer）
如果不想把腳本放在文檔底部，可以使用defer屬性延遲腳本的加載。該屬性告訴瀏覽器在頁面加載完成后才執行腳本。
<script src="js/app.js" defer></script>
但是，defer屬性在瀏覽器之間表現並不一致。為了避免跨瀏覽器的差異，可以使用 "lazy loading"的方法，即直到用到該腳本時才加載。例如：
function lazyload() { var elem = document.createElement("script"); elem.type = "text/javascript"; elem.async = true; elem.src = "app.js"; // contains more than 25 uncalled functions document.body.appendChild(elem); } if (window.addEventListener) { window.addEventListener("load", lazyload, false); } else if (window.attachEvent) { window.attachEvent("onload", lazyload); } else { window.onload = lazyload;
}
更多資源可參考：