課程
/前端開發(fā)
/前端工具
/webpack深入與實(shí)戰(zhàn)
如題.....
2017-10-13
源自:webpack深入與實(shí)戰(zhàn) 4-7
正在回答
是的,減少了http請(qǐng)求,一個(gè)http請(qǐng)求就是一個(gè)網(wǎng)絡(luò)開銷
第一呢,你可以理解為行內(nèi)CSS,就是本來可以是一個(gè)外部文件,然后瀏覽器開一個(gè)請(qǐng)求去請(qǐng)求圖片,然后緩存到本地并且展示。
然后你,你把這段CSS寫在行間了,那么就會(huì)隨時(shí)你的HTML文檔這個(gè)一起加載進(jìn)來~
優(yōu)勢(shì)、1:隨HTML加載進(jìn)行加載,對(duì)比單獨(dú)起一個(gè)請(qǐng)求去加載,可能出現(xiàn)失敗的場(chǎng)景,則要失敗則整體一起加載失敗
缺點(diǎn)、瀏覽器對(duì)請(qǐng)求靜態(tài)資源做了大量的優(yōu)化緩存,目的就是為了讓用戶更好更快的打開過已打開過的網(wǎng)站,并且也緩解了服務(wù)器壓力,可以說是一舉兩得,但是在一些較大的靜態(tài)文件的時(shí)候,可能會(huì)出現(xiàn)加載失敗,相信大家都遇見過,文檔加載出來了,但是界面錯(cuò)亂,那就是部分樣式?jīng)]加載進(jìn)來導(dǎo)致的。那么圖片也是一樣的道理。最主要的是你多個(gè)HTML引用,則加大了每個(gè)HTML的大小,如果是瀏覽器請(qǐng)求的話,會(huì)先去檢測(cè)域下的緩存,然后直接從緩存讀取。
總結(jié):所以一般來說,使用小ICON等情況可能會(huì)使用base64去整理圖片以外,其他建議都使用引用加載。
減少了HTTP請(qǐng)求
舉報(bào)
webpack實(shí)戰(zhàn)教程,用真實(shí)項(xiàng)目帶你探索 webpack 強(qiáng)大的功能
1 回答url-loader為什么沒有生成base64的圖片
1 回答圖片壓縮不明顯的原因是什么?
1 回答為什么我的圖片一點(diǎn)都沒壓縮
2 回答老師用的編輯器是什么
4 回答webpack打包圖片
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2017-12-30
是的,減少了http請(qǐng)求,一個(gè)http請(qǐng)求就是一個(gè)網(wǎng)絡(luò)開銷
2018-08-21
第一呢,你可以理解為行內(nèi)CSS,就是本來可以是一個(gè)外部文件,然后瀏覽器開一個(gè)請(qǐng)求去請(qǐng)求圖片,然后緩存到本地并且展示。
然后你,你把這段CSS寫在行間了,那么就會(huì)隨時(shí)你的HTML文檔這個(gè)一起加載進(jìn)來~
優(yōu)勢(shì)、1:隨HTML加載進(jìn)行加載,對(duì)比單獨(dú)起一個(gè)請(qǐng)求去加載,可能出現(xiàn)失敗的場(chǎng)景,則要失敗則整體一起加載失敗
缺點(diǎn)、瀏覽器對(duì)請(qǐng)求靜態(tài)資源做了大量的優(yōu)化緩存,目的就是為了讓用戶更好更快的打開過已打開過的網(wǎng)站,并且也緩解了服務(wù)器壓力,可以說是一舉兩得,但是在一些較大的靜態(tài)文件的時(shí)候,可能會(huì)出現(xiàn)加載失敗,相信大家都遇見過,文檔加載出來了,但是界面錯(cuò)亂,那就是部分樣式?jīng)]加載進(jìn)來導(dǎo)致的。那么圖片也是一樣的道理。最主要的是你多個(gè)HTML引用,則加大了每個(gè)HTML的大小,如果是瀏覽器請(qǐng)求的話,會(huì)先去檢測(cè)域下的緩存,然后直接從緩存讀取。
總結(jié):所以一般來說,使用小ICON等情況可能會(huì)使用base64去整理圖片以外,其他建議都使用引用加載。
2017-10-14
減少了HTTP請(qǐng)求