本書成書于08年十厢,是十幾年前的事情,所以難免會(huì)有一些理論跟不上時(shí)代捂齐,但是很多原理性的問題蛮放,仍然值得我們?nèi)W(xué)習(xí)。
筆者用幾小時(shí)的時(shí)間奠宜,通讀了本書包颁,并進(jìn)行了內(nèi)容的精縮瞻想,希望能夠幫助到大家~
一、減少http請(qǐng)求
圖片地圖娩嚼、雪碧圖蘑险、合并js/css文件、內(nèi)聯(lián)圖片
二岳悟、使用CDN
沒什么好說的~
三佃迄、添加Expires頭
主要目的是進(jìn)行http緩存,更好的方案是使用cache-control
Expires與cache-control的區(qū)別:
當(dāng)服務(wù)器與客戶端的時(shí)區(qū)差距很大時(shí)贵少,Expires設(shè)置的過期日期會(huì)產(chǎn)生很大的誤差呵俏;設(shè)置Expires過期日期的資源到期之后,服務(wù)器需要額外的邏輯來設(shè)置新的過期日期滔灶;cache-control只有http1.1才支持普碎。
四、壓縮資源
主要是使用 Accept-Encodeing: gzip 來對(duì)請(qǐng)求資源進(jìn)行壓縮
某些情況需要使用Vary字段
五录平、將css放在頂部
涉及到瀏覽器解析html的原理麻车,css文件會(huì)阻塞DOM渲染和js執(zhí)行,所以應(yīng)該放在頂部
六萄涯、將js放在底部
涉及到瀏覽器解析html的原理绪氛,js文件會(huì)阻塞DOM樹解析,所以應(yīng)該放在底部
七涝影、避免css表達(dá)式
書中提到的表達(dá)式多為IE專屬枣察,而今IE已不是瀏覽器的主流,所以這部分可以忽略
八燃逻、使用外部js和css
為了使得瀏覽器能夠緩存這些js序目、css
九、減少DNS查找
通過使用keep-alive和較少的域名來減少DNS查找
十伯襟、對(duì)js源代碼進(jìn)行精簡(jiǎn)
本質(zhì)就是壓縮混淆js文件猿涨,都9102年了,這已經(jīng)是前端工程化的必備部分姆怪,所以可以忽略
十一叛赚、避免重定向
重定向顯而易見會(huì)增加加載時(shí)間
十二、移除重復(fù)腳本
前端工程化可以避免這一點(diǎn)
十三稽揭、配置ETag
ETag的問題在于俺附,當(dāng)客戶端請(qǐng)求的內(nèi)容來自于一個(gè)服務(wù)器集群的時(shí)候,盡管文件內(nèi)容是相同的溪掀,不同的服務(wù)器仍然會(huì)產(chǎn)生不同的ETag標(biāo)識(shí)事镣,這就會(huì)導(dǎo)致協(xié)商緩存失效。而且揪胃,If-None-Match 比 If-modified-Since 優(yōu)先級(jí)更高璃哟,所以ETag還會(huì)影響其他協(xié)商緩存的命中氛琢。
十四、使Ajax可緩存
為Ajax請(qǐng)求設(shè)置http緩存随闪。主要手段是添加一個(gè)長期的Expires頭阳似。