《
改善用戶體驗 Web前端優(yōu)化策略總結(jié)_網(wǎng)頁設(shè)計》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/110B312012.htm
2. 從服務(wù)商角度而言，優(yōu)化可以減少頁面懇求數(shù)、或者減小要求所占帶寬，可能節(jié)儉可觀的資源。
使用data: URL scheme的方式將圖片嵌入到頁面或CSS中，如果不斟酌資源治理上的問題的話，不失為一個好方法。如果是嵌入頁面的話換來的是增大了頁面的體積，而且無奈利用瀏覽器緩存。使用在CSS中的圖片則更為幻想一些。
這條策略基礎(chǔ)上所有前端人都曉得，而且也是最主要最有效的。都說要減少HTTP請求，那請求多了到底會怎么樣呢？首先，每個請求都是有成本的，既包 含時光本錢也包括資源成本。一個完全的請求都需要經(jīng)由DNS尋址、與服務(wù)器樹立銜接、發(fā)送數(shù)據(jù)、等候服務(wù)器響應(yīng)、接受數(shù)據(jù)這樣一個“漫長”而龐雜的過程。 時間成本就是用戶需要看到或者“感觸”到這個資源是必需要期待這個進程停止的，資源上因為每個請求都須要攜帶數(shù)據(jù)，因而每個請求都需要占用帶寬。
前端是宏大的，包括HTML、CSS、javascript、Image、Flash等等各種各樣的資源。前端優(yōu)化是復(fù)雜的，針對方方面面的資源都有不同的方式。那么，前端優(yōu)化的目的是什么？
(5). Inline Images
-->
另外，因為瀏覽器進行并發(fā)請求的請求數(shù)是有上限的(詳細參見此處)，因此請求數(shù)多了當(dāng)前，瀏覽器需要分批進行請求，因此會增添用戶的等待時間，會給 用戶造成站點速度慢這樣一個印象，即便可能用戶能看到的第一屏的資源都已經(jīng)請求完了，然而瀏覽器的進度條會始終存在。減少HTTP請求數(shù)的重要道路包含：
如果你的頁面像百度首頁一樣簡單，那么接下來的規(guī)矩根本上都用不著了。堅持頁面簡練、減少資源的使用時最直接的。如果不是這樣，你的頁面需要富麗的皮膚，則繼承瀏覽下面的內(nèi)容。
6. 異步請求Callback
(4). CSS SPRites
inline腳本對機能的影響與外部腳原形比，是有過之而無不迭。首頁，與外部腳本一樣，inline腳本在執(zhí)行的時候一樣會阻塞并發(fā)請求，除此之 外，由于瀏覽器在頁面處置方面是單線程的，當(dāng)inline腳本在頁面渲染之前執(zhí)行時，頁面的渲染工作則會被推遲。簡而言之，inline腳本在執(zhí)行的時 候，頁面處于空缺狀態(tài)。鑒于以上兩點起因，倡議將執(zhí)行時間較長的inline腳本異步執(zhí)行，異步的方式有很多種，例如使用script元素的defer屬 性（存在兼容性問題和其他一些問題，例如不能使用document.write）、使用setTimeout，此外，在HTML5中引入了Web Workers的機制，偏偏可以解決此類問題。
如果可以的話，盡可能的將外部的腳本、樣式進行合并，多個合為一個。另外，CSS、Javascript、Image都可以用相應(yīng)的工具進行壓縮，壓縮后往往能省下不少空間。
2. 將外部腳本置底
1. 減少HTTP請求數(shù)
這條策略實際上并不必定能減少HTTP請求數(shù)，但是卻能在某些前提下或者頁面剛加載時減少HTTP請求數(shù)。對圖片而言，在頁面剛加載的時候可以只 加載第一屏，當(dāng)用戶持續(xù)往后滾屏的時候才加載后續(xù)的圖片。這樣一來，如果用戶只對第一屏的內(nèi)容感興致時，那殘余的圖片請求就都節(jié)省了。有啊首頁曾經(jīng)的做法 是在加載的時候把第一屏之后的圖片地址緩存在Textarea標(biāo)簽中，待用戶往下滾屏的時候才“惰性”加載。
1. 從用戶角度而言，優(yōu)化能夠讓頁面加載得更快、對用戶的操作響應(yīng)得更及時，能夠給用戶供給更為友愛的體驗。
前文有談到，閱讀器是能夠并發(fā)請求的，這一特色使得其能夠更快的加載資源，然而外鏈腳本在加載時卻會壅塞其他資源，例如在腳本加載完成之前，它后面 的圖片、款式以及其余腳本都處于梗阻狀況，直到腳本加載實現(xiàn)后才會開端加載。假如將腳本放在比擬靠前的地位，則會影響全部頁面的加載速度從而影響用戶體 驗。解決這一問題的方式有良多，在這里有比較詳細的先容（這里是譯文跟更具體的例子），而最簡略可依附的辦法就是將腳本盡可能的往后挪，減少對并發(fā)下載的 影響。
(6). Lazy Load Images
跟著Javascript框架的風(fēng)行，越來越多的站點也使用起了框架。不過，一個框架往往包括了很多的功效實現(xiàn)，這些功能并不是每一個頁面都需要 的，如果下載了不需要的腳本則算得上是一種資源浪費-既糟蹋了帶寬又揮霍了執(zhí)行破費的時間。目前的做法大略有兩種，一種是為那些流量特殊大的頁面專門定制 一個專用的mini版框架，另一種則是Lazy Load。YUI則使用了第二種方法，在YUI的實現(xiàn)中，最初只加載中心模塊，其他模塊可以等到需要使用的時候才加載。
總之，恰當(dāng)?shù)膬?yōu)化不僅能夠改良站點的用戶體驗并且能夠節(jié)省相稱的資源應(yīng)用。前端優(yōu)化的門路有許多，按粒度大體可以分為兩類，第一類是頁面級別的優(yōu) 化，例如HTTP請求數(shù)、腳本的無阻塞加載、內(nèi)聯(lián)腳本的位置優(yōu)化等；第二類則是代碼級別的優(yōu)化，例如Javascript中的DOM操作優(yōu)化、CSS抉擇 符優(yōu)化、圖片優(yōu)化以及HTML構(gòu)造優(yōu)化等等。另外，本著進步投入產(chǎn)出比的目標(biāo)，后文提到的各種優(yōu)化策略大抵依照投入產(chǎn)出比從大到小的次序排列。
3. 異步履行inline腳本
合并CSS圖片，減少請求數(shù)的又一個好措施。
一、頁面級優(yōu)化
如果將CSS放在其他處所比方BODY中，則瀏覽器有可能還未下載和解析到CSS就已經(jīng)開始渲染頁面了，這就導(dǎo)致頁面由無CSS狀態(tài)跳轉(zhuǎn)到CSS狀 態(tài)，用戶休會比較蹩腳。除此之外，有些瀏覽器會在CSS下載完成后才開始渲染頁面，如果CSS放在靠下的位置則會導(dǎo)致瀏覽器將渲染時間推遲。
怎么才算合理設(shè)置？準則很簡單，能緩存越多越好，能緩存越久越好。例如，很少變化的圖片資源可以直接通過HTTP Header中的Expires設(shè)置一個很長的過時頭；變更不頻繁而又可能會變的資源可以應(yīng)用Last-Modifed來做請求驗證。盡可能的讓資源能夠 在緩存中待得更久。
(3). 資源合并與緊縮
4. Lazy Load Javascript
(2). 公道設(shè)置HTTP緩存
5. 將CSS放在HEAD中
緩存的力氣是強盛的，適當(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é)省帶寬）
(1). 從設(shè)計實現(xiàn)層面簡化頁面
相關(guān)的主題文章：
(責(zé)任編輯：網(wǎng)站建設(shè))
改善用戶體驗 Web前端優(yōu)化策略總結(jié)_網(wǎng)頁設(shè)計相關(guān)文章