性能黃金法則：只有10%-20%的最終用戶響應時間花在了下載HTML文檔上，其余的80%-90%時間花在了下載頁面中的所有組件上。

規則1、減少HTTP請求
1、圖片地圖
2、合并腳本和樣式表

規則2、使用內容發布網絡

規則3、添加Expires頭
1、Expires頭
2、Max-Age和mod_expires

規則4、壓縮組件；AddOutputFilterByType DEFAULT text/html text/css application/x-javascript

規則5、將樣式表放在頂部

規則6、將腳本放在底部

規則7、避免CSS表達式

規則8、使用外部Javascript和CSS

規則9、減少DNS查找

規則10、精簡Javascript

規則11、避免重定向

規則12、移除重復腳本

規則13、配置ETag

規則14、使Ajax可緩存

新增：
規則15. Flush the Buffer Early 盡早的釋放緩沖
當用戶進行頁面請求時，服務器端需要花費200到500毫秒時間來拼合HTML，將寫在head與body之間，釋放緩沖，這樣可以將文件頭先發送出去，然后再發送文件內容，提高效率。

規則16. Use GET for AJAX Requests 用GET方式進行AJAX請求
Get 方法和服務器只有一次交互（發送數據），而 Post 要兩次（發送頭部再發送數據）。

規則17. Post-load Components 延遲加載組件
最先加載必須的組件進行頁面初始化，然后再加載其他，YUI Image Loader 是很好的例子。

規則18. Preload components 預加載組件
提前加載以后可能用到的東西，和延遲加載并不沖突，它的目的是為后續請求提供更快的響應，參見Google首頁上的CSS sprites應用。

規則19. Reduce the Number of DOM Elements 減少DOM元素數量
復雜的頁面結構意味著更長的下載及響應時間，更合理更高效的使用標簽來架構頁面，是好的前端的必備條件。

規則20. Split Components Across Domains 跨域分離組件
頁面組件多個來源可以增大你的平行下載量，但注意不要過多，超過2-4個域名會引起上面說到的DNS查找浪費。

規則21. Minimize the Number of iframes 減少iframe數量
需要更有效的利用 ifames。
iframe 優點：有利于下載緩慢的廣告等第三方內容，安全沙箱，并行下載腳本
iframe 缺點：即使為空也會有較大資源消耗，會阻止頁面的onload，非語義

規則22. No 404s 不要出現404頁面
站點本身里（非搜索結果）出現404頁面，無意義的404頁面會影響用戶體驗并且會消耗服務器資源。

規則23. Reduce Cookie Size 減小Cookie
Cookie在服務器及瀏覽器之間的通過文件頭進行交換，盡可能減小Cookie體積，設置合理的過期時間，能夠很好的提高效率。

規則24. Use Cookie-free Domains for Components 對組件使用無Cookie的域名
對靜態組件的Cookie讀取是一種浪費，使用另一個無Cookie的域名來存放你的靜態組件式一個好方法，或者也可以在Cookie中只存放帶www的域名。

規則25. Minimize DOM Access 減少DOM的訪問次數
JS訪問DOM是很慢的，盡量不要用JS來設置頁面布局。

規則26. Develop Smart Event Handlers 開發靈活的事件處理句柄
DOM樹上過多的元素被加入事件句柄的話，反應效率肯定會低，YUI事件工具有一個 onAvailable 方法可以幫助你靈活的設置DOM事件句柄

規則27. Choose < link >over @import 使用< link >而非 @import
在IE中使用@import就和在頁面底部用< link >一樣，我們前面說要把< link >放頂部的。

規則28. Avoid Filters 避免過濾器的使用
如果需要Alpha透明，不要使用AlphaImageLoader，它效率低下而且只對IE6及以下的版本適用，用PNG8圖片。如果你非要使用，加上_filter以免影響IE7+用戶。

規則29. Optimize Images 優化圖片
將你的GIF轉為PNG8會是個減小體積的好辦法，另外有很多方法處理你的JPG及PNG圖片以達到優化效果。

規則30. Optimize CSS Sprites 優化CSS Sprites
在CSS Sprites中豎直并盡量緊湊的排列圖片，盡量將顏色相似的圖片排在一起，會減小圖片本身的大小及提高頁面圖片顯示速度。

規則31. Don’t Scale Images in HTML 不要在HTML中縮放圖片
圖片要用多大的就用多大的，1000X1000的圖片被width=”100″ height=”100″以后，本身的KB數是不會減少的。

規則32. Make favicon. ico Small and Cacheable 縮小favicon. ico的大小并緩存它
站點的瀏覽器ICO應該不是經常換吧，那就長時間的緩存它，并且最好控制在1K以下。

規則33. Keep Components under 25K 保證組件在25K以下
iPhone不能緩存25K以上的組件，并且這還是要在被壓縮前。

規則34. Pack Components into a Multipart Document 將組件打包進一個多部分的文檔中
就好像在郵件中加入附件一樣，一個HTTP請求就夠了，但是這一技術需要確保你的代理支持，iPhone就不支持。

當前題目：高性能網站建設指南--前端
分享URL：http://m.newbst.com/news47/284097.html

成都網站建設公司_創新互聯，為您提供服務器托管、軟件開發、云服務器、網站建設、網站營銷、網站導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯