如何測試並優化在HTML5框架下的網頁前端效能？

　　1、利用自動化工具，目前主流的前端效能評測工具包括dynaTrace Ajax Edition、yslow及page speed，這些工具可以做到：支援各種IE瀏覽器，支援JS函式級的效能分析，幫助開發和測試人員有針對性地提出優化改進網頁的前端效能。

　　2、熟悉HTML網頁構架語言，如一些網頁標籤的運用。HTML5的video標籤的運用，通過增加一個<video>元素到您的網頁，就可以輕鬆地在網頁上播放視訊，並且不需要其它外掛。可以使用<video>和<source>同時提供三種視訊檔案。<canvas>，它是HTML 5一個強大的新功能，可以用於各種圖形應用， 在現代的瀏覽器中的JavaScrip的效能提升也足以應付影象和視訊處理需求。<canvas>為HTML添加了一個二維的繪圖區域。乍一看，<canvas>適於建立一個簡單的繪圖程式，可以使用線，弧，和矩形。通過CSS3，我們可以輕鬆實現以前只能通過JavaScript實現的網頁效果。例如，當滑鼠劃過時，需要元件可以淡入淡出，以前必須寫複雜的JavaScript程式碼或者使用一個UI庫(jQuery，scriptaculous)。而通過CSS3，你就不再需要寫程式碼了。例如，大量圖片顯示在網頁上，會使網頁的響應速度變慢，甚至難以忍受。在HTML5標準之前，伺服器端載入頁面時用js和flsh程式碼來完成，這不僅要優化js指令碼程式碼來保證響應速度，還需要選擇或者製作適合網站規模的相應flsh文字。從開發角度來說比較複雜，從測試角度來說，會影響前端效能。

　　3、測試並優化頁面程式碼封裝，在開啟一個新頁面時候，伺服器端首先會載入頁面上各種指令碼程式，指令碼程式的多少、排列順序、複雜程度、指令碼檔案或者程式碼中無重複指令碼都會影響頁面的開啟速度，進而影響使用者的瀏覽心情。所以對指令碼程式碼的規範和頁面程式碼的是否封裝是很重要的。如下圖，程式碼示例，儘量不要在頁面出現散亂的指令碼程式碼，如定義css的<style></style>，定義<script type="text/javascript"> function() {}</script>。應該把他們統一封裝在不同路徑檔案下，在使用時候直接呼叫即可。css檔案字尾為.css，<link href="/Style/default.css" rel=" " type=" " />。Javascript檔案字尾為.js，<script src="/Javascript/main.js" type=" "></script>。

　　這樣做可以對資原始檔進行優化，可以使伺服器檔案內容的物理容量變小，在目前電子商務和電子政務中，主要流行的絕大部分業務依舊是web pages （離線瀏覽檔案的存放位置。當某個站點被設成允許離線使用時，就會在該資料夾中生成對應的檔案）。這樣可以降低在客戶端訪問伺服器端時，檔案的物理容量小，加快傳輸時間和載入時間。

　　整體程式碼如下：

　　4、測試XSS（Cross Site Script），跨站指令碼攻擊。它指的是不懷好意的攻擊者向Web頁面裡插入惡意html程式碼，當用戶瀏覽該頁之時，已經嵌入的惡意html程式碼會被執行，從而達到惡意使用者的特殊目的。

　　示例：假如你可以釋出資訊的功能存在漏洞，並可以執行指令碼中加入一個惡意指令碼，那麼目前看到釋出資訊人的瀏覽器都會執行這個指令碼彈出提示框，惡意指令碼就會被作為某一標籤的內容顯示。如果你正在頁面進行資料輸入操作，比如輸入使用者名稱、密碼等，更新後輸入位置會顯示到頁面中的某一個標籤程式碼，如果輸入的是nihao<script src="hack.js" type="text/javajscript"></script>

　　那麼如果不做過濾直接顯示到頁面，會引進一個第三方的js程式碼並且會執行。