圖爲百度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，到請求圖片爲止，
都是一次次的單獨請求。
請求
一個網頁就是一次向服務器的請求，
網頁中的每個js，css也都是一次請求，
那麼一次請求分爲哪些步驟，見上圖，分爲：
1.阻擋
2.域名解析
3.建立連接
4.發送請求
5.等待響應
6.接收數據
耗時比較
可以看出，
1耗時較多，解釋下阻擋：瀏覽器避免向同一個地址同時發起過多連接請求。容易被判定爲DDOS攻擊 或 低級爬蟲。
2-4耗時較少，
5-6耗時較多
如何優化
1，好像不可以優化
2.-4，找一個好的域名解析商（dnspod）+好的cdn，這個比較簡單
5，等待響應，其實就是服務端做處理，查詢數據，業務計算，優化可以考慮非阻塞IO，多線程，緩存，SQL優化等等，本文略過
6，接收數據，見下
接收數據優化
頁面數據無非js，css，圖片，多媒體之類靜態文件，可以做的優化有：
1.js，css壓縮（dev-->min）
2.圖片壓縮，圖片合併（雪碧圖）
3.圖片單獨cdn服務器（七牛雲）
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.單獨服務器
將靜態文件放到一臺單獨的服務器上
2.cdn
給靜態文件服務器添加cdn
3.服務端壓縮和緩存
服務端在進行一次壓縮，並緩存
end，by uikoo9.com