開發應用時，頁面從載入到展現給使用者的的這段時間很重要，如果時間過長，使用者會失去耐心。那麼，這段時間到底和什麼相關呢。
首先介紹下瀏覽器輸入url到頁面載入這個過程。簡單來說就是向域名伺服器發出請求，接收到ip，根絕ip向指定伺服器請求資源，伺服器處理後返回，最後瀏覽器載入資源。
0’ height=’300’>
上面的說的很簡單，下面稍微詳細的講解下這個過程，大概可以分這麼多步驟：
1、在瀏覽器輸入url。
2、瀏覽器根據url向域名伺服器傳送請求，解析域名。(可快取)
3、域名伺服器返回ip（也可能是未註冊域名，我們只關注已註冊的）。
4、瀏覽器向指定伺服器傳送請求。
5、建立tcp連線(握手什麼的就不詳述了)。
6、服務處理相關資源。
7、返回資源（html）。
8、瀏覽器解析頁面。（解析過程不詳述）
9、請求js，css。（與請求html類似，知識資源不同）
10、解析渲染頁面。
11、展現頁面。
上面基本就是瀏覽器輸入url到解析的整個過程。從耗時來說，所有的處理可以抽象為下面兩個過程：
- 資料傳輸

- 資料解析

這個很重要，這是本分分析優化的基礎。（服務端如何加快處理，快速響應請求不在本文的討論中）下面就從這兩個方面來分析如何優化。

1、資料傳輸

即瀏覽器向傳送請求，獲取資料。我們整理一下，瀏覽器大概需要進行哪些資料請求。
1、域名解析。
2、html、js、css圖片等靜態資源。
3、資料請求。
瀏覽器每次請求，都會先建立連線，伺服器處理後返回資源，資源經過網路傳輸到達瀏覽器。這個過程中，耗時的有：建立tcp連線、資料網路傳輸、後臺資料處理。
建立tcp連線需要耗時，如果減少請求，即減少了建立tcp連線的耗時；如果連線可以複用，也可以減少耗時。那麼前端優化兩點建議也就有了：
資料傳輸優化第一點：減少http請求

a、DNS快取，及解析域名前先查詢本地DNS快取，如果有，不必再向域名伺服器請求。
b、合併一些js，css等等。
c、梳理ajax請求，合理合併請求。第一時間無需展現的可以懶載入。
資料傳輸優化第二點：使用http2協議
http2具有多路複用和連線管線化等特點，連線管線化就是多個請求使用一個tcp連線，順序請求，減少了建立連線時間。
就資料網路傳輸耗時來說，可從三個方向減少傳輸耗時。
1、資料量減少，可減少傳輸時間。
2、伺服器離使用者近一點（網路上近一點）。
3、使用多個連線並行傳輸資料。（http2多路複用瞭解一下 ^.^）
資料傳輸優化第三點：快取
快取包括靜態資源快取和資料快取。通過設定請求相應頭（cache-control，keep-alive，etag等等），可快取html,js,css,圖片的靜態資源。通過使用localStorage，sessionStorage，cookie可快取一些資料。
資料傳輸優化第四點：啟用壓縮
壓縮可以減少檔案體積，減少傳輸時間。
a、啟用gzip等壓縮。
b、圖片（頁面使用的jpg，png等等）進行編碼壓縮，減少體積。
c、頭部壓縮。（http2新特性）
伺服器離使用者近一些，是指網路距離上近一些，就像聲音傳播，速度一定，距離近的肯定先聽到。
資料傳輸優化第五點：CDN加速
不詳細講解cdn，有興趣可以瞭解一下。
資料並行傳輸可加快相應，多路複用，也是http2的新特性之一。
加快後端相應速度，這個就不接介紹了。至此，資料傳輸部門的優化建議就講解完了，下面講解下資料解析方面的優化建議。

2、資料解析

資料解析，即瀏覽器拿到html，css，js解析執行，渲染，佈局的速度。這個算是程式碼層面的優化，也是和開發人員最接近的。可從以下幾個方面進行優化：
1、去除無效js程式碼，css樣式，開發過程中，功能不停修修改改，會產生很多無效程式碼，這會增大js體積。
2、css樣式選擇器的使用建議。使用id選擇器是渲染速度最快的，使用路徑很深的後代選擇器會是渲染速度變慢。所以在編寫css樣式時，合理使用選擇器。
3、js連線放在底部。js會阻塞html解析，將js放在底部可以加快生成dom tree。
4、減少頁面重排和重繪。
5、js程式碼中減少計算和業務處理程式碼。JavaScript本身不是計算密集型的程式碼，所以在前端程式碼中建少不必要的業務處理程式碼。合理分配前後端工作職責
6、減少cookie傳輸。
7、懶載入和按需載入，梳理業務功能，是否是首屏需要的，不需要的可以非同步載入或懶載入。
8、避免定義過多全域性變數。
9、事件代理。
對資料傳輸和資料解析優化建議進行總結，建議如下：
- 快取（靜態資源快取，DNS快取，資料快取）
- 啟用壓縮
- 減少http請求
- cdn加速
- 使用http2
- 圖片編碼壓縮
- 按需載入和懶載入
- js連線放底部
- css選擇器優化使用
- 去除無用程式碼
- 前端減少不必要的業務處理和計算
- 程式碼優化。（例如事件代理，避免定義過多全域性變數）