互聯網 - 大數據

昨天去圖書館借了幾本書，今天看了看《高性能網站建設指南》，覺得還不錯，不過翻譯的不是很好，但還是覺得比較有收獲，整本書也就140頁左右，總共列出了網站前端優化的14點建議。網站優化大家應該并不陌生，但是真正的在自己的項目里面用過或者了解過嗎，我覺得應該打個問號？下面就說說這14條是啥，會有自己的理解，希望大家都能夠有收獲。

關注前端可以很好的提高網站的整體性能，如果我們可以將后端響應時間縮短一半，整體響應時間只能減少5%-10%，如果優化前端性能，同樣是將響應時間縮短一半，那么整體的響應時間可以減少40%-45%。改進前端通常只需要較少的時間和資源；減少后端延遲會帶來很大的改動，例如重新設計應用程序的架構和代碼，查找和優化臨界代碼路徑，添加改動硬件，對數據庫進行分布化等，這些改動需要數周或數月的時間。

書籍里面提到了一條一直重復的網站前端性能黃金法則：只有10%-20%的最終用戶響應時間花在了下載HTML文檔上，其余的80%-90%的時間花在了下載頁面的所有組件上。其實就是要控制好JS，Flash,圖片，視頻音頻（富媒體），CSS文件等的資源加載速度。

1.減少http請求。使用圖片地圖，CSS Sprites，內聯圖片和腳本，樣式表的合并；大約可以減少50%響應時間。

圖片地圖

就是在一張圖片上做多個鏈接，多個鏈接只需要一次http請求即可，因為一張圖片是一個請求，而鏈接都嵌入到圖片上面了。在Dreamweaver里面有給圖片加熱點的畫圖工具很方便，但是現在很少用DW這樣的可視化工具來做鏈接熱點，所以只能用敲代碼來做鏈接熱點，未免顯得太繁瑣，要定好每一個鏈接的范圍（坐標）---客戶端圖片地圖。另外可以用服務器端圖片地圖，將所有的點擊提交到一個目標URL，向其傳遞用戶單擊的x,y坐標。個人不是很提倡圖片地圖（Image Maps）這種方式。

CSS精靈（CSS Sprites）

可以把各種圖片合并在一張大圖片上面，那么結果就是以前的多次訪問，現在只需要一次就可以搞定了。這個技術相信大家應該都用過，現在也比較流行。用F12看一下QQ空間的resoures，他就是用css精靈做的。ps：把各種小圖放到大圖上面的時候要考慮到小圖片之間的間距，要不然可能會出現錯位的問題，要仔細考慮html結構代碼的塊的大小，photoshop或fireworks都可以很放的作圖。我也不贅述了，比較簡單~

內聯圖片（Inline images）

通過使用data:URL模式可以在web頁面中包含圖片但無需任何額外的HTTP請求。---IE6.7不支持

data:一般用于內聯圖片；由于他是內聯在頁面中的，在跨越不同的頁面的時候不會被緩存，而如果放在外部樣式表中也會增加一個額外的http請求。

合并樣式表和腳本（Combined JS and CSS）

這個很好理解吧，就是把腳本文件和樣式表分別合并起來，書中提到，理想情況下，最多一個腳本文件和最多一個樣式表文件。但是在現實的項目中根本不可能，所以只能盡可能的減少文件的數量，一個文件就是一個請求。以前做項目的時候，最基本的就會用到common.css樣式作為公共樣式，jquery.js作為庫來使用，index.css,index.js。。等用來做相應的頁面。

2.使用內容發布網絡。

內容發布網絡（CDN--content delivery network）是一組分布在多個不同地理位置的web服務器，用于更加有效的向用戶發布內容。大型的公司一般都有自己的CDN，例如京東，阿里，百度，騰訊等等，在全國都布上自己的服務器，用戶訪問的時候速度就比較快，而不用依賴一個位置的服務器。

3.添加Expires頭。expires==文件，協議，因期而至失效

瀏覽器使用緩存來減少http請求的數量，并減少http響應的大小，使web頁面加載速度更快；web服務器使用expires頭來通知web客戶端使用一個組件的當前副本，直到副本（也就是緩存）過期。cache-control:max-age=315360000可以來指定日期。簡單來說，這就是一種緩存技巧來減少http的請求數量。

4.壓縮組建。

顯而易見，壓縮文件可以減少文件的大小，通常使用gzip或deflate來壓縮http響應包，其他的還有刪除注釋，縮短URL的形式。

web客戶端可以通過http請求中的accept-encoding頭來標識對壓縮的支持。Accept-encoding:gzip,deflate.如果web服務器看到了請求中有這個頭，就會使用web客戶端列出來的一種方法來壓縮響應。

5.把樣式表放在頂部（Put stylesheets at the top）。 

如果把樣式表放在底部在IE中會出現白屏現象：當在新窗口打開的時候new window;重新加載時refresh;作為主頁；這三種情況都會導致白屏的產生。

樣式表的引入方式link和@import;

<link rel="stylesheet" href="index.css">

<style>

　　@import url("index.css");

</style>

他們之間存在一定的差別，link的渲染性能好于@import,后者偶爾也會導致白屏現象，而且渲染呈現無序性，沒有遵循逐步呈現的原則。

6.把腳本放在底部。

最好將腳本從頁面的頂部移到底部，這樣頁面既可以逐步呈現，也可以提高下載的并行度。

腳本阻塞（Scripts Block Downloads），在下載腳本時并行下載是被禁止的——即使是用了不同的主機名，瀏覽器也不會啟動其他的下載。導致腳本阻塞下載的原因有兩個：1.腳本可能是用document.write來修改頁面，瀏覽器需要等待來確保頁面正確的布局。2.為了保證腳本能夠按照正確的順序執行，腳本文件之間可能會相互影響。

由于腳本對web頁面的影響---阻塞后面內容的呈現，阻塞后面組件的下載。因此把腳本放在底部更好。ps:在引用插件或庫的時候，一定要把它們放在所有的js文件的前面。

7.避免CSS表達式。

 盡量減少在html標簽內添加樣式和js代碼

8.使用外部js和css。

這一點應該都做到了，不贅述了

9.減少DNS查找。

通常瀏覽器查找一個給定的主機名的IP地址要花20-120毫秒，在DNS查找完成之前，瀏覽器不能從主機名那里下載到任何東西。響應時間依賴于DNS解析器所承擔的請求壓力，兩者之間的地理位置距離，帶寬速度。

用戶的瀏覽器或操作系統會記錄網站的DNS緩存，只是存在期限的問題。查找返回的DNS記錄包含了一個存活時間-----Time To Line(TTL)值----告訴客戶端可以對該記錄緩存多久。

 10.精簡js,css。

去除代碼之間的不必要的空格，字符，換行，制表符。借助工具----Jsmin來壓縮

混淆（obfuscation）函數和變量的名字更短，但是代碼可能會產生一定程度的混亂。      

節省css---合并相同的類，移除不用的類，顏色值的縮寫，移除不必要的字符串（如  0和0px;#fff和#ffffff）    

11.避免重定向

12.移除重復腳本

13.配置或移除ETag

14.使用Ajax可緩存                                  

后面的四條自己沒用過，感興趣的可以參看http://www.cnblogs.com/developersupport/p/webpage-performance-best-practices.html#js_bottom覺得寫的還蠻不錯的。