javascript - 很多網(wǎng)頁(yè)前端都是一整個(gè)圖片裁剪出來(lái)很多小的素材比如按鈕圖標(biāo)等這是為什么？手機(jī)端開(kāi)發(fā)也會(huì)這么操作嗎？
問(wèn)題描述
比如微博的這個(gè)加v認(rèn)證的圖標(biāo) 
為什么不讓UI分成一批文件而是在用的時(shí)候再裁剪？順便問(wèn)一問(wèn)在真正的開(kāi)發(fā)中，手機(jī)端也會(huì)這么操作嗎？
問(wèn)題解答
回答1：資源體積小, 數(shù)量多. 如果分成一批文件的話(huà), 網(wǎng)頁(yè)加載的時(shí)候會(huì)產(chǎn)生大量的 http 請(qǐng)求. http 請(qǐng)求的建立是需要消耗設(shè)備性能和網(wǎng)絡(luò)帶寬的.
與其說(shuō)為什么不分成一批文件, 倒不如說(shuō)是為了提升新能而把小文件整合在一起發(fā)布.
回答2：可以搜一下 精靈圖 雪碧圖 sprite圖之類(lèi)的關(guān)鍵字
回答3：這是CSS雪碧圖效果. 原理: 將小圖標(biāo)和背景圖像合并到一張圖片上，然后利用css的背景定位來(lái)顯示需要顯示的圖片部分. 目的: 減少加載網(wǎng)頁(yè)圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù),提高頁(yè)面的加載速度. 問(wèn)題: 首次加載時(shí), 內(nèi)存消耗比較大, 而且會(huì)把不需要用到的圖片或者圖標(biāo)也一起加載到內(nèi)存中.
手機(jī)端一般不用雪碧圖效果. 原因是手機(jī)內(nèi)存本來(lái)就不富裕, 手機(jī)端資源加載一般都是用到的時(shí)候在去加載到內(nèi)存中(lazy load), 而且使用雪碧圖會(huì)提高圖片維護(hù)成本, 在使用圖片時(shí)需要更多的css操作來(lái)顯示指定的圖片. 同時(shí)在iOS中, 使用雪碧圖也加大了不同的手機(jī)圖片適配難度.
相關(guān)文章：
1. python - oslo_config2. python - 如何統(tǒng)計(jì)一份英文 API 開(kāi)發(fā)文檔（如 javadoc文檔）的詞頻？3. mysql優(yōu)化 - mysql 一張表如果不能確保字段列長(zhǎng)度一致，是不是就不需要用到char。4. python - 請(qǐng)問(wèn)這兩個(gè)地方是為什么呢？5. python - 為什么match匹配出來(lái)的結(jié)果是<_sre.SRE_Match object; span=(0, 54), match=’’>6. 請(qǐng)教一個(gè)mysql去重取最新記錄7. javascript - 按鈕鏈接到另一個(gè)網(wǎng)址 怎么通過(guò)百度統(tǒng)計(jì)計(jì)算按鈕的點(diǎn)擊數(shù)量8. 人工智能 - python 機(jī)器學(xué)習(xí) 醫(yī)療數(shù)據(jù) 怎么學(xué)9. 大家都用什么工具管理mysql數(shù)據(jù)庫(kù)？10. php - 有關(guān)sql語(yǔ)句反向LIKE的處理
網(wǎng)公網(wǎng)安備