使用 cdnjs 上的 1x1 gif

在使用 lazyload image 常會空白的 gif 

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

https://cdnjs.cloudflare.com/ajax/libs/blockly/1.0.0/media/1x1.gif

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？主要是一些爬蟲，和少數的舊瀏覽器