摘要：判斷為白名單，則直接調(diào)用，返回格式圖片反之，則顯示原圖。處理處理，是美團(tuán)云為美團(tuán)主站提供的處理方式。目前，可用替換路徑的方式來處理。處理實(shí)際上效果也是不錯(cuò)的，美團(tuán)頁(yè)面里以上的圖片都是懶加載的，基本上都可以滿足需求。

本人是一名前端開發(fā)者，在公司負(fù)責(zé)目前負(fù)責(zé)信息流服務(wù)，為五大手機(jī)廠商和各大App提供服務(wù)，每天的請(qǐng)求就是以億計(jì)算，加上我們又做了SSP和DSP，就是類似于百度廣告聯(lián)盟，騰訊廣點(diǎn)通這種。接觸過的應(yīng)該知道，所以前端優(yōu)化一直是我頭痛的問題，不僅要注重用戶體驗(yàn)，同時(shí)要兼顧收益，有時(shí)候必須犧牲一些用戶體驗(yàn)，但是作為一名有思想的前端，還是努力規(guī)避掉，希望能和從事相同業(yè)務(wù)的同學(xué)一起學(xué)習(xí)交流一下，話不多說，就來分享我的性能優(yōu)化之路，有什么不對(duì)的知識(shí)點(diǎn)，麻煩大家指出批評(píng)。

先附上基本的yahoo軍規(guī)——yahoo前端性能團(tuán)隊(duì)總結(jié)的35條黃金定律

yahoo軍規(guī)把大部分的前端優(yōu)化都提到了，而在js優(yōu)化這一塊如果有興趣的額，推薦大家去看《高性能javascript》,書里講的非常詳細(xì)。https://segmentfault.com/a/11...

web前端優(yōu)化之圖片優(yōu)化

Media Queries 調(diào)用高清背景圖

國(guó)內(nèi)手機(jī)發(fā)展迅速，用 retina顯示屏的越來越多，假如現(xiàn)在有一張圖片，有兩部手機(jī)，一部是普通顯示屏，一部是高清顯示屏，在同樣大小的屏幕上，高清顯示屏中的位圖會(huì)被放大，圖片會(huì)變得模糊。

通過 devicePixelRatio的值，就可以區(qū)分普通顯示屏和高清屏，當(dāng)devicePixelRatio值等于1時(shí)（也就是最小值），那么它普通顯示屏，當(dāng)devicePixelRatio值大于1(通常是1.5、2.0)，那么它就是高清顯示屏。這時(shí)候我們可以讓UI準(zhǔn)備2套圖片，甚至是3套圖片，不同像素的圖利用媒體查詢結(jié)合 devicePixelRatio 可以區(qū)分普通顯示屏和高清顯示屏，并給出了如下CSS設(shè)計(jì)方案：

.css{/* 普通顯示屏(設(shè)備像素比例小于等于1.3)使用1倍的圖 */ 
    background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清顯示屏(設(shè)備像素比例大于等于1.5)使用2倍圖  */
    background-image: url(img_2x.png);
  }
}

也可以用less或者sass

bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")

如果省時(shí)間通用性高，就像我們是服務(wù)端用nginx對(duì)圖片進(jìn)行處理，想要什么樣尺寸的圖片自己裁切,我們提供了按比例縮放和自定尺寸的裁切方法，地址后拼接字符串就行。

http://image.uczzd.cn/12046251381056834816.jpg?id=0&from=export&width=800&height=600

使用更小更快更強(qiáng)，新一代圖片格式 WebP

WebP是谷歌在10年推出一種新型圖片格式，最早也是應(yīng)用在谷歌產(chǎn)品中，谷歌發(fā)布的Android Studio 2.3正式版中就包括對(duì)WebP支持的更新，在實(shí)測(cè)中，webp 格式比 jpg 格式減小約 20%。這對(duì)優(yōu)化用戶體驗(yàn)，減少CDN帶寬消耗有很好的效果，但并不是所有瀏覽器都支持 webp ，所以為了使用 webp，需要做一點(diǎn)兼容性的工作。

與其他圖片格式相比，在肉眼無法分辨圖片質(zhì)量差異的情況下，WebP的空間占用是最小的，目前國(guó)內(nèi)外各大互聯(lián)網(wǎng)公司都已經(jīng)開始應(yīng)用這一圖片格式。比如美團(tuán)

想實(shí)現(xiàn)首先是判斷，即識(shí)別單次訪問的來源瀏覽器是否支持 webp 格式，其次是執(zhí)行，如果該瀏覽器支持，則將原圖替換為 webp 格式，并返回。如果不支持，則顯示原格式圖片。http://caniuse.mojijs.com/Hom...

在識(shí)別階段，我們有兩種方法：

1. Server 處理

通過 UAString 判斷瀏覽器支持情況

只要有請(qǐng)求，服務(wù)端就能拿到你的User-Agent信息，通過對(duì)瀏覽器進(jìn)行分類，支持webp放在白名單里，不支持的則為黑名單。判斷為白名單，則直接調(diào)用，返回webp格式圖片；反之，則顯示原圖。這種方式的優(yōu)點(diǎn)在于，只需定期維護(hù)白名單即可，邏輯簡(jiǎn)單；缺點(diǎn)則在于不可擴(kuò)展、不可測(cè)試、UA判斷會(huì)出現(xiàn)不準(zhǔn)確的情況。

讀取 JavaScript 種下的 cookie 判斷瀏覽器支持情況

Server處理中的另一種方式是通過讀取 JavaScript 種下的 cookie來實(shí)現(xiàn)判斷。這種方式的優(yōu)點(diǎn)是表現(xiàn)穩(wěn)定，訪問速度更快，切換無壓力。但缺點(diǎn)是，頁(yè)面靜態(tài)化會(huì)導(dǎo)致用戶切換瀏覽器時(shí)不能自主更新，圖片服務(wù)失效。比如用戶用支持webp的瀏覽器A請(qǐng)求頁(yè)面，這時(shí)緩存的靜態(tài)頁(yè)面均使用webp圖片，但當(dāng)該用戶使用不支持webp的瀏覽器B時(shí)，訪問網(wǎng)頁(yè)則會(huì)出現(xiàn)請(qǐng)求不到圖片的報(bào)錯(cuò)。

Client 處理

Client 處理，是美團(tuán)云為美團(tuán)主站提供的處理方式。在這種處理方式中，瀏覽器端發(fā)送的beacon webp 請(qǐng)求后，通過檢測(cè)其加載情況來判定 webp 支持情況，然后瀏覽器寫一個(gè)cookie。之后通過讀取瀏覽器cookie判斷是否支持webp，就可以進(jìn)行下一步替換操作了。

2.替換圖片過程中也是有兩種處理方式：

Server 處理

在 server 端處理的優(yōu)點(diǎn)是對(duì)下游開發(fā)者透明，缺點(diǎn)是靜態(tài)頁(yè)面的緩存數(shù)量會(huì)翻倍。
替換方式如下：

生成 URL 的函數(shù)（ 比如 $deal->getImageUrl ) ，通過運(yùn)行函數(shù)中直接實(shí)現(xiàn)替換.

對(duì) varnish靜態(tài)化的頁(yè)面，首先識(shí)別瀏覽器請(qǐng)求頭類型，然后將webp 和傳統(tǒng) jpg 的各緩存一份兩份待處理。然后在生成 URL的地方做替換。

Client 處理

在 client 端處理可以比較好地應(yīng)對(duì)頁(yè)面靜態(tài)化的情況，主要針對(duì)懶加載（非首屏）的圖片進(jìn)行處理，直接通過修改懶加載器來實(shí)現(xiàn)。對(duì)非懶加載的圖片暫時(shí)沒有特別好的辦法。目前，可用替換路徑的方式來處理。

Client 處理實(shí)際上效果也是不錯(cuò)的，美團(tuán)頁(yè)面里90%以上的圖片都是懶加載的，基本上都可以滿足需求。對(duì)于大多數(shù)用戶來說，采用Client 處理實(shí)現(xiàn)webp轉(zhuǎn)換是個(gè)不錯(cuò)的選擇。

tracking Pixel（像素追蹤）精準(zhǔn)追蹤數(shù)據(jù)

既然提到圖片這一塊，我有忍不住想扯寫些題外的tracking Pixel（像素追蹤），幾乎所有網(wǎng)站都會(huì)做數(shù)據(jù)的采集，上報(bào)統(tǒng)計(jì)。特別是我們做SSP、DSP廣告這塊需要獲取例如

用戶使用的瀏覽器、操作系統(tǒng)、分辨率等。

用戶瀏覽行為記錄，比如用戶網(wǎng)站上的點(diǎn)擊行為、購(gòu)買行為等。

用戶在APP、WEB中停留時(shí)間、是否活躍等

數(shù)據(jù)永遠(yuǎn)說的是實(shí)話，數(shù)據(jù)證明一切可能。如facebook廣告投放的跨境電商朋友都會(huì)使用facebook Pixel(像素追蹤)以獲得各環(huán)節(jié)的精準(zhǔn)數(shù)據(jù)。這樣追蹤數(shù)據(jù)后，我們才能投放廣告后銷量上去了，哪個(gè)才是效果最好的，哪個(gè)效果不好，進(jìn)而通過多個(gè)數(shù)據(jù)對(duì)比，對(duì)廣告進(jìn)行合理的調(diào)整優(yōu)化。

 國(guó)內(nèi)搜狗、百度、360、新浪都是用這種tracking Pixel方法，實(shí)際就是利用1px 的圖片，在圖片地址后綴拼接你需要的信息參數(shù)，瀏覽器在請(qǐng)求任何資源的時(shí)候會(huì)發(fā)送當(dāng)前系統(tǒng)的數(shù)據(jù)，比如瀏覽器信息，操作系統(tǒng)信息，作為http請(qǐng)求頭送過去，他們就能統(tǒng)計(jì)了。

為什么不用js請(qǐng)求統(tǒng)計(jì)？

并不是所有的頁(yè)面都支持JS的！NoJSStats的實(shí)現(xiàn)機(jī)制就是網(wǎng)站分析中點(diǎn)擊流數(shù)據(jù)獲取的方式之一——Web Beacons，即在頁(yè)面中嵌入一個(gè)1像素的透明圖片，當(dāng)該頁(yè)面被瀏覽時(shí)，圖片就會(huì)被請(qǐng)求加載，于是在后端的服務(wù)器日志中就會(huì)記錄該圖片的請(qǐng)求日志，這樣就可以獲得日志記錄。

例如百度：

這是百度1px圖片地址： http://wn.pos.baidu.com/adx.php?

var url = ["http://eclick.baidu.com/se.jpg?", "type=fatalError", "data=1220", "mes=" + encodeURIComponent(e)].join("&"),    
img = new Image;    
img.src = url
百度在地址欄后拼接了很多參數(shù)，后端按照?qǐng)D片后綴名生成對(duì)應(yīng)的數(shù)據(jù)報(bào)表。
                                                                                                

本文引用@美團(tuán)云 提供的webP方法，感謝。