此情無(wú)計(jì)可消除瓦盛，才下眉頭，又上心頭走贪。
我的github: 李大玄
我的私人博客: 李大玄
我的npm開源庫(kù): 李大玄
我的簡(jiǎn)書: 李大玄
我的CSDN: 李大玄
我的掘金: 李大玄
嗶哩嗶哩: 李大玄
1. 首先減少http請(qǐng)求, 首先是圖片請(qǐng)求
1-1.將項(xiàng)目中的圖片盡量使用為icon
1-2.圖片地圖<map><area/></map>
1-3.還有精靈圖(css-sprites)
1-4.圖片壓縮 壓縮后的圖片大小會(huì)減少
1-5.小于300k的圖片進(jìn)行壓縮 減少http請(qǐng)求 在webpack中可以配置
1-6.合并腳本和樣式表 因?yàn)槎际峭饴?lián)進(jìn)來(lái)的 每一個(gè)文件都需要加載 合并之后減少請(qǐng)求量
2. 使用內(nèi)容發(fā)布網(wǎng)絡(luò)
2-1.使用CDN, 將一些資源放在cdn進(jìn)行引入,發(fā)布靜態(tài)內(nèi)容
2-2.節(jié)省,將資源放在單獨(dú)的服務(wù)器上
3.添加 Expires Header
3-1.瀏覽器使用緩存來(lái)減少http請(qǐng)求的數(shù)量,減少http的響應(yīng)大小
如果為頁(yè)面中的一個(gè)圖片返回了這個(gè)頭,瀏覽器在后續(xù)的頁(yè)面瀏覽中會(huì)使用緩存的圖片
3-2.max-age mod_expires
瀏覽器再次請(qǐng)求服務(wù)器時(shí)壳猜，瀏覽器會(huì)先判斷max-age谷誓，如果到期則直接請(qǐng)求服務(wù)器，否則直接從緩存中取番舆，
mod_expires Apache模塊,在使用ExpiresHeader 時(shí)能夠像max_age那樣設(shè)置日期,通過(guò) Expires Default 指令來(lái)完成
(如果在規(guī)定的時(shí)間內(nèi),需要發(fā)版,但是有緩存任務(wù)的時(shí)候,可以使用生成新連接的方法進(jìn)行資源重新請(qǐng)求)
4.壓縮組件
4-1. Accept-Encoding: gzip, deflate (客戶端列出來(lái)的方法中的一種進(jìn)行壓縮響應(yīng))
很多瀏覽器不支持deflate,但是支持 gzip
很多網(wǎng)站會(huì)壓縮HTML文檔,但是像腳本和樣式表,XML和JSON 都值得壓縮
圖片和PDF不應(yīng)該壓縮,因?yàn)槎际菈嚎s過(guò)的 壓縮只會(huì)浪費(fèi)CPU資源,還可能會(huì)增加文件大小
gzip能將響應(yīng)整體減少66%, deflate能減少60%
4-2. 配置
配置gzip時(shí)使用的模塊取決于Apache的版本
Accept1.3使用mod_gzip
Accept2.x使用mod_deflate
4-3.代理緩存
Vary: Accept-Encoding
4-4.邊緣情形
服務(wù)器和客戶端的壓縮對(duì)等性看似簡(jiǎn)單,但必須正確才行酝碳。無(wú)論是客戶端還是服務(wù)器發(fā)生錯(cuò)誤，頁(yè)面都會(huì)被破壞恨狈，
錯(cuò)誤不會(huì)經(jīng)常發(fā)生疏哗，但是需要考慮。
5.將樣式表放在頂部
5-1.將DHTML 特征的樣式表放在文檔頂部,加載更快, 反之放在后面加載更慢
5-2.逐步呈現(xiàn)
將樣式表放在文檔底部會(huì)導(dǎo)致瀏覽器中阻止內(nèi)容逐步呈現(xiàn),為避免當(dāng)樣式變化時(shí)重繪頁(yè)面中的元素,
瀏覽器會(huì)阻塞內(nèi)容逐步呈現(xiàn).
5-3.sleep.cgi
5-4.將css放在頂部
為了避免頁(yè)面白屏,將樣式表放在頂部,這樣叫做(css at the top),不管頁(yè)面是如何加載的,窗口新開,重新加載,頁(yè)面都會(huì)逐步呈現(xiàn)
一個(gè)style模塊可以包含多個(gè)@import 但是@import必須放在所有其他規(guī)則之前
@import有可能導(dǎo)致白屏,即便把@import放在文檔的head標(biāo)簽中也是如此
5-5.無(wú)樣式內(nèi)容的閃爍
樣式表在頁(yè)面中的位置并不影響下載時(shí)間,但是會(huì)影響頁(yè)面的呈現(xiàn)
6.將腳本放在底部 可以提高下載的并行度
6-1.腳本帶來(lái)的問(wèn)題
6-2.并行下載
6-3.腳本阻塞下載
6-4.最差情況: 將腳本放在頂部
6-5.最佳情況: 將腳本放在底部
7.避免css 表達(dá)式 CSS表達(dá)式是動(dòng)態(tài)設(shè)置css屬性的一種強(qiáng)大 并且危險(xiǎn)的方式.
7-1.一次性表達(dá)式 防抖節(jié)流
7-2.事件處理
7-3.沒(méi)有深入了解底層影響的情況下使用css表達(dá)式是很危險(xiǎn)的
8.使用外部JavaScript 和 css
8-1.純粹而言,在HTML文檔中寫js與css 加載更快,因?yàn)闇p少了http請(qǐng)求 30% ~ 50%
8-2.組件重用
如過(guò)網(wǎng)站每個(gè)頁(yè)面使用了想通的js和css,那么使用外部文件可以提高這些組件重用率.Expires
如果重用性底,還是內(nèi)聯(lián)更有意義
8-3.典型的對(duì)比結(jié)果
9.減少DNS查找
Internet是通過(guò)IP地址來(lái)查找服務(wù)器的,猶豫IP地址很難記,太長(zhǎng)使用包含主機(jī)名的URL來(lái)取代她
dns也是開銷,通常瀏覽器查找一個(gè)給定的主機(jī)名的IP地址要花費(fèi)20~120毫秒
9-1.DNS緩存和TTL
DNS查找可以被緩存起來(lái)以提高性能
10. 精簡(jiǎn)JavaScript
10-1.混淆是可以應(yīng)用在源代碼上的另一種優(yōu)化方式.和精簡(jiǎn)一樣,他會(huì)移除注釋和空白,同事他還會(huì)改寫代碼.
也就是壓縮js
10-2.精簡(jiǎn)css #000000 => #000 0代替0px
11. 避免重定向
每一個(gè)請(qǐng)求都是要消費(fèi)時(shí)間的
12. 避免重復(fù)腳本
12-1.在頁(yè)面沖多次包含相同的腳本回事頁(yè)面變慢
12-2.在Internet Explorer中,如果腳本沒(méi)有被緩存,或在重新加載頁(yè)面時(shí),會(huì)產(chǎn)生額外的HTTP請(qǐng)求
12-3.在Firefox 和 Internet Explorer中,腳本會(huì)被多次請(qǐng)求
13. 使用ETag 沒(méi)看
14. 使ajax 可緩存
