成都網(wǎng)站制作網(wǎng)頁(yè)加載前端性能思路
前端性能優(yōu)化23條
Web應(yīng)用的性能優(yōu)化思路
網(wǎng)頁(yè)加載效果實(shí)現(xiàn)

前端性能優(yōu)化23條
1. 減少HTTP請(qǐng)求次數(shù)

盡量合并圖片、CSS、JS。比如加載一個(gè)頁(yè)面，如果有5個(gè)css文件的話(huà)，那么會(huì)發(fā)出5次http請(qǐng)求，這樣會(huì)讓用戶(hù)第一次訪(fǎng)問(wèn)你的頁(yè)面的時(shí)候會(huì)長(zhǎng)時(shí)間等待。而如果把這個(gè)5個(gè)文件合成一個(gè)的話(huà)，就只需要發(fā)出一次http請(qǐng)求，節(jié)省網(wǎng)絡(luò)請(qǐng)求時(shí)間，加快頁(yè)面的加載。
2. 使用CDN

網(wǎng)站上靜態(tài)資源即css、js全都使用cdn分發(fā)，圖片亦然。
3. 避免空的src和href

當(dāng)link標(biāo)簽的href屬性為空、script標(biāo)簽的src屬性為空的時(shí)候，瀏覽器渲染的時(shí)候會(huì)把當(dāng)前頁(yè)面的URL作為它們的屬性值，從而把頁(yè)面的內(nèi)容加載進(jìn)來(lái)作為它們的值。所以要避免犯這樣的疏忽。
4. 為文件頭指定Expires

ExiPRes是用來(lái)設(shè)置文件的過(guò)期時(shí)間的，一般對(duì)css、js、圖片資源有效。 他可以使內(nèi)容具有緩存性，這樣下回再訪(fǎng)問(wèn)同樣的資源時(shí)就通過(guò)瀏覽器緩存區(qū)讀取，不需要再發(fā)出http請(qǐng)求。

5. 使用gzip壓縮內(nèi)容

gzip能夠壓縮任何一個(gè)文本類(lèi)型的響應(yīng)，包括html，xml，json。大大縮小請(qǐng)求返回的數(shù)據(jù)量。
6. 把CSS放到頂部

網(wǎng)頁(yè)上的資源加載時(shí)從上網(wǎng)下順序加載的，所以css放在頁(yè)面的頂部能夠優(yōu)先渲染頁(yè)面，讓用戶(hù)感覺(jué)頁(yè)面加載很快。
7. 把JS放到底部

加載js時(shí)會(huì)對(duì)后續(xù)的資源造成阻塞，必須得等js加載完才去加載后續(xù)的文件 ，所以就把js放在頁(yè)面底部最后加載。
8. 避免使用CSS表達(dá)式

舉個(gè)css表達(dá)式的例子
font-color:expression((new Date()).getHours()%3 ? "#fff" : "#aaa");1

這個(gè)表達(dá)式會(huì)持續(xù)的在頁(yè)面上計(jì)算樣式，影響頁(yè)面的性能。并且css表達(dá)式只被IE支持。

9. 將CSS和JS放到外部文件中

目的是緩存文件，可以參考原則4。 但有時(shí)候?yàn)榱藴p少請(qǐng)求，也會(huì)直接寫(xiě)到頁(yè)面里，需根據(jù)PV和IP的比例權(quán)衡。
10. 權(quán)衡DNS查找次數(shù)

減少主機(jī)名可以節(jié)省響應(yīng)時(shí)間。但同時(shí)，需要注意，減少主機(jī)會(huì)減少頁(yè)面中并行下載的數(shù)量。IE瀏覽器在同一時(shí)刻只能從同一域名下載兩個(gè)文件。當(dāng)在一個(gè)頁(yè)面顯示多張圖片時(shí)，IE 用戶(hù)的圖片下載速度就會(huì)受到影響。所以新浪會(huì)搞N個(gè)二級(jí)域名來(lái)放圖片。

11精簡(jiǎn)CSS和JS

這里就涉及到css和js的壓縮了。比如下面的新浪的一個(gè)css文件，把空格回車(chē)全部去掉，減少文件的大小?，F(xiàn)在的壓縮工具有很多，基本主流的前端構(gòu)建工具都能進(jìn)行css和js文件的壓縮，如grunt，glup等。

四川網(wǎng)站優(yōu)化排名公司

12. 避免跳轉(zhuǎn)

有種現(xiàn)象會(huì)比較坑爹，看起來(lái)沒(méi)什么差別，其實(shí)多次了一次頁(yè)面跳轉(zhuǎn)。比如當(dāng)URL本該有斜杠（/）卻被忽略掉時(shí)。例如，當(dāng)我們要訪(fǎng)問(wèn) http:// baidu.com 時(shí)，實(shí)際上返回的是一個(gè)包含301代碼的跳轉(zhuǎn)，它指向的是 http:// baidu.com/ （注意末尾的斜杠）。在nginx服務(wù)器可以使用rewrite；Apache服務(wù)器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash來(lái)避免。 另一種是不用域名之間的跳轉(zhuǎn)， 比如訪(fǎng)問(wèn) http:// baidu.com/bbs 跳轉(zhuǎn)到 http:// bbs.baidu.com/ 。那么可以通過(guò)使用Alias或者mod_rewirte建立CNAME（保存一個(gè)域名和另外一個(gè)域名之間關(guān)系的DNS記錄）來(lái)替代。
13. 刪除重復(fù)的JS和CSS

重復(fù)調(diào)用腳本，除了增加額外的HTTP請(qǐng)求外，多次運(yùn)算也會(huì)浪費(fèi)時(shí)間。在IE和Firefox中不管腳本是否可緩存，它們都存在重復(fù)運(yùn)算javaScript的問(wèn)題。
14. 配置ETags

它用來(lái)判斷瀏覽器緩存里的元素是否和原來(lái)服務(wù)器上的一致。比last-modified date更具有彈性，例如某個(gè)文件在1秒內(nèi)修改了10次，Etag可以綜合Inode(文件的索引節(jié)點(diǎn)(inode)數(shù))，MTime(修改時(shí)間)和Size來(lái)精準(zhǔn)的進(jìn)行判斷，避開(kāi)UNIX記錄MTime只能精確到秒的問(wèn)題。 服務(wù)器集群使用，可取后兩個(gè)參數(shù)。使用ETags減少Web應(yīng)用帶寬和負(fù)載
15. 可緩存的Ajax

異步請(qǐng)求同樣的造成用戶(hù)等待，所以使用ajax請(qǐng)求時(shí)，要主動(dòng)告訴瀏覽器如果該請(qǐng)求有緩存就去請(qǐng)求緩存內(nèi)容。如下代碼片段, cache:true就是顯式的要求如果當(dāng)前請(qǐng)求有緩存的話(huà)，直接使用緩存
$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){}, error : function(){} })1234567
16. 使用GET來(lái)完成AJAX請(qǐng)求

當(dāng)使用xmlhttpRequest時(shí)，瀏覽器中的POST方法是一個(gè)“兩步走”的過(guò)程：首先發(fā)送文件頭，然后才發(fā)送數(shù)據(jù)。因此使用GET獲取數(shù)據(jù)時(shí)更加有意義。
17. 減少DOM元素?cái)?shù)量

這是一門(mén)大學(xué)問(wèn)，這里可以引申出一堆優(yōu)化的細(xì)節(jié)。想要具體研究的可以看后面推薦書(shū)籍。總之大原則減少DOM數(shù)量，就會(huì)減少瀏覽器的解析負(fù)擔(dān)。
18. 避免404

比如外鏈的css、js文件出現(xiàn)問(wèn)題返回404時(shí)，會(huì)破壞瀏覽器的并行加載。

19. 減少Cookie的大小

Cookie里面別塞那么多東西，因?yàn)槊總€(gè)請(qǐng)求都得帶著他跑。
20. 使用無(wú)cookie的域

比如CSS、js、圖片等，客戶(hù)端請(qǐng)求靜態(tài)文件的時(shí)候，減少了 Cookie 的反復(fù)傳輸對(duì)主域名的影響。

21. 不要使用濾鏡

IE獨(dú)有屬性AlphaImageLoader用于修正7.0以下版本中顯示PNG圖片的半透明效果。這個(gè)濾鏡的問(wèn)題在于瀏覽器加載圖片時(shí)它會(huì)終止內(nèi)容的呈現(xiàn)并且凍結(jié)瀏覽器。在每一個(gè)元素（不僅僅是圖片）它都會(huì)運(yùn)算一次，增加了內(nèi)存開(kāi)支，因此它的問(wèn)題是多方面的。 完全避免使用AlphaImageLoader的方法就是使用PNG8格式來(lái)代替，這種格式能在IE中很好地工作。如果你確實(shí)需要使用AlphaImageLoader，請(qǐng)使用下劃線(xiàn)_filter又使之對(duì)IE7以上版本的用戶(hù)無(wú)效。
22. 不要在HTML中縮放圖片

比如你需要的圖片尺寸是50* 50，那就不用用一張500*500的大尺寸圖片，影響加載（說(shuō)到這里可能有朋友會(huì)說(shuō)了，后臺(tái)上傳的圖片我也沒(méi)辦法控制他上傳的尺寸啊，這里只是說(shuō)的最開(kāi)始做靜態(tài)頁(yè)面的時(shí)候的一些注意事項(xiàng)，至于后面怎么去操作，那就看網(wǎng)編怎么辦了，盡可能把自己能做的做到就行了）
23. 縮小favicon.ico并緩存

以上是Yslow的23個(gè)優(yōu)化原則，基本可以涵蓋現(xiàn)在前端大部分的性能優(yōu)化原則了，很多更加geek和精細(xì)優(yōu)化方法都是從這些原則里面延伸出來(lái)的。

前端優(yōu)化是條漫長(zhǎng)的路，不是說(shuō)一天兩天就能全部做完的。我們可以參考上面的準(zhǔn)則去把我們目前能做的都給優(yōu)化了，剩下的更加小的一些細(xì)節(jié)點(diǎn)不用太過(guò)著急，畢竟也是要考慮優(yōu)化性?xún)r(jià)比的。比如為了減小一個(gè)文件幾個(gè)字節(jié)花上個(gè)把月根本不值得。這些優(yōu)化的東西都可以在我們的工作中慢慢去通過(guò)積累，去通過(guò)google解決。

網(wǎng)頁(yè)加載效果實(shí)現(xiàn)