2018年11月20日 星期二

使用 cdnjs 上的 1x1 gif

在使用 lazyload image 常會空白的 gif 

這邊找了幾個 43 bytes 的版本:

https://cdnjs.cloudflare.com/ajax/libs/timelinejs/2.36.0/css/blank.gif
https://cdnjs.cloudflare.com/ajax/libs/probtn/1.0.1/stylesheets/blank.gif
https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.8.5/skins/lightgray/img/trans.gif

那為什麼不用下列方法?
留白法:<img data-src="http://...." />
data uri: <img data-src ="http://...." src="data:image/gif;base64,....." />

因為看過 access log 之後發現
如果你的頁面是 example.com/hello/
留白法會造成主頁面再多一次 request 到 /hello/
data uri 會造成相對路徑再多一次 request 到 /hello/data:image/gif;base64,...

誰發的 request?主要是一些爬蟲,和少數的舊瀏覽器