Web前端性能分析
Web前端性能通常上代表著一個完全意義上的用戶響應時間，包含從開始解析HTML文件到最後渲染完成開始的整個過程，但不包括在輸入url之後與服務器的交互階段。下面是整個過程的各個步驟：
- 開始解析html文件，從head到body按順序從上到下。
- 當解析到head部分的css外部鏈接時，同步去下載，如果遇到外部js鏈接也是下載
- 接著解析body部分，邊解析邊開始生成對應的DOM樹，同時等待css文件下載
- 等到css文件下載完畢，那麽就同步去用已經生成的DOM節點+css去生成渲染樹
- 渲染樹生成結構模型，接著同步計算渲染樹節點的布局位置
- 計算完成節點坐標後，同步開始渲染
- 進行過程中如果遇到圖片則跳過去渲染下面內容，等待圖片下載成功後會返回來在渲染原來圖片的位置
- 如果渲染過程中出現js代碼調整DOM樹機構的情況，也會再次重新來過，從修改DOM那步開始
- 最終所有節點和資源都渲染完成
整個過程中會有很多的分別請求，所以TCP連接會很多，並且每一個用完都會自己關了，或者需要在keep-live字段標記上不自動關閉。
對於Web前端的性能分析從HTML網頁的結構出發，分析其代碼的合理性。性能分析工具使用Page Speed。Page Speed最初是Google內部使用的改進網頁設計的工具——它整合在Firefox的著名插件Firebug中。當用戶運行Page Speed，可以立即獲得如何改進網頁載入速度的建議。Page Speed工具提供瀏覽器插件和在線網站測評兩種方式，這裏使用在線網站的方式進行評測。
Page Speed Insights能根據以下內容衡量網頁如何提升其性能：
l 首屏加載時間：從用戶請求新頁面到瀏覽器呈現首屏內容所用的時間。
l 完整的網頁加載時間：從用戶請求新網頁到瀏覽器完全呈現網頁所用的時間。
Page Speed的網站為：
https://developers.google.com/speed/pagespeed/insights/?hl=zh-CN
網頁截圖如下：
在文本框中分別輸入我們需要評測的兩個網站http://sse.hust.edu.cn和http://cs.hust.edu.cn，即可獲得對應評分。Page Speed得分範圍是從0到100分。分數越高，代表性能越好。85分或更高分表明網頁性能良好。
其評分規則在以下鏈接：
https://developers.google.com/speed/docs/best-practices/rules_intro
包括10個Page Speed規則和5個可用性規則，分別是：
Page Speed規則
l 避免目標網頁重定向
l 啟用壓縮功能
l 改善服務器響應時間
l 使用瀏覽器緩存
l 縮減資源大小
l 優化圖片
l 優化CSS發送過程
l 按優先級排列可見內容
l 移除阻止呈現的JavaScript
l 使用異步腳本
可用性規則
l 避免使用插件
l 配置視口
l 調整內容的尺寸，使其符合視口設置
l 適當調整點按目標的尺寸
l 使用清晰可辨的字體大小
我們對目標網站的評分結果如下：
- 軟件學院官網PC端
- 軟件學院官網移動端
- 計算機學院官網PC端
- 計算機學院官網移動端
總結：根據以上結果我們匯總得到性能報告如下。
|
測試網站平臺 |
軟院PC |
軟院移動 |
計院PC |
計院移動 |
|
總分數（%） |
Needs Work 72 |
Poor 64 |
Needs Work 69 |
Poor 57 |
|
啟用壓縮 |
√ |
√ |
√ |
√ |
|
縮減CSS |
√ |
√ |
√ |
√ |
|
縮減服務器響應時間 |
|
|
√ |
√ |
|
避免使用著陸頁重定向 |
√ |
√ |
√ |
√ |
|
縮減HTML |
|
|
|
|
|
縮減JavaScript |
√ |
√ |
|
|
|
按優先級排列可見內容 |
√ |
√ |
√ |
|
|
優化圖片 |
|
|
|
|
|
清除首屏內容中阻止呈現的JavaScript和CSS |
|
|
|
|
|
使用瀏覽器緩存 |
|
|
|
|
可以看到，軟件學院的網站相對於計算機學院都完成了縮減JavaScript的優化，但也缺少了縮減服務器響應時間的優化，計算機學院的移動端沒有完成按優先級排列可見內容。另外還有一些別的優化沒有完成，分別是：
- 縮短服務器響應時間：服務器響應時間表示加載必要HTML以開始呈現服務器所托管網頁的時間過長。應將服務器響應時間控制在200毫秒以內。有很多潛在因素都可能會延緩服務器響應，例如應用邏輯緩慢、數據庫查詢緩慢、路由緩慢、框架、庫、資源CPU不足或內存不足等。需要考慮所有這些因素，才能改善服務器的響應時間。
- 縮減JavaScript，可以使用工具Closure Compiler、JSMin或YUI Compressor。創建一個使用這些工具的構建流程，以便縮減開發文件的大小並對其進行重命名，然後將其保存到正式版目錄。
- 按優先級排列可見內容：Page Speed Insights檢測到系統需要進行更多次的網絡往返來呈現網頁的首屏內容。工具提供的建議是：為提高網頁加載速度，限制呈現網頁首屏內容所需的數據（HTML標記、圖片、CSS和JavaScript）大小。可以嘗試以下幾種方法：結構化HTML，以便首先加載關鍵的首屏內容；減少資源所用的數據量。
- 縮減HTML：要縮減HTML的大小，可以使用Page Speed Insights Chrome擴展功能來生成優化版HTML代碼。上面4個測試例子中都有17%左右的大小可以縮減。
- 優化圖片：盡量減小圖片尺寸，以縮減用戶等待資源加載的時間。適當地設置圖片的格式並進行壓縮可以節省大量的數據字節空間。建議是對所有圖片進行基本優化和高級優化。基本優化包括裁剪不必要的區域，將顏色深度降至可接受的最低水平，移除圖片評論以及將圖片保存為恰當的格式。可以使用任意圖片編輯程序（例如，GIMP）執行基本優化。高級優化包括對JPEG和PNG文件執行進一步的壓縮（無損壓縮）。
- 清除首屏內容中阻止呈現的JavaScript和CSS：網頁中有多個阻止呈現的腳本資源和CSS資源。這會導致呈現網頁的過程出現延遲。在資源加載完畢之前，網頁上不會直接呈現任何首屏內容。應該嘗試暫緩或異步加載阻止資源，或者將這些資源的關鍵部分直接內嵌到HTML中。
- 使用瀏覽器緩存：在HTTP標頭中為靜態資源設置過期日期或最長存在時間，可指示瀏覽器從本地磁盤中加載以前下載的資源，而不是通過網絡加載。
結論：兩個網站的前端都經過有一定程度的優化，但是仍有可優化的空間，總體來說，軟件學院的web前端性能優化優於計算機學院。
Web前端性能分析