例如微博的這個加v認證的圖示 為什麼不讓UI分成一批檔案而是在用的時候再裁切? 順便問一問在真正的開發中,手機端也會這麼操作嗎?
資源體積小, 數量多. 如果分成一批文件的話, 網頁加載的時候會產生大量的 http 請求. http 請求的建立是需要消耗設備性能和網絡帶寬的.
與其說為什麼不分成一批文件, 倒不如說是為了提升新能而把小文件整合在一起發布.
可以搜尋 精靈圖 雪碧圖 sprite圖之類的關鍵字
這是CSS雪碧圖效果. 原理: 將小圖標和背景圖像合併到一張圖片上,然後利用css的背景定位來顯示需要顯示的圖片部分. 目的: 減少網頁加載圖片時對伺服器的請求次數,提高頁面的載入速度. 問題: 首次載入時, 記憶體消耗比較大, 而且會把不需要用到的圖片或圖示也一起載入到記憶體中.
手機端一般不用雪碧圖效果. 原因是手機內存本來就不富裕, 手機端資源加載一般都是用到的時候在去加載到內存中(lazy load), 而且使用雪碧圖會提高圖片維護成本, 在使用圖片時需要更多的css操作來顯示指定的圖片. 同時在iOS中, 使用雪碧圖也加大了不同的手機圖片適配難度.
資源體積小, 數量多. 如果分成一批文件的話, 網頁加載的時候會產生大量的 http 請求. http 請求的建立是需要消耗設備性能和網絡帶寬的.
與其說為什麼不分成一批文件, 倒不如說是為了提升新能而把小文件整合在一起發布.
可以搜尋 精靈圖 雪碧圖 sprite圖之類的關鍵字
這是CSS雪碧圖效果.
原理: 將小圖標和背景圖像合併到一張圖片上,然後利用css的背景定位來顯示需要顯示的圖片部分.
目的: 減少網頁加載圖片時對伺服器的請求次數,提高頁面的載入速度.
問題: 首次載入時, 記憶體消耗比較大, 而且會把不需要用到的圖片或圖示也一起載入到記憶體中.
手機端一般不用雪碧圖效果.
原因是手機內存本來就不富裕, 手機端資源加載一般都是用到的時候在去加載到內存中(lazy load), 而且使用雪碧圖會提高圖片維護成本, 在使用圖片時需要更多的css操作來顯示指定的圖片. 同時在iOS中, 使用雪碧圖也加大了不同的手機圖片適配難度.