前端性能優化概要設計

1.簡介

1.1 編寫目的

部門還沒有有性能優化的的指導規範,如何優化,以及優化的標準尚不明確,而性能優化直接關係用戶體驗且開發迭代過程當中不免會有所忽視，性能會伴隨產品的迭代而有所衰減。隨着頁面的愈來愈大，功能愈來愈複雜，咱們須要一套準則和規範用語指導優化咱們的開發。
預期讀者:產品經理 項目經理 前端開發 java 開發

1.2 背景

性能會伴隨產品的迭代而有所衰減，公司多個項目都在不斷更新迭代，尤爲是9800項目,已經更新迭代至4.0版本，還有和能源前端組件，做爲組件不只僅是功能上符合的，性能上也應該符合規範，因此制定性能優化的標準和規範就變得十分重要了。

1.3 參考資料

《雅虎網站頁面性能優化的34條黃金守則》
《7 天打造前端性能監控系統》
《檢測網站性能的利器window.performance》

2.整體架構

2.1 系統說明

以改善用戶體驗爲終極目標，，以瀏覽器加載順序爲流程線，逐個優化，約定工做規範，給出優化方案。
根據性能黃金法則: 只有10%-20%的最終用戶響應時間花在接收請求的HTML文檔上，剩下的80%-90%時間花在HTML文檔所引用的全部組件(圖片，script，css，flash等等)進行的HTTP請求上。再對緩存、加載方式 和圖片優化作下細化介紹。

2.2 運行環境

軟件環境：
客戶端瀏覽器：ie八、ie九、ie十、ie十一、chrome
客戶端操做系統：window7 、window8
硬件環境：
CPU 雙核、>=3G
內存 >=2G
網卡 100M以上以太網卡
2.3 基本設計概念以及處理流程
基本設計概念：根據用戶體驗爲終極目標，從瀏覽器的加載順序，分析每一個加載過程，優化每一個步驟，去優化整個頁面。而後經過緩存、加載方式、圖片這3個對性能影響較爲重要的方面進行闡述。最後引入2個比較簡單且十分好用的性能分析工具。
處理流程，見下圖：

2.4 整體結構及模塊劃分

3.模塊說明

3.1 PD-001用戶體驗

3.1.1 模塊功能描述

對於用戶來講他感受到的爲何頁面打不開、爲何按鈕點擊不了、爲何圖片顯示這麼慢。而對於工程師來講，可能關注的是 DNS 查詢、TCP 鏈接、服務響應等瀏覽器加載過程指標。咱們根據用戶的痛點，將瀏覽器加載過程抽取出四個關鍵指標，即白屏時間、首屏時間、用戶可操做、總下載時間。
3.1.2 模塊框架設計以及處理流程

3.1.3 子模塊設計說明
這4個模塊的時間越少越好。

3.2 PD-002瀏覽器的加載順序

3.2.1 模塊功能描述

瞭解瀏覽器的加載順序，從原理上去優化每一個步驟。

3.2.2 模塊框架設計以及處理流程

便於咱們理解的流程圖：

換個能夠量化的流程圖：

3.2.3 子模塊設計說明

再細講一下重棑和重繪的注意要點：

3.3 PD-003緩存

3.3.1 模塊功能描述
瀏覽器緩存就是當你打開一個網頁，瀏覽器會自動下載副本到你電腦上，就至關於你另存爲網頁到某個地方而已，只不過這裏是自動而已。固然不是瀏覽器能把各類 網頁都能下載到本地電腦上，它是有特殊狀況。（這個後面會說到）固然客戶端緩存是否須要是能夠在服務端代碼上控制的。那就是響應頭。響應頭告訴緩存器不要保留緩存，緩存器就不會緩存相應內容。
將數據存儲在本地客戶端，無需和服務器的交互，進而從本地獲取數據而不是遠程獲取數據，既可下降網絡流量，又可提高瀏覽器響應能力。數據庫本地存儲；---web SQL Database (ie 暫不支持，故不做考慮)。提升Ajxa性能的措施中最重要的方法就是使響應具備可緩存性。
3.3.2 模塊框架設計以及處理流程

3.3.3 子模塊劃分列表
子模塊編號 子模塊名稱 功能描述 是否關鍵模塊
PD-003-001 響應頭 經過控制響應頭，控制客戶端緩存 是
PD-003-002 本地緩存 localStorage與sessionStorage 是
PD-003-003 ajax緩存 使ajax響應具備可緩存性 是
3.3.4 子模塊設計說明
經過響應頭控制客戶端的緩存；響應頭各個值對緩存的影響，見下表：

操做	行爲
打開新窗口	若是指定cache- control的值爲private、no-cache、must-revalidate,那麼打開新窗口訪問時都會從新訪問服務器。而若是指定了 max-age值,那麼在此值內的時間裏就不會從新訪問服務器,例如：Cache-control: max-age=5 表示當訪問此網頁後的5秒內再次訪問不會去服務器.
在地址欄回車	若是值爲private或must-revalidate,則只有第一次訪問時會訪問服務器,之後就再也不訪問。若是值爲no-cache,那麼每次都會訪問。若是值爲max-age,則在過時以前不會重複訪問。
按後退按扭	若是值爲private、must-revalidate、max-age,則不會重訪問,而若是爲no-cache,則每次都重複訪問.
按刷新按扭	不管爲什麼值,都會重複訪問.

使用本地緩存取代cookie緩存，本地緩存的優勢：以下圖

1. ajax也要進行緩存；

3.4 PD-004加載方式

3.4.1 模塊功能描述
根據須要，根據場景不一樣選擇不一樣的加載方式，達到提高用戶體驗的效果。
3.4.2 模塊框架設計以及處理流程

3.4.3 子模塊劃分列表
子模塊編號 子模塊名稱 功能描述 是否關鍵模塊
PD-004-001 同步加載 都加載完纔給用戶看 是
PD-004-002 分級加載 同步異步相結合，重要的寫加載 是
PD-004-003 按需加載 根據須要加載，用戶不觸發該功能就不加載 是
3.4.4 子模塊設計說明

3.5 PD-005圖片優化

3.5.1 模塊功能描述
性能黃金法則: 只有10%-20%的最終用戶響應時間花在接收請求的HTML文檔上，剩下的80%-90%時間花在HTML文檔所引用的全部組件(圖片，script，css，flash等等)進行的HTTP請求上。其中圖片又是文檔組件中的重重之重；故圖片的優化，對性能的提高有直接的影響。
3.5.2 模塊框架設計以及處理流程

3.5.3 子模塊劃分列表
子模塊編號 子模塊名稱 功能描述 是否關鍵模塊
PD-005-001 css sprite 多個圖片合成一張圖 是
PD-005-002 ps的web格式 經過ps的web格式對其進行壓縮，保存 是
PD-005-003 加載方式 根據須要選擇加載方式，提升用戶體驗 是
PD-005-004 不在html中縮放 不在html中縮放圖片 是
PD-005-005 favicon.ico 網站的標識符圖標，要有且小且可緩存 是
PD-005-006 圖片base 64 將圖片進行64位編碼 是
3.5.4 子模塊設計說明

1. css sprite，就是講多個圖片合成一張圖，用於減小http請求和便於管理；
2. ps的web格式，主要是不影響圖片質量的狀況下，且能很好的壓縮圖片；
3. 加載方式：經過加載方式的選擇，使用戶體驗提高。常見方法有：①監聽滾動加載；②先用默認圖佔位，而後置換模糊圖，最後高清圖提升用戶體驗。
4. 不要在html中縮放圖片，由於①HTML只是縮小尺寸，圖片會失真甚至產生鋸齒；② 圖片須要縮放意味着圖片大小過大，網頁加載速度會變慢。
5. favicon.ico要有且小且可緩存；要有：favicon.ico①可讓瀏覽器的收藏夾中除顯示相應的標題外；②還以圖標的方式區別不一樣的網站，③不管有否，瀏覽器都會找，若無，查找便更加耗時且還可能返回４０４錯誤。至於小，那是不言而喻的了，最好小於１ｋ。緩存的緣由也是不藥而癒的了，這裏暫不講。
6. 圖片base 64 ，就是講將圖片想文字同樣進行編碼，進行傳輸。其優勢就是減小http請求。這個是比較新的知識，下面將經過圖進行展現。

3.6 PD-006性能分析工具

3.6.1 模塊功能描述
工欲善其事必先利其器，頁面性能的評估中有不少成熟優秀的工具，合理利用已有工具能達到事半功倍的效果。下面簡單介紹幾個經常使用的工具：
Chrome瀏覽器開發者工具的Timeline面板和window.performance。
Chrome瀏覽器開發者工具的Timeline面板，你們都比較熟悉，這裏不作介紹。
window.performance詳情請見我曾經寫的：《檢測網站性能的利器window.performance》。
3.6.2 模塊框架設計以及處理流程
無

4.接口說明

4.1 用戶接口

用戶 window.performance 幫助用戶進行性能檢測