簡要：對於影響頁面呈選 的因素有3個地方：服務器連接數據庫並計算返回數據 ， http請求以及數據（文件）經過網絡傳輸 ， 文件在瀏覽器中計算渲染呈選； 其中大約80%的時間都耗在了http請求上，所以要想大幅度優化頁面，必須從http請求上入手
一：首先要認識頁面中各個文件http請求耗時情況，這樣我們才能知道整個響應過程中網絡請求耗時情況，各個文件請求加載耗時情況對比和順序，那些請求可以優先加載，那些可以合並加載等等。
chrome的timeLine是一個很好的http請求觀測工具：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="Common.css"> </head> <body> <div> <div style="height:100px;background-color: red"></div> <link rel="stylesheet" href="goodsinfor.css?version=201703311116"> <div style="height:1000px;background-color: blue"></div> <img src="image/201703/aaecb9c0-a848-4632-8d2d-2d2ccb4c04dc-source.png" /> <script src="vender/jquery.js?version=201703311116"></script> <div id="imgContent"></div> <script> $("#imgContent").append("<img src='https://imgsa.baidu.com/news/q%3D100/sign=93e66e1cde2a60595410e51a1836342d/7aec54e736d12f2e7bd12cb546c2d5628435680b.jpg' />"); </script> <div style="height:1000px;background-color: orange"> <img src="image/201703/f89dfdcf-4602-4b4e-8c87-a5d37566fa8f-source.png"/> </div> </div> </body> <script src="vender/bootstrap.min.js?version=201703311116"></script> <script src="vender/require.min.js?version=201703311116"></script> </html>
上面代碼所反映的http請求情況如下圖：
由圖中可以看到：
先加載的index.html，接着css幾乎同時並行請求加載（說明css的請求加載時有並行線程的），
<script>jquery.js</script> 放在<img>元素前面，jquery.js會先發起請求，這個時候其實並不會影響下面img，css，js文件發起請求，發起請求在瀏覽器中是有並行線程的
但jquery.js下面的div和img的渲染以及<script>的執行會被阻塞
圖中灰色線框白色背景的叫做Queueing ,瀏覽器會把一系列請求先存放在隊列中，然后有序的發起請求。
圖中灰色橫條叫做Stalled ， 這個是指發起請求到建立TCP連接成功之間的耗時。
圖中綠色橫條代表Waiting，指等待服務器返回數據，瀏覽器接受到數據的耗時，這一段通常耗時是最大的
圖中藍色橫條代表Content DownLoad，將內容下載下來所耗時間。
接下來是chrome里面的Timeline工具，這個工具非常強大，它能幫助我們分析從請求，到渲染，到繪制，最后在頁面顯示一系列動作的具體情況，對於前端優化作用非常大。
還是上面的代碼。
這里我不在具體說明了，關於Network和timeline ，可以參考如下幾篇文章：
http://www.cnblogs.com/ys-ys/p/5625409.html
http://www.jianshu.com/p/4da0f0bda768
http://www.cnblogs.com/cherryblossom/p/5502591.html
二：在認識了瀏覽器http請求后，以下是一些關於http請求的優化方案：
1：最簡單的做法是減少http請求，
制作圖片地圖：允許一個圖片關聯多個url，即將多個圖片合並為一個圖片，如下導航欄demo：
<img usemap="#map1" border=0 src="/images/imagemap.gif?t=1196816255">
<map name="map1">
<area shape="rect" coords="0,0,31,31" href="home.html" title="Home">
<area shape="rect" coords="36,0,66,31" href="gifs.html" title="Gifts">
<area shape="rect" coords="71,0,101,31" href="settings.html" title="Cart">
<area shape="rect" coords="106,0,136,31" href="help.html" title="Help">
</map>
但如上方法采取手工方式則很難完成且容易出錯，而且除了矩形之外幾乎無法定義其他形狀，通過DHTML創建的圖片地圖在IE中無法工作。
CSS Sprites:還可通過css中的background-position來定位圖片中的某一具體部分,它比圖片地圖更靈活，建議大家使用。
內聯圖片：通過使用data：URL數據形式可以替代http請求，甚至可以用於script和a標簽中，其缺陷是Base64編碼會增加圖片的大小，並且嵌在網頁中，會加大網頁的數據量，
但它可以減少http網絡請求耗時。這里提供圖片生成dataurl數據的方法。
var can = document.createElement("canvas")； var ctx = can.getContext("2d")； img.onload = function(){ ctx.drawImage(this, 0, 0, width, height); can.toDataURL(); }
2：合並腳步和樣式表
對於前端工程師來說，javascript和css可以嵌入html文檔中內聯 ，還可以放入外部腳步樣式表中，前者會增加文檔大小，並且不符合低耦合的開發思路，使得代碼較難維護，但
后者增加了http請求數，對於時間上來說會比較耗時，所以要根據實際情況來決定如何倆配合使用比較好。
可以將多個腳步合並為一個腳步，多個css文件合並為一個css文件，理想情況下：一個頁面應該使用不多於一個的腳步和樣式表。但這種將所有東西合並到一處的行為對於模塊化編程思維來說是一種倒退，解決方法是遵守編譯型語言的模式，開發模式下保持js文件的模塊化，生成打包的時候生成一個目標文件部署到線上。
3:配置多個域名和CDN加速
通常瀏覽器對於一個域名的並發請求是有限的，比如：有100個文件要加載，但瀏覽器一次只可能並發請求10個文件，這樣並發多次就會耗時。因此配置多個域名能夠最大限度的增加並發請求量，
但這里有個缺點就是會增加瀏覽器域名解析的次數，這里建議利用CDN來加載不是經常更新和修改的靜態資源（圖片，css庫，js第三方庫等等）。一個是CDN域名一般都會緩存到本地中，另一個是CDN網絡請求速度是非常快的。
由於CDN部署在網絡運營商的機房，這些運營商又是終端用戶的網絡服務提供商，因此用戶請求路由的第一跳就到達了CDN服務器，當CDN中存在瀏覽器請求的資源時，從CDN直接返回給瀏覽器，最短路徑返回響應，加快用戶訪問速度，減少數據中心負載壓力。
參考連接：http://blog.csdn.net/mahoking/article/details/51472697
關於http請求還有很多，未完待續。。。