本人是一名前端開發(fā)者，在公司負責目前負責信息流服務鼓黔，為五大手機廠商和各大App提供服務央勒，每天的請求就是以億計算，加上我們又做了SSP和DSP澳化，就是類似于百度廣告聯(lián)盟崔步，騰訊廣點通這種。接觸過的應該知道缎谷，所以前端優(yōu)化一直是我頭痛的問題井濒，不僅要注重用戶體驗，同時要兼顧收益列林，有時候必須犧牲一些用戶體驗瑞你，但是作為一名有思想的前端，還是努力規(guī)避掉希痴，希望能和從事相同業(yè)務的同學一起學習交流一下者甲，話不多說，就來分享我的性能優(yōu)化之路砌创，有什么不對的知識點过牙，麻煩大家指出批評甥厦。
-
先附上基本的yahoo軍規(guī)——yahoo前端性能團隊總結的35條黃金定律
image
yahoo軍規(guī)把大部分的前端優(yōu)化都提到了纺铭，而在js優(yōu)化這一塊如果有興趣的額寇钉，推薦大家去看《高性能javascript》,書里講的非常詳細。https://segmentfault.com/a/1190000008481413
- web前端優(yōu)化之圖片優(yōu)化
Media Queries 調用高清背景圖
國內手機發(fā)展迅速舶赔，用 retina顯示屏的越來越多扫倡，假如現(xiàn)在有一張圖片，有兩部手機竟纳，一部是普通顯示屏撵溃，一部是高清顯示屏，在同樣大小的屏幕上锥累，高清顯示屏中的位圖會被放大缘挑，圖片會變得模糊。
通過 devicePixelRatio的值桶略，就可以區(qū)分普通顯示屏和高清屏语淘，當devicePixelRatio值等于1時（也就是最小值），那么它普通顯示屏际歼，當devicePixelRatio值大于1(通常是1.5惶翻、2.0)，那么它就是高清顯示屏鹅心。這時候我們可以讓UI準備2套圖片吕粗，甚至是3套圖片，不同像素的圖利用媒體查詢結合 devicePixelRatio 可以區(qū)分普通顯示屏和高清顯示屏旭愧，并給出了如下CSS設計方案：
.css{/* 普通顯示屏(設備像素比例小于等于1.3)使用1倍的圖 */
background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清顯示屏(設備像素比例大于等于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")
如果省時間通用性高颅筋，就像我們是服務端用nginx對圖片進行處理，想要什么樣尺寸的圖片自己裁切,我們提供了按比例縮放和自定尺寸的裁切方法输枯，地址后拼接字符串就行议泵。
http://image.uczzd.cn/12046251381056834816.jpg?id=0&from=export&width=800&height=600
- 使用更小更快更強，新一代圖片格式 WebP
WebP是谷歌在10年推出一種新型圖片格式用押，最早也是應用在谷歌產品中肢簿，谷歌發(fā)布的Android Studio 2.3正式版中就包括對WebP支持的更新，在實測中蜻拨，webp 格式比 jpg 格式減小約 20%池充。這對優(yōu)化用戶體驗，減少CDN帶寬消耗有很好的效果缎讼，但并不是所有瀏覽器都支持 webp 收夸，所以為了使用 webp，需要做一點兼容性的工作血崭。
與其他圖片格式相比卧惜，在肉眼無法分辨圖片質量差異的情況下厘灼，WebP的空間占用是最小的，目前國內外各大互聯(lián)網公司都已經開始應用這一圖片格式咽瓷。比如美團
想實現(xiàn)首先是判斷设凹，即識別單次訪問的來源瀏覽器是否支持 webp 格式，其次是執(zhí)行茅姜，如果該瀏覽器支持闪朱，則將原圖替換為 webp 格式，并返回钻洒。如果不支持奋姿，則顯示原格式圖片。http://caniuse.mojijs.com/Home/Html/item/key/webp/index.html
在識別階段素标，我們有兩種方法：
1. Server 處理
- 通過 UAString 判斷瀏覽器支持情況
只要有請求称诗，服務端就能拿到你的User-Agent信息，通過對瀏覽器進行分類头遭，支持webp放在白名單里寓免，不支持的則為黑名單。判斷為白名單任岸，則直接調用再榄，返回webp格式圖片；反之享潜，則顯示原圖困鸥。這種方式的優(yōu)點在于，只需定期維護白名單即可剑按，邏輯簡單疾就；缺點則在于不可擴展、不可測試艺蝴、UA判斷會出現(xiàn)不準確的情況猬腰。
- 讀取 JavaScript 種下的 cookie 判斷瀏覽器支持情況
Server處理中的另一種方式是通過讀取 JavaScript 種下的 cookie來實現(xiàn)判斷。這種方式的優(yōu)點是表現(xiàn)穩(wěn)定猜敢，訪問速度更快姑荷，切換無壓力。但缺點是缩擂，頁面靜態(tài)化會導致用戶切換瀏覽器時不能自主更新鼠冕，圖片服務失效。比如用戶用支持webp的瀏覽器A請求頁面胯盯，這時緩存的靜態(tài)頁面均使用webp圖片懈费，但當該用戶使用不支持webp的瀏覽器B時，訪問網頁則會出現(xiàn)請求不到圖片的報錯博脑。
- Client 處理
Client 處理憎乙，是美團云為美團主站提供的處理方式票罐。在這種處理方式中，瀏覽器端發(fā)送的beacon webp 請求后泞边，通過檢測其加載情況來判定 webp 支持情況该押，然后瀏覽器寫一個cookie。之后通過讀取瀏覽器cookie判斷是否支持webp繁堡，就可以進行下一步替換操作了沈善。
2.替換圖片過程中也是有兩種處理方式：
- Server 處理
在 server 端處理的優(yōu)點是對下游開發(fā)者透明，缺點是靜態(tài)頁面的緩存數(shù)量會翻倍椭蹄。
替換方式如下：
- 生成 URL 的函數(shù)（ 比如 $deal->getImageUrl ) ，通過運行函數(shù)中直接實現(xiàn)替換
- 對 varnish 靜態(tài)化的頁面净赴，首先識別瀏覽器請求頭類型绳矩，然后將webp 和傳統(tǒng) jpg 的各緩存一份兩份待處理。然后在生成 URL 的地方做替換玖翅。
- Client 處理
在 client 端處理可以比較好地應對頁面靜態(tài)化的情況翼馆，主要針對懶加載（非首屏）的圖片進行處理，直接通過修改懶加載器來實現(xiàn)金度。
對非懶加載的圖片暫時沒有特別好的辦法应媚。目前，可用替換路徑的方式來處理猜极。
Client 處理實際上效果也是不錯的中姜，美團頁面里90%以上的圖片都是懶加載的，基本上都可以滿足需求跟伏。對于大多數(shù)用戶來說丢胚，采用Client 處理實現(xiàn)webp轉換是個不錯的選擇。
- tracking Pixel（像素追蹤）精準追蹤數(shù)據(jù)
既然提到圖片這一塊受扳，我有忍不住想扯寫些題外的tracking Pixel（像素追蹤）携龟，幾乎所有網站都會做數(shù)據(jù)的采集，上報統(tǒng)計勘高。特別是我們做SSP峡蟋、DSP廣告這塊需要獲取例如
- 用戶使用的瀏覽器、操作系統(tǒng)华望、分辨率等蕊蝗。
- 用戶瀏覽行為記錄，比如用戶網站上的點擊行為立美、購買行為等匿又。
- 用戶在APP、WEB中停留時間建蹄、是否活躍等
數(shù)據(jù)永遠說的是實話碌更，數(shù)據(jù)證明一切可能裕偿。如facebook廣告投放的跨境電商朋友都會使用facebook Pixel(像素追蹤)以獲得各環(huán)節(jié)的精準數(shù)據(jù)。這樣追蹤數(shù)據(jù)后痛单，我們才能投放廣告后銷量上去了嘿棘，哪個才是效果最好的，哪個效果不好旭绒，進而通過多個數(shù)據(jù)對比鸟妙，對廣告進行合理的調整優(yōu)化。
國內搜狗挥吵、百度重父、360、新浪都是用這種tracking Pixel方法忽匈，實際就是利用1px 的圖片房午，在圖片地址后綴拼接你需要的信息參數(shù)，瀏覽器在請求任何資源的時候會發(fā)送當前系統(tǒng)的數(shù)據(jù)丹允，比如瀏覽器信息郭厌，操作系統(tǒng)信息，作為http請求頭送過去雕蔽，他們就能統(tǒng)計了折柠。
為什么不用js請求統(tǒng)計？
并不是所有的頁面都支持JS的批狐！NoJSStats的實現(xiàn)機制就是網站分析中點擊流數(shù)據(jù)獲取的方式之一——Web Beacons扇售，即在頁面中嵌入一個1像素的透明圖片，當該頁面被瀏覽時贾陷，圖片就會被請求加載缘眶，于是在后端的服務器日志中就會記錄該圖片的請求日志，這樣就可以獲得日志記錄髓废。
例如百度：
這是百度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ù)巷懈，后端按照圖片后綴名生成對應的數(shù)據(jù)報表。
本文引用@美團云 提供的webP方法慌洪，感謝顶燕。
