頁面性能優化總結
頁面性能優化總結
由於本人前幾天一直在解決頁面性能、加載慢等問題。解決後，對於該方面知識有一定的認識與理解，現將經驗碼出來，與大家分享；由於單純講解知識點會造成知識點認識混亂，故將知識分模塊講解；由於項目中主要使用chrome瀏覽器，故僅講解以webkit為內核的瀏覽器機制
1.瀏覽器加載時間：
當瀏覽器對頁面進行加載並且解析時，會產生如下幾個主要時間：
1)、queueing 時間
該時間為等候時間，也可以叫排隊時間。即文件在加載之前的排隊等候時間。該排隊等候時間會根據優先級進行判定；而優先級則根據文件類型進行區分。在前端文件中，html，js，css為主要文件，該種類型文件等候時間較短；而其他類型，如jpg，png或者媒體文件，字體文件等則等候時間較長，等待時間長度較長時，將會導致文件加載緩慢，也就是常說的加載時掛起；
2)、stalled時間
該時間為阻塞時間，即在發起請求時服務器不能同時進行響應而產生的等待時間。該時間與queueing時間不同。queueing時間通常由於優先級不足而產生或者其他原因導致的，而stalled則由於同一個服務器無法同時響應多個請求而造成的。在chrome瀏覽器中，一個服務器最多會同時允許6個請求發出（一般情況下）;
3)、Initial connection 時間
該時間通常是由於TCP 三次握手而產生的時間，一般不會對性能產生較大影響；
4)、RequireSent 時間
該時間為向服務器發起請求時的時間，一般對性能不會產生較大的影響；
5)、Waiting 時間
該時間為後臺響應請求的時間，如果該段時間較長，一般多為服務器或者後端接口返回數據較慢的原因；
在以上幾個時間中，各個時間都有可能會導致頁面加載時間較長，由於本項目中主要使用的是require.js，在網上查了很多關於require.js的文件，其中對於頁面加載，網絡上的主要描述為：
（1）實現js文件的異步加載，避免網頁失去響應；
（2）管理模塊之間的依賴性，便於代碼的編寫和維護。
正如上面所說，我們知道，<script></script> 標簽會阻塞頁面，加載 a.js時，後面的所有文件都得等它加載完成並執行結束後才能開始加載、執行。而 require.js的模塊可以並行下載，沒有依賴關系的模塊還可以並行執行，大大加快頁面訪問速度。
但是之前產生的問題主要是由於html的引進模式導致的，最初的引進模式為在define()之中通過text！為前綴引進，這種方式通過text.js可以將html以字符串的形式引入到文件中，同時使用jquey.tmplate.js將ajax請求回來的數據進行動態渲染。
2.瀏覽器緩存機制
緩存簡介：緩存是在打開網頁之後，服務器將網頁文件（包括css，html，js等）緩存到一個地方，不同的瀏覽器會緩存到不同的地方。像我在項目中用的比較多的chrome瀏覽器，就會緩存在userData這個文件夾中。瀏覽器緩存根據其不同的原理，共分為一下幾種緩存：
1)、http緩存
http緩存是基於HTTP協議的瀏覽器文件級緩存機制。瀏覽器緩存就是當你打開一個網頁，瀏覽器會自動下載副本到你電腦上，就相當於你另存為網頁到某個地方而已，只不過這裏是自動而已。當然不是瀏覽器能把各種 網頁都能下載到本地電腦上，它是有特殊情況。一般html，後者request是get請求，而post一般不緩存。（這個後面會說到）當然客戶端緩存是否需要是可以在服務端代碼上控制的。那就是響應頭。響應頭告訴緩存器不要保留緩存，緩存器就不會緩存相應內容；如果請求信息是需要認證或者安全加密的，相應內容也不會被緩存；
Expires設置：
Expires是Web服務器響應消息頭字段，在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數據，而無需再次請求。
Cache-control設置:
Cache-Control與Expires的作用一致，都是指明當前資源的有效期，控制瀏覽器是否直接從瀏覽器緩存取數據還是重新發請求到服務器取數據。只不過Cache-Control的選擇更多，設置更細致，如果同時設置的話，其優先級高於Expires。
- Public指示響應可被任何緩存區緩存。
- Private指示對於單個用戶的整個或部分響應消息，不能被共享緩存處理。這允許服務器僅僅描述當用戶的部分響應消息，此響應消息對於其他用戶的請求無效。
- no-cache指示請求或響應消息不能緩存
- no-store用於防止重要的信息被無意的發布。在請求消息中發送將使得請求和響應消息都不使用緩存。
- max-age指示客戶機可以接收生存期不大於指定時間（以秒為單位）的響應。
- min-fresh指示客戶機可以接收響應時間小於當前時間加上指定時間的響應。
- max-stale指示客戶機可以接收超出超時期間的響應消息。如果指定max-stale消息的值，那麽客戶機可以接收超出超時期指定值之內的響應消息
2)、application cache緩存
application cahce是將大部分圖片資源、js、css等靜態資源放在manifest文件配置中。當頁面打開時通過manifest文件來讀取本地文件或是請求服務器文件。
離線訪問對基於網絡的應用而言越來越重要。雖然所有瀏覽器都有緩存機制，但它們並不可靠，也不一定總能起到預期的作用。HTML5 使用ApplicationCache 接口可以解決由離線帶來的部分難題。前提是你需要訪問的web頁面至少被在線訪問過一次。
使用緩存接口可為您的應用帶來以下三個優勢：
離線瀏覽 – 用戶可在離線時瀏覽您的完整網站。
速度 – 緩存資源為本地資源，因此加載速度較快。
服務器負載更少 – 瀏覽器只會從發生了更改的服務器下載資源。
其余還有像websql、indexDB、cacheStorage等也可以進行緩存，但是其適用範圍較小，就不做介紹了。
另外，再說一下一個在解決bug遇到的問題，發現js與被text.js解析的html文件的queueing時間很長（也就是發生了文件掛起）,同時在size中發現了from disk caches（來自於磁盤緩存文件）,針對於該點，我又查閱了很多資料。
其中，caches共分為兩種，一種為
1)、memoryCaches
將資源緩存到內存中，等待下次訪問時不需要重新下載資源，而直接從內存中獲取。Webkit早已支持memoryCache。
同時，資源文件也分為兩類：主要資源和派生資源。主要資源為html頁面、下載項等；派生資源包括HTML頁面中內嵌的圖片或者腳本鏈接，用於保存原始數據（比如CSS，JS等），以及解碼過的圖片數據；
2）、diskCaches
將資源緩存到磁盤中，等待下次訪問時不需要重新下載資源，而直接從磁盤中獲取.
memoryCaches 與 diskCaches對比：
相同點：只能存儲一些派生類資源文件。它的存儲形式為一個index.dat文件，記錄存儲數據的url，然後再分別存儲該url的response信息和content內容。
不同點：當退出進程時，內存中的數據會被清空，而磁盤的數據不會，所以，當下次再進入該進程時，該進程仍可以從diskCache中獲得數據，而memoryCache則不行。
頁面性能優化總結