Web性能優化：雅虎35條

對web性能優化，一直知道是個很重要的方面，平時有注意到，可是對於雅虎35條是第一次據說，查了一下，發現平時都有用過，只是沒有總結到一塊，今天就總結一下吧。 雅虎35條： 1.[內容]儘可能減小HTTP請求數 2.[服務器]使用CDN（Content Delivery Network） 3.[服務器]添上Expires或者Cache-Control HTTP頭 4.[服務器]Gzip組件 5.[css]把樣式表放在頂部 6.[js]把腳本放在底部 7.[css]避免使用CSS表達式 8.[js, css]把JavaScript和CSS放到外面 9.[內容]減小DNS查找 10.[js, css]壓縮JavaScript和CSS 11.[內容]避免重定向 12.[js]去除重複腳本 13.[服務器]配置ETags 14.[內容]讓Ajax可緩存 15.[服務器]儘早清空緩衝區 16.[服務器]對Ajax用GET請求 17.[內容]延遲加載組件 18.[內容]預加載組件 19.[內容]減小DOM元素的數量 20.[內容]跨域分離組件 21.[內容]儘可能少用iframe 22.[內容]杜絕404 23.[cookie]給Cookie減肥 24.[cookie]把組件放在不含cookie的域下 25.[js]儘可能減小DOM訪問 26.[js]用智能的事件處理器 27.[css]選擇 捨棄@import 28.[css]避免使用濾鏡 29.[圖片]優化圖片 30.[圖片]優化CSS Sprite 31.[圖片]不要用HTML縮放圖片 32.[圖片]用小的可緩存的favicon.ico（P.S. 收藏夾圖標） 33.[移動端]保證全部組件都小於25K 34.[移動端]把組件打包到一個複合文檔裏 35.[服務器]避免圖片src屬性爲空 35條原則的詳細分析 1.減小http請求，使用的最多的就是css雪碧圖，圖像映射，行內編碼（base64編碼），雪碧圖也要考慮到適量大小，若是頁面背景圖片過多徹底整合到一張圖片上致使圖片過大也會影響到響應時間；圖像映射的話能夠用來作導航條；行內圖片是使用URL模式把圖片嵌入頁面，這樣會增長html文件的大小，把行內圖片放在（緩存的）的樣式表中能夠避免頁面變重，遺憾的是目前主流瀏覽器不能很好的支持 (後續補充) 參考文章：http://www.tuicool.com/articles/J3uyaa http://www.cnblogs.com/lei2007/archive/2013/08/16/3262897.html