data:URL提高圖片響應速度

data:URL方式可以免去向服務器發出HTTP請求,從而提高響應速度。原本的<img src="images/pic.gif">現在可以變爲如下形式

<img src="data:image/gif;base64, R0lGODlhMwAxAIAAAAAAAPyH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw">
將圖片變爲base64編碼來插入HTML代碼中,從而不必向服務器請求圖片資源。
但這種形式的圖片不會被瀏覽器緩存,因此每次都要下載這樣的HTML頁面。
解決辦法是利用CSS文件,瀏覽器會緩存CSS文件,而data:URL方式適合放入CSS文件中,這樣就可以實現緩存。圖片放入CSS文件中採用背景圖片的方式,如下

background-image: url("data:image/gif;base64,R0lGODlhAwADAIAAAP......
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章