Reduce cookie size減少cookie大小
HTTP Cookie(也叫Web Cookie或瀏覽器Cookie)是服務(wù)器發(fā)送到用戶瀏覽器并保存在本地的一小塊數(shù)據(jù)，它會(huì)在瀏覽器下次向同一服務(wù)器再發(fā)起請(qǐng)求時(shí)被攜帶并發(fā)送到服務(wù)器上。通常，它用于告知服務(wù)端兩個(gè)請(qǐng)求是否來(lái)自同一瀏覽器，如保持用戶的登錄狀態(tài)。HTTP協(xié)議是無(wú)狀態(tài)的，即所有發(fā)送過(guò)的請(qǐng)求都不會(huì)被記錄下來(lái)，為了實(shí)現(xiàn)記錄一些穩(wěn)定的狀態(tài)信息，在這些過(guò)程中添加了Cookie。
Cookie主要用于以下三個(gè)方面：
會(huì)話狀態(tài)管理(如用戶登錄狀態(tài)、購(gòu)物車、游戲分?jǐn)?shù)或其它需要記錄的信息)
個(gè)性化設(shè)置(如用戶自定義設(shè)置、主題等)
瀏覽器行為跟蹤(如跟蹤分析用戶行為等)
cookie工作原理如下：
之所以希望cookie的值越小越好，是因?yàn)閏ookie會(huì)隨HTTP一塊發(fā)給服務(wù)器，如果cookie越小，那么說(shuō)明我們?yōu)g覽器發(fā)送給服務(wù)器的字節(jié)數(shù)越少。
不同的瀏覽器所支持的最多的cookie數(shù)和cookie大小都會(huì)有所有不同。
不同的編碼格式會(huì)影響到cookie的大小，ASCII每個(gè)字符占一個(gè)字節(jié)，BG2312是中文字符，一個(gè)中文字符2個(gè)字節(jié)，UTF8一個(gè)字符占3個(gè)字節(jié)。
cookie的語(yǔ)法：
Set-Cookie: =
cookie分為兩類：一是會(huì)話cookie;二是持久cookie;如果是持久cookie那可以通過(guò)expire或max-age來(lái)設(shè)定：
Set-Cookie: id=a3fWa; Expires=Wed, 20 Oct 2019 08:27:00 GMT;
關(guān)于cookie的優(yōu)化，一般有以下一些方法：
1.刪除不必要的Cookie，將一些不需要的Cookie可以禁用或直接刪除。
2.減小Cookie的大小，盡量將Cookie的大小減小到最小化，這樣可以減少HTTP請(qǐng)求報(bào)文的大小。
3.為Cookie設(shè)置一個(gè)合適的過(guò)期時(shí)間。
4.通過(guò)使用不同的domain來(lái)減少cookie的使用，Cookie有時(shí)候在訪問(wèn)一些資源時(shí)，如JS、CSS等，會(huì)出現(xiàn)很多一些多余的Cookie，這樣可以使用domain來(lái)存儲(chǔ)這些靜態(tài)的資源，這樣不需要每次發(fā)送多余的Cookie到服務(wù)器端
0Use cookie-free domains使用空閑Cookie域
cookie在工作過(guò)程中，只要我們提交了HTTP請(qǐng)求，cookie就會(huì)和請(qǐng)求一塊發(fā)送到服務(wù)器，但是有一種特殊情況是，如果這個(gè)組件使用的是cache的內(nèi)容，這個(gè)時(shí)候?yàn)g覽器還是會(huì)向服務(wù)器發(fā)送cookie，但是服務(wù)器不會(huì)處理 這個(gè)cookie的信息。所以這種情況下說(shuō)白就是cookie白發(fā)送，沒任何意義。
為了更好的解決這些問(wèn)題我們會(huì)使用一個(gè)單獨(dú)的子域來(lái)存儲(chǔ)這些靜態(tài)的組件。讓cookie放在一個(gè)單獨(dú)的子域中。這樣來(lái)減少cookie發(fā)送的次數(shù)，因?yàn)閏ookie會(huì)讓請(qǐng)求頭的變大。
使用cookie子域帶的優(yōu)點(diǎn)：
1.減少網(wǎng)絡(luò)流量;
2.減少靜態(tài)內(nèi)容的加載時(shí)間;
如果需要實(shí)現(xiàn)空閑子域來(lái)管理cookie，那么需要在web服務(wù)器中對(duì)它進(jìn)行詳細(xì)的配置，以nginx為例，通常配置的方法如下：
server {listen ip:80;server_name test.com;root /srv/http/nginx/ test.com;access_log logs/ test.com.access.log;location / {index index.html;charset utf-8;}}}server {listen 192.168.13.33:80;server_name static.test.com;root /srv/http/nginx/test.com;location / {if ($request_filename ~ “.(jpg|css|gif|png|swf|ico|mp3)#34;) {break;}return 404;}}
Avoid AlphaImageLoader fifilter避免過(guò)濾器
AlphalmageLoader過(guò)濾器是IE瀏覽器專有的一個(gè)關(guān)于圖片的屬性，主要是為了解決半透明真彩色的PNG顯示問(wèn)題。
AlphalmageLoader的語(yǔ)法如下：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled ,sizingMethod=sSize , src=”/a2020/img/data-img.jpg” data-src=sURL )
使用AlphalmageLoader過(guò)濾器會(huì)導(dǎo)致以后問(wèn)題出現(xiàn)：
—>會(huì)增加內(nèi)在的消耗，因?yàn)樵诩虞d過(guò)程不是按圖像應(yīng)用來(lái)加載的，而是按每個(gè)元素應(yīng)用來(lái)加載的。
如果使用抓包工具或頁(yè)面分析工具會(huì)發(fā)現(xiàn)，使用AlphalmageLoader過(guò)濾器請(qǐng)求的時(shí)候明顯會(huì)更長(zhǎng)，并且所消耗的內(nèi)存也會(huì)明顯增多。
—>這個(gè)過(guò)濾器在下載圖片時(shí)會(huì)阻止瀏覽器進(jìn)行渲染并且凍結(jié)瀏覽器。
not scale images in HTML不要縮放圖片
對(duì)圖片進(jìn)行縮放的語(yǔ)法如下：
在我們進(jìn)行性能測(cè)試時(shí)，發(fā)現(xiàn)即使對(duì)圖片進(jìn)行了縮放，在發(fā)送請(qǐng)求，其實(shí)還是對(duì)原文件進(jìn)行請(qǐng)求，所以是否使用縮放，對(duì)性能沒有任何影響，所以站在性能的角度我們不建議對(duì)圖片進(jìn)行縮放，因?yàn)榭s放可能帶來(lái)圖片顯示不全的情況。
那么要解決這個(gè)問(wèn)題就必須要求開發(fā)人員根據(jù)自己的需要做好一張符合我們尺寸要求的圖片。
Make favicon small and cacheable使用ico格式并可緩存
將一些不經(jīng)常修改的力圖片做成ico圖標(biāo)，做成ico圖標(biāo)的目的是為了減小圖片大的小，建議做成ico的圖標(biāo)小于10K。
做成ico圖標(biāo)并將其做成可緩存?？墒褂胑xpires和max-age來(lái)設(shè)置過(guò)期的時(shí)間，使用可緩存。
如果將ico圖標(biāo)再優(yōu)化的話可以將ico圖標(biāo)放置在CDN服務(wù)器上。
