文章詳情頁
javascript - 很多網(wǎng)頁前端都是一整個(gè)圖片裁剪出來很多小的素材比如按鈕圖標(biāo)等這是為什么？手機(jī)端開發(fā)也會這么操作嗎？
瀏覽：127日期：2022-11-05 14:10:09
問題描述
比如微博的這個(gè)加v認(rèn)證的圖標(biāo) 
為什么不讓UI分成一批文件而是在用的時(shí)候再裁剪？順便問一問在真正的開發(fā)中，手機(jī)端也會這么操作嗎？
問題解答
回答1：資源體積小, 數(shù)量多. 如果分成一批文件的話, 網(wǎng)頁加載的時(shí)候會產(chǎn)生大量的 http 請求. http 請求的建立是需要消耗設(shè)備性能和網(wǎng)絡(luò)帶寬的.
與其說為什么不分成一批文件, 倒不如說是為了提升新能而把小文件整合在一起發(fā)布.
回答2：可以搜一下 精靈圖 雪碧圖 sprite圖之類的關(guān)鍵字
回答3：這是CSS雪碧圖效果. 原理: 將小圖標(biāo)和背景圖像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分. 目的: 減少加載網(wǎng)頁圖片時(shí)對服務(wù)器的請求次數(shù),提高頁面的加載速度. 問題: 首次加載時(shí), 內(nèi)存消耗比較大, 而且會把不需要用到的圖片或者圖標(biāo)也一起加載到內(nèi)存中.
手機(jī)端一般不用雪碧圖效果. 原因是手機(jī)內(nèi)存本來就不富裕, 手機(jī)端資源加載一般都是用到的時(shí)候在去加載到內(nèi)存中(lazy load), 而且使用雪碧圖會提高圖片維護(hù)成本, 在使用圖片時(shí)需要更多的css操作來顯示指定的圖片. 同時(shí)在iOS中, 使用雪碧圖也加大了不同的手機(jī)圖片適配難度.
標(biāo)簽：
JavaScript
上一條：javascript - 頁面如何獲取重定向的url?下一條：javascript - react-native在chrome調(diào)試工具中出現(xiàn)警告，并且不能使用react dev-tools
相關(guān)文章：
1. android - NavigationView 的側(cè)滑菜單中如何保存新增項(xiàng)（通過程序添加）2. 提示語法錯(cuò)誤語法錯(cuò)誤: unexpected ’abstract’ (T_ABSTRACT)3. javascript - 請問一下vue當(dāng)中是在什么時(shí)候請求數(shù)據(jù)保存全局變量的？4. tp5 不同控制器中的變量調(diào)用問題5. 這段代碼既不提示錯(cuò)誤也看不到結(jié)果，請老師明示錯(cuò)在哪里，謝謝！6. 老師 我是一個(gè)沒有學(xué)過php語言的準(zhǔn)畢業(yè)生 我希望您能幫我一下7. javascript - ios返回不執(zhí)行js怎么解決？8. python文檔怎么查看？9. php7.3.4中怎么開啟pdo驅(qū)動10. 除了 python2 和 python3，ipython notebook 還可以用哪些內(nèi)核？
排行榜
熱門標(biāo)簽
網(wǎng)公網(wǎng)安備