高性能網(wǎng)站建設(shè)指南--前端

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

規(guī)則1、減少HTTP請(qǐng)求
1、圖片地圖
2、合并腳本和樣式表

規(guī)則2、使用內(nèi)容發(fā)布網(wǎng)絡(luò)

規(guī)則3、添加Expires頭
1、Expires頭
2、Max-Age和mod_expires

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

規(guī)則5、將樣式表放在頂部

規(guī)則6、將腳本放在底部

規(guī)則7、避免CSS表達(dá)式

規(guī)則8、使用外部Javascript和CSS

規(guī)則9、減少DNS查找

規(guī)則10、精簡(jiǎn)Javascript

規(guī)則11、避免重定向

規(guī)則12、移除重復(fù)腳本

規(guī)則13、配置ETag

規(guī)則14、使Ajax可緩存

新增：
規(guī)則15. Flush the Buffer Early 盡早的釋放緩沖
當(dāng)用戶進(jìn)行頁(yè)面請(qǐng)求時(shí)，服務(wù)器端需要花費(fèi)200到500毫秒時(shí)間來拼合HTML，將寫在head與body之間，釋放緩沖，這樣可以將文件頭先發(fā)送出去，然后再發(fā)送文件內(nèi)容，提高效率。

規(guī)則16. Use GET for AJAX Requests 用GET方式進(jìn)行AJAX請(qǐng)求
Get 方法和服務(wù)器只有一次交互（發(fā)送數(shù)據(jù)），而 Post 要兩次（發(fā)送頭部再發(fā)送數(shù)據(jù)）。

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

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

規(guī)則19. Reduce the Number of DOM Elements 減少DOM元素?cái)?shù)量
復(fù)雜的頁(yè)面結(jié)構(gòu)意味著更長(zhǎng)的下載及響應(yīng)時(shí)間，更合理更高效的使用標(biāo)簽來架構(gòu)頁(yè)面，是好的前端的必備條件。

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

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

規(guī)則22. No 404s 不要出現(xiàn)404頁(yè)面
站點(diǎn)本身里（非搜索結(jié)果）出現(xiàn)404頁(yè)面，無(wú)意義的404頁(yè)面會(huì)影響用戶體驗(yàn)并且會(huì)消耗服務(wù)器資源。

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

規(guī)則24. Use Cookie-free Domains for Components 對(duì)組件使用無(wú)Cookie的域名
對(duì)靜態(tài)組件的Cookie讀取是一種浪費(fèi)，使用另一個(gè)無(wú)Cookie的域名來存放你的靜態(tài)組件式一個(gè)好方法，或者也可以在Cookie中只存放帶www的域名。

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

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

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

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

規(guī)則29. Optimize Images 優(yōu)化圖片
將你的GIF轉(zhuǎn)為PNG8會(huì)是個(gè)減小體積的好辦法，另外有很多方法處理你的JPG及PNG圖片以達(dá)到優(yōu)化效果。

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

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

規(guī)則32. Make favicon. ico Small and Cacheable 縮小favicon. ico的大小并緩存它
站點(diǎn)的瀏覽器ICO應(yīng)該不是經(jīng)常換吧，那就長(zhǎng)時(shí)間的緩存它，并且最好控制在1K以下。

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

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

當(dāng)前題目：高性能網(wǎng)站建設(shè)指南--前端
分享URL：http://www.muchs.cn/news47/284097.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、軟件開發(fā)、云服務(wù)器、網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)