由“從按下斷行符號到網頁顯示”粗談網頁最佳化

標籤：處理   步驟   哪些   www   dom   firebug   讀取   ddos攻擊   get   

圖為百度console.log中的資訊。

注

水平有限。望批評指正。

前言

從開始做uikoo9.com開始，一直想怎怎麼最佳化，版本號碼也一直在迭代。

如今最終有點雛形。近期開始思考怎麼能讓一個網頁最快的展如今使用者眼前，

想了想前端紛繁的架構，究竟怎樣組合才好，寫起來好，構建起來好，展現起來快，

且不談jquery。bootstrap之流。angularjs。vuejs，reactjs。expressjs（nodejs）。requirejs，seajs等等怎樣組合才好？

追根溯源開始思考，非常多大公司的一道面試題。從按下enter鍵之後，到網頁展現出來。究竟經曆了什嗎？

發生了什嗎？

從按下enter到網頁顯示發生了什嗎？

1.按下enter

2.瀏覽器將網域名稱解析為ip（省略細節，hosts。dns）

3.瀏覽器通過ip向服務端發起一次http請求（省略複雜的過程和協議）

4.服務端接收請求。處理業務，查詢資料，返回頁面

5.瀏覽器擷取頁面，進行解析

6.解析dom結構，解析css，解析js，解析完成後展現，觸發domcontentloaded

7.繼續載入頁面多媒體內容，比片。記載完成，觸發load

1-6步頁面已經展現出來。7載入圖片。

網頁調優工具

有非常多網頁調優工具，比如阿里測。站長工具等，

今天僅僅說簡單的工具，firebug的網路視圖，chrome也有類似的network，

firebug的網路視圖主要是看一張網頁載入的過程，以及每次請求的耗時。

從一張圖片說起

從能夠看出，載入完uikoo9.com的過程也就是多次請求的過程，

包裹訪問網域名稱請求html，到解析dom請求css，js。到請求圖片為止，

都是一次次的單獨請求。

請求

一個網頁就是一次向server的請求。

網頁中的每一個js，css也都是一次請求，

那麼一次請求分為哪些步驟，見。分為：

1.阻擋

2.網域名稱解析

3.建立串連

4.發送請求

5.等待響應

6.接收資料

耗時比較

能夠看出，

1耗時較多，解釋下阻擋：瀏覽器避免向同一個地址同一時候發起過多串連請求。easy被判定為DDOS攻擊 或 低級爬蟲。

2-4耗時較少，

5-6耗時較多

怎樣最佳化

1，好像不能夠最佳化

2.-4，找一個好的網域名稱解析商（dnspod）+好的cdn。這個比較簡單

5，等待響應，事實上就是服務端做處理，查詢資料，業務計算，最佳化能夠考慮非堵塞IO，多線程，緩衝，SQL最佳化等等。本文略過

6。接收資料，見下

接收資料最佳化

頁面資料無非js，css，圖片。多媒體之類靜態檔案，能夠做的最佳化有：

1.js。css壓縮（dev-->min）

2.圖片壓縮。圖片合并（雪碧圖）

3.圖片單獨cdnserver（七牛雲）

4.服務端再次壓縮並緩衝靜態檔案

再來看看發生什麼。

從按下enter開始。就開始了一次次的請求之旅，

每次請求都包含（網域名稱解析，建立串連，發送請求。等待響應，接收資料），

從最開始的地址欄中的網域名稱請求，返回html dom並解析。

到請求js，css，圖片等靜態檔案，都是一次次的請求迴圈。

html最佳化

1.採用html5精簡的標籤

2.盡量將css放到head中。js放到body末尾

3.開發完的html進行壓縮，減小html文字大小

js最佳化

1.細分模組化減小js大小

所謂模組化，比方你須要用到bootstrap，bootstrap有非常多組件，比如有1.js，2.js，。。

。，100.js

A頁面你僅僅引入1-2.js

B頁面你僅僅引入3-4.js

這樣每一個頁面的js都非常小

2.利用緩衝

還有一個方向是將bootstrap所有引入。這樣僅僅在第一次比較慢。

以後每次都是讀取緩衝，以後的頁面較快

以上兩種各有利弊

css最佳化

和js最佳化相類似。模組化，緩衝

圖片最佳化

1.字型表徵圖

在能夠用字型表徵圖的地方不要用圖片，見iconfont

2.雪碧圖

非得用圖片的時候。不會常常改變的小表徵圖放到一起，壓成一個雪碧圖

3.壓縮

在保證顯示效果的前提下。進行壓縮

靜態檔案最佳化（js，css。圖片）

1.單獨server

將靜態檔案放到一台單獨的server上

2.cdn

給靜態檔案server加入cdn

3.服務端壓縮和緩衝

服務端在進行一次壓縮，並緩衝

end，by uikoo9.com

由“從按下斷行符號到網頁顯示”粗談網頁最佳化