高性能網站建設—CSS總結

       尚品中國的一些平臺需要對訪問速度等進行優化，大致的方向就是從緩存、壓縮、減少請求等方面進行處理，不光需要對網絡有一定的理解，也需要對瀏覽器的機制以及前端的技術等有些許的了解，在這個過程中，總結出的性能黃金法則只有10%~20%的最終用戶響應時間花在了下載HTML文檔上。其余的80%~90%時間花在了下載頁面中的所有組件上。

　　1. 減少HTTP請求，圖片地圖、CSS Sprites、內聯圖片和腳本、腳本和樣式表的合并。

　　2. 使用CDN（北京網站建設的內容發布網絡）。

　　3. 添加Expires頭，修訂文件名，比如為經常需要改變的文件添加版本號等。

　　4. 壓縮組件，即減少HTTP相應的大小來減小響應時間。

　　5. 將樣式表放在頂部，減少“白屏（Blank White Screen）”現象，盡量使用LINK標簽將樣式表放在文檔HEAD中。

　　6. 將腳本放在底部，并行下載，腳本阻塞。

　　7. 避免CSS表達式，使用“一次性表達式”，事件處理器。

　　8. 使用外部JavaScript和CSS，純粹而言，內聯比外聯快。加載后下載。

　　一些平臺需要對訪問速度等進行優化，大致的方向就是從緩存、壓縮、減少請求等方面進行處理，不光需要對網絡有一定的理解，也需要對瀏覽器的機制以及前端的技術等有些許的了解，在這個過程中，總結出的性能黃金法則只有10%~20%的最終用戶響應時間花在了下載HTML文檔上。其余的80%~90%時間花在了下載頁面中的所有組件上。

　　1. 減少HTTP請求，圖片地圖、CSS Sprites、內聯圖片和腳本、腳本和樣式表的合并。

　　2. 使用CDN

　　3. 添加Expires頭，修訂文件名，比如為經常需要改變的文件添加版本號等。

　　4. 壓縮組件，即減少HTTP相應的大小來減小響應時間。

　　5. 將樣式表放在頂部，減少“白屏（Blank White Screen）”現象，盡量使用LINK標簽將樣式表放在文檔HEAD中。

　　6. 將腳本放在底部，并行下載，腳本阻塞。

　　7. 避免CSS表達式，使用“一次性表達式”，事件處理器。

　　8. 使用外部JavaScript和CSS，純粹而言，內聯比外聯快。加載后下載。

（使用cookie技術來實現）

　　9. 減少DNS查找（Reduce DNS lookups），DNS緩存和TTL。

　　10. 精簡JavaScript。

　　混淆和節省，（工具：JSMin和Dojo Compressor），

　　壓縮和精簡（Gzip and  Minification），

　　精簡CSS，最大的節省來自優化CSS-合并相同的類，移除不使用的類，最佳解決方案還是移除注釋和空格，并進行一些直觀的優化，比如使用縮寫（用“#606”代替“#660066”）和移除不必要的字符串（用“0”代替“0px”）。

　　11. 避免重定向。

　　缺少結尾的斜線：有一種重定向最為浪費、發生的也很頻繁的，但Web開發人員通常都沒有意識到它。即“缺少結尾的斜線”。如：訪問http://xx.com/xxx時，會導致一個301相應，其中包含一個到http://xx.com/xxx/的重定向。當然主機名后缺少結尾斜線是不會發生重定向的，如訪問http://baidu.com，但在瀏覽器中看到的最終URL還是包含結尾斜線的，導致自動產生斜線的原因是，瀏覽器在進行GET請求時必須指定一些路徑，如果沒有路徑，就會簡單的使用文檔根（/）。

　　連接網站，一般是用戶從舊的URL轉移到新的URL的最簡單的方式就是重定向，可以通過Alias、mod_rewrite、DirectorySlash和直接鏈接代碼來避免重定向。

　　跟蹤內部流量，重定向經常用于跟蹤用戶的流量的流向，另一種方式選擇是使用Referer日志來跟蹤流量去向，每個HTTP請求都包含一個URL，表明從哪個頁面發起的請求，也就是引用方（有的時候沒有引用頁，如當用戶鍵入URL或只用書簽時）。對于內部流量，也就是專業網站建設公司各個網站之間的流量，是值得通過建立Referer日志來避免重定向，以此來節省最終用戶相應時間。

　　跟蹤出站流量。

　　12. 移除重復腳本。

　　13. 配置ETag，實體標簽（Entity Tag）是Web服務器和瀏覽器用于確認緩存組件的有效性的一種機制。

　　14. 使Ajax可緩存。

　　其他：抓包探測工具，如IBM Page Detailer和HttpWatch等，理解SSL響應式可緩存的，YSlow等級是頁面響應的強指標，YSlow和FireBug結合。