高性能網(wǎng)站建設—CSS總結(jié)

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

　　1. 減少HTTP請求，圖片地圖、CSS Sprites、內(nèi)聯(lián)圖片和腳本、腳本和樣式表的合并。

　　2. 使用CDN（北京網(wǎng)站建設的內(nèi)容發(fā)布網(wǎng)絡）。

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

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

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

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

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

　　8. 使用外部JavaScript和CSS，純粹而言，內(nèi)聯(lián)比外聯(lián)快。加載后下載。

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

　　1. 減少HTTP請求，圖片地圖、CSS Sprites、內(nèi)聯(lián)圖片和腳本、腳本和樣式表的合并。

　　2. 使用CDN

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

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

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

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

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

　　8. 使用外部JavaScript和CSS，純粹而言，內(nèi)聯(lián)比外聯(lián)快。加載后下載。

（使用cookie技術(shù)來實現(xiàn)）

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

　　10. 精簡JavaScript。

　　混淆和節(jié)省，（工具：JSMin和Dojo Compressor），

　　壓縮和精簡（Gzip and  Minification），

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

　　11. 避免重定向。

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

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

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

　　跟蹤出站流量。

　　12. 移除重復腳本。

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

　　14. 使Ajax可緩存。

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