前端是龐大的，包括html、css、javascript、image、flash等等各種各樣的資源。前端優(yōu)化是復(fù)雜的，針對方方面面的資源都有不同的方式。那么，前端優(yōu)化的目的是什么？
企業(yè)網(wǎng)站建設(shè)如何改善用戶體驗�。。�！
1. 從用戶角度而言，優(yōu)化能夠讓頁面加載得更快、對用戶的操作響應(yīng)得更及時，能夠給用戶提供更為友好的體驗。
2. 從服務(wù)商角度而言，優(yōu)化能夠減少頁面請求數(shù)、或者減小請求所占帶寬，能夠節(jié)省可觀的資源。
總之，恰當(dāng)?shù)膬?yōu)化不僅能夠改善站點的用戶體驗并且能夠節(jié)省相當(dāng)?shù)馁Y源利用。前端優(yōu)化的途徑有很多，按粒度大致可以分為兩類，第一類是頁面級別的優(yōu) 化，例如http請求數(shù)、腳本的無阻塞加載、內(nèi)聯(lián)腳本的位置優(yōu)化等；第二類則是代碼級別的優(yōu)化，例如javascript中的dom操作優(yōu)化、css選擇 符優(yōu)化、圖片優(yōu)化以及html結(jié)構(gòu)優(yōu)化等等。另外，本著提高投入產(chǎn)出比的目的，后文提到的各種優(yōu)化策略大致按照投入產(chǎn)出比從大到小的順序排列。
一、頁面級優(yōu)化
1. 減少http請求數(shù)
這條策略基本上所有前端人都知道，而且也是最重要最有效的。都說要減少http請求，那請求多了到底會怎么樣呢？首先，每個請求都是有成本的，既包 含時間成本也包含資源成本。一個完整的請求都需要經(jīng)過dns尋址、與服務(wù)器建立連接、發(fā)送數(shù)據(jù)、等待服務(wù)器響應(yīng)、接收數(shù)據(jù)這樣一個“漫長”而復(fù)雜的過程。 時間成本就是用戶需要看到或者“感受”到這個資源是必須要等待這個過程結(jié)束的，資源上由于每個請求都需要攜帶數(shù)據(jù)，因此每個請求都需要占用帶寬。
另外，由于瀏覽器進(jìn)行并發(fā)請求的請求數(shù)是有上限的(具體參見此處)，因此請求數(shù)多了以后，瀏覽器需要分批進(jìn)行請求，因此會增加用戶的等待時間，會給 用戶造成站點速度慢這樣一個印象，即使可能用戶能看到的第一屏的資源都已經(jīng)請求完了，但是瀏覽器的進(jìn)度條會一直存在。減少http請求數(shù)的主要途徑包括：
(1). 從設(shè)計實現(xiàn)層面簡化頁面
如果你的頁面像百度首頁一樣簡單，那么接下來的規(guī)則基本上都用不著了。保持頁面簡潔、減少資源的使用時最直接的。如果不是這樣，你的頁面需要華麗的皮膚，則繼續(xù)閱讀下面的內(nèi)容。
(2). 合理設(shè)置http緩存
緩存的力量是強(qiáng)大的，恰當(dāng)?shù)木彺嬖O(shè)置可以大大的減少http請求。以有啊首頁為例，當(dāng)瀏覽器沒有緩存的時候訪問一共會發(fā)出78個請求，共600多k 數(shù)據(jù)（如圖1.1），而當(dāng)?shù)诙卧L問即瀏覽器已緩存之后訪問則僅有10個請求，共20多k數(shù)據(jù)（如圖1.2）。（這里需要說明的是，如果直接f5刷新頁面 的話效果是不一樣的，這種情況下請求數(shù)還是一樣，不過被緩存資源的請求服務(wù)器是304響應(yīng)，只有header沒有body，可以節(jié)省帶寬）
怎樣才算合理設(shè)置？原則很簡單，能緩存越多越好，能緩存越久越好。例如，很少變化的圖片資源可以直接通過http header中的expires設(shè)置一個很長的過期頭；變化不頻繁而又可能會變的資源可以使用last-modifed來做請求驗證。盡可能的讓資源能夠 在緩存中待得更久。
(3). 資源合并與壓縮
如果可以的話，盡可能的將外部的腳本、樣式進(jìn)行合并，多個合為一個。另外，css、javascript、image都可以用相應(yīng)的工具進(jìn)行壓縮，壓縮后往往能省下不少空間。
(4). css sprites
合并css圖片，減少請求數(shù)的又一個好辦法。
(5). inline images
使用data: url scheme的方式將圖片嵌入到頁面或css中，如果不考慮資源管理上的問題的話，不失為一個好辦法。如果是嵌入頁面的話換來的是增大了頁面的體積，而且無法利用瀏覽器緩存。使用在css中的圖片則更為理想一些。
(6). lazy load images
這條策略實際上并不一定能減少http請求數(shù)，但是卻能在某些條件下或者頁面剛加載時減少http請求數(shù)。對于圖片而言，在頁面剛加載的時候可以只 加載第一屏，當(dāng)用戶繼續(xù)往后滾屏的時候才加載后續(xù)的圖片。這樣一來，假如用戶只對第一屏的內(nèi)容感興趣時，那剩余的圖片請求就都節(jié)省了。有啊首頁曾經(jīng)的做法 是在加載的時候把第一屏之后的圖片地址緩存在textarea標(biāo)簽中，待用戶往下滾屏的時候才“惰性”加載。
2. 將外部腳本置底
前文有談到，瀏覽器是可以并發(fā)請求的，這一特點使得其能夠更快的加載資源，然而外鏈腳本在加載時卻會阻塞其他資源，例如在腳本加載完成之前，它后面 的圖片、樣式以及其他腳本都處于阻塞狀態(tài)，直到腳本加載完成后才會開始加載。如果將腳本放在比較靠前的位置，則會影響整個頁面的加載速度從而影響用戶體 驗。解決這一問題的方法有很多，在這里有比較詳細(xì)的介紹（這里是譯文和更詳細(xì)的例子），而最簡單可依賴的方法就是將腳本盡可能的往后挪，減少對并發(fā)下載的 影響。
3. 異步執(zhí)行inline腳本
inline腳本對性能的影響與外部腳本相比，是有過之而無不及。首頁，與外部腳本一樣，inline腳本在執(zhí)行的時候一樣會阻塞并發(fā)請求，除此之 外，由于瀏覽器在頁面處理方面是單線程的，當(dāng)inline腳本在頁面渲染之前執(zhí)行時，頁面的渲染工作則會被推遲。簡而言之，inline腳本在執(zhí)行的時 候，頁面處于空白狀態(tài)。鑒于以上兩點原因，建議將執(zhí)行時間較長的inline腳本異步執(zhí)行，異步的方式有很多種，例如使用script元素的defer屬 性（存在兼容性問題和其他一些問題，例如不能使用document.write）、使用settimeout，此外，在html5中引入了web workers的機(jī)制，恰恰可以解決此類問題。
4. lazy load javascript
隨著javascript框架的流行，越來越多的站點也使用起了框架。不過，一個框架往往包括了很多的功能實現(xiàn)，這些功能并不是每一個頁面都需要 的，如果下載了不需要的腳本則算得上是一種資源浪費-既浪費了帶寬又浪費了執(zhí)行花費的時間。目前的做法大概有兩種，一種是為那些流量特別大的頁面專門定制 一個專用的mini版框架，另一種則是lazy load。yui則使用了第二種方式，在yui的實現(xiàn)中，最初只加載核心模塊，其他模塊可以等到需要使用的時候才加載。
5. 將css放在head中
如果將css放在其他地方比如body中，則瀏覽器有可能還未下載和解析到css就已經(jīng)開始渲染頁面了，這就導(dǎo)致頁面由無css狀態(tài)跳轉(zhuǎn)到css狀 態(tài)，用戶體驗比較糟糕。除此之外，有些瀏覽器會在css下載完成后才開始渲染頁面，如果css放在靠下的位置則會導(dǎo)致瀏覽器將渲染時間推遲。
6. 異步請求callback
在某些頁面中可能存在這樣一種需求，需要使用script標(biāo)簽來異步的請求數(shù)據(jù)。類似：
javascript: /*callback函數(shù)*/ function mycallback(info){ //do something here } html: <script type="text/javascript" src="http://abc/cb"></script> cb返回的內(nèi)容: mycallback('hello world!');
像以上這種方式直接在頁面上寫<script>對頁面的性能也是有影響的，即增加了頁面首次加載的負(fù)擔(dān)，推遲了domloaded和 window.onload事件的觸發(fā)時機(jī)。如果時效性允許的話，可以考慮在domloaded事件觸發(fā)的時候加載，或者使用settimeout方式來 靈活的控制加載的時機(jī)。
7. 減少不必要的http跳轉(zhuǎn)
對于以目錄形式訪問的http鏈接，很多人都會忽略鏈接最后是否帶’/'，假如你的服務(wù)器對此是區(qū)別對待的話，那么你也需要注意，這其中很可能隱藏了301跳轉(zhuǎn)，增加了多余請求。具體參見下圖，其中第一個鏈接是以無’/'結(jié)尾的方式訪問的，于是服務(wù)器有了一次跳轉(zhuǎn)。
8. 避免重復(fù)的資源請求
這種情況主要是由于疏忽或頁面由多個模塊拼接而成，然后每個模塊中請求了同樣的資源時，會導(dǎo)致資源的重復(fù)請求。出現(xiàn)的幾率不大，但是還是要注意排查，不然可能會出現(xiàn)如下局面，來自這里。
上一條：
中小企業(yè)網(wǎng)絡(luò)營銷效果不佳的三大因素下一條：
六種經(jīng)典的論壇推廣方法介紹
湘公網(wǎng)安備 43010302001803號