web前端優(yōu)化工作報(bào)告
web前端面試總結(jié)
前端是龐大的,包括HTML、CSS、Javascript、Image、Flash等等各種各樣的資源。前端優(yōu)化是復(fù)雜的,針對方方面面的資源都有不同的方式。那么,前端優(yōu)化的目的是什么
1. 從用戶角度而言,優(yōu)化能夠讓頁面加載得更快、對用戶的操作響應(yīng)得更及時,能夠給用戶提供更為友好的體驗(yàn)。
2. 從服務(wù)商角度而言,優(yōu)化能夠減少頁面請求數(shù)、或者減小請求所占帶寬,能夠節(jié)省可觀的資源。
總之,恰當(dāng)?shù)膬?yōu)化不僅能夠改善站點(diǎn)的用戶體驗(yàn)并且能夠節(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)行請求,因此會增加用戶的等待時間,會給用戶造成站點(diǎn)速度慢這樣一個印象,即使可能用戶能看到的第一屏的資源都已經(jīng)請求完了,但是瀏覽器的進(jìn)度條會一直存在。
減少HTTP請求數(shù)的主要途徑包括:
(1). 從設(shè)計(jì)實(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來做請求驗(yàn)證。盡可能的讓資源能夠在緩存中待得更久。
(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 Image
這條策略實(shí)際上并不一定能減少HTTP請求數(shù),但是卻能在某些條件下或者頁面剛加載時減少HTTP請求數(shù)。對于圖片而言,在頁面剛加載的時候可以只加載第一屏,當(dāng)用戶繼續(xù)往后滾屏的時候才加載后續(xù)的圖片。這樣一來,假如用戶只對第一屏的內(nèi)容感興趣時,那剩余的圖片請求就都節(jié)省了。有啊首頁曾經(jīng)的做法是在加載的時候把第一屏之后的圖片地址緩存在Textarea標(biāo)簽中,待用戶往下滾屏的時候才“惰性”加載。
2. 將外部腳本置底
前文有談到,瀏覽器是可以并發(fā)請求的,這一特點(diǎn)使得其能夠更快的加載資源,然而外鏈腳本在加載時卻會阻塞其他資源,例如在腳本加載完成之前,它后面的圖片、樣式以及其
他腳本都處于阻塞狀態(tài),直到腳本加載完成后才會開始加載。如果將腳本放在比較靠前的`位置,則會影響整個頁面的加載速度從而影響用戶體驗(yàn)。解決這一問題的方法有很多,在這里有比較詳細(xì)的介紹(這里是譯文和更詳細(xì)的例子),而最簡單可依賴的方法就是將腳本盡可能的往后挪,減少對并發(fā)下載的影響。
3. 異步執(zhí)行inline腳本
inline腳本對性能的影響與外部腳本相比,是有過之而無不及。首頁,與外部腳本一樣,inline腳本在執(zhí)行的時候一樣會阻塞并發(fā)請求,除此之外,由于瀏覽器在頁面處理方面是單線程的,當(dāng)inline腳本在頁面渲染之前執(zhí)行時,頁面的渲染工作則會被推遲。簡而言之,inline腳本在執(zhí)行的時候,頁面處于空白狀態(tài)。鑒于以上兩點(diǎn)原因,建議將執(zhí)行時間較長的inline腳本異步執(zhí)行,異步的方式有很多種,例如使用script元素的defer屬性(存在兼容性問題和其他一些問題,例如不能使用document.write)、使用setTimeout,此外,在HTML5中引入了Web Workers的機(jī)制,恰恰可以解決此類問題
4. Lazy Load Javascript
隨著Javascript框架的流行,越來越多的站點(diǎn)也使用起了框架。不過,一個框架往往包括了很多的功能實(shí)現(xiàn),這些功能并不是每一個頁面都需要的,如果下載了不需要的腳本則算得上是一種資源浪費(fèi)-既浪費(fèi)了帶寬又浪費(fèi)了執(zhí)行花費(fèi)的時間。目前的做法大概有兩種,一種是為那些流量特別大的頁面專門定制一個專用的mini版框架,另一種則是Lazy Load。YUI則使用了第二種方式,在YUI的實(shí)現(xiàn)中,最初只加載核心模塊,其他模塊可以等到需要使用的時候才加載
5. 將CSS放在HEAD中
如果將CSS放在其他地方比如BODY中,則瀏覽器有可能還未下載和解析到CSS就已經(jīng)開始渲染頁面了,這就導(dǎo)致頁面由無CSS狀態(tài)跳轉(zhuǎn)到CSS狀態(tài),用戶體驗(yàn)比較糟糕。除此之外,有些瀏覽器會在CSS下載完成后才開始渲染頁面,如果CSS放在靠下的位置則會導(dǎo)致瀏覽器將渲染時間推遲。
6. 異步請求Callback
在某些頁面中可能存在這樣一種需求,需要使用script標(biāo)簽來異步的請求數(shù)據(jù)。類似: Javascript: /*Callback函數(shù)*/
function myCallback(info){
//do something here
}
HTML:
cb返回的內(nèi)容: myCallback('Hello world!');
【web前端優(yōu)化工作報(bào)告】相關(guān)文章:
web前端工作技能簡歷范文01-11
web前端開發(fā)面試題05-31
web前端面試題及答案03-19
web前端工程師簡歷參考模板03-15
web前端網(wǎng)頁設(shè)計(jì)師簡歷模板10-27
Web前端面試題目及答案06-09
web前端的面試自我介紹的技巧01-13
WEB前端開發(fā)工程師簡歷表格06-03
面試前端人員注意03-01
優(yōu)秀的前端簡歷模板01-08