Web前端性能分析

Web前端性能一般上表明着一個徹底意義上的用戶響應時間，包含從開始解析HTML文件到最後渲染完成開始的整個過程，但不包括在輸入url以後與服務器的交互階段。下面是整個過程的各個步驟：

1. 開始解析html文件，從head到body按順序從上到下。
2. 當解析到head部分的css外部連接時，同步去下載，若是遇到外部js連接也是下載
3. 接着解析body部分，邊解析邊開始生成對應的DOM樹，同時等待css文件下載
4. 等到css文件下載完畢，那麼就同步去用已經生成的DOM節點+css去生成渲染樹
5. 渲染樹生成結構模型，接着同步計算渲染樹節點的佈局位置
6. 計算完成節點座標後，同步開始渲染
7. 進行過程當中若是遇到圖片則跳過去渲染下面內容，等待圖片下載成功後會返回來在渲染原來圖片的位置
8. 若是渲染過程當中出現js代碼調整DOM樹機構的狀況，也會再次從新來過，從修改DOM那步開始
9. 最終全部節點和資源都渲染完成

整個過程當中會有不少的分別請求，因此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  使用清晰可辨的字體大小

咱們對目標網站的評分結果以下：

1.軟件學院官網PC端

 

 

2.軟件學院官網移動端

 

 

3.計算機學院官網PC端

 

 

4.計算機學院官網移動端

 

 

總結：根據以上結果咱們彙總獲得性能報告以下。

測試網站平臺	軟院PC	軟院移動	計院PC	計院移動
總分數（%）	Needs Work 72	Poor 64	Needs Work 69	Poor 57
啓用壓縮	√	√	√	√
縮減CSS	√	√	√	√
縮減服務器響應時間			√	√
避免使用着陸頁重定向	√	√	√	√
縮減HTML
縮減JavaScript	√	√
按優先級排列可見內容	√	√	√
優化圖片
清除首屏內容中阻止呈現的JavaScript和CSS
使用瀏覽器緩存

能夠看到，軟件學院的網站相對於計算機學院都完成了縮減JavaScript的優化，但也缺乏了縮減服務器響應時間的優化，計算機學院的移動端沒有完成按優先級排列可見內容。另外還有一些別的優化沒有完成，分別是：

1. 縮短服務器響應時間：服務器響應時間表示加載必要HTML以開始呈現服務器所託管網頁的時間過長。應將服務器響應時間控制在200毫秒之內。有不少潛在因素均可能會延緩服務器響應，例如應用邏輯緩慢、數據庫查詢緩慢、路由緩慢、框架、庫、資源CPU不足或內存不足等。須要考慮全部這些因素，才能改善服務器的響應時間。
2. 縮減JavaScript，可使用工具Closure Compiler、JSMin或YUI Compressor。建立一個使用這些工具的構建流程，以便縮減開發文件的大小並對其進行重命名，而後將其保存到正式版目錄。
3. 按優先級排列可見內容：Page Speed Insights檢測到系統須要進行更屢次的網絡往返來呈現網頁的首屏內容。工具提供的建議是：爲提升網頁加載速度，限制呈現網頁首屏內容所需的數據（HTML標記、圖片、CSS和JavaScript）大小。能夠嘗試如下幾種方法：結構化HTML，以便首先加載關鍵的首屏內容；減小資源所用的數據量。
4. 縮減HTML：要縮減HTML的大小，可使用Page Speed Insights Chrome擴展功能來生成優化版HTML代碼。上面4個測試例子中都有17%左右的大小能夠縮減。
5. 優化圖片：儘可能減少圖片尺寸，以縮減用戶等待資源加載的時間。適當地設置圖片的格式並進行壓縮能夠節省大量的數據字節空間。建議是對全部圖片進行基本優化和高級優化。基本優化包括裁剪沒必要要的區域，將顏色深度降至可接受的最低水平，移除圖片評論以及將圖片保存爲恰當的格式。可使用任意圖片編輯程序（例如，GIMP）執行基本優化。高級優化包括對JPEG和PNG文件執行進一步的壓縮（無損壓縮）。
6. 清除首屏內容中阻止呈現的JavaScript和CSS：網頁中有多個阻止呈現的腳本資源和CSS資源。這會致使呈現網頁的過程出現延遲。在資源加載完畢以前，網頁上不會直接呈現任何首屏內容。應該嘗試暫緩或異步加載阻止資源，或者將這些資源的關鍵部分直接內嵌到HTML中。
7. 使用瀏覽器緩存：在HTTP標頭中爲靜態資源設置過時日期或最長存在時間，可指示瀏覽器從本地磁盤中加載之前下載的資源，而不是經過網絡加載。

結論：兩個網站的前端都通過有必定程度的優化，可是仍有可優化的空間，整體來講，軟件學院的web前端性能優化優於計算機學院。