原文《Native lazy loading has arrived!》
翻譯：范小飯
原生懶加載已經(jīng)到來
對(duì)于那些尚未見過的人衅码，谷歌上周向Chrome版76引入了原生延遲加載济欢，現(xiàn)在你肯定在想谭羔，什么是本機(jī)延遲加載松邪，是否值得添加到我的網(wǎng)站？
好吧 - 這正是我希望通過我使用它的經(jīng)驗(yàn)，能回答你的問題旧找。
什么是原生懶加載
延遲加載通過在用戶需要時(shí)加載資源（如圖像）來提高性能，例如麦牺，當(dāng)有人登陸您的頁(yè)面時(shí)钮蛛，它會(huì)在進(jìn)入視口時(shí)加載任何圖像，而不是在頁(yè)面最初加載時(shí)加載所有圖像剖膳，這是有益的魏颓，因?yàn)橛脩舨粫?huì)總是看到頁(yè)面底部的圖像，那么為什么要讓我們的用戶下載所有那些不必要的圖像吱晒？
從前甸饱，如果我們需要實(shí)現(xiàn)懶加載，我們需要引入一個(gè)庫(kù)枕荞，或者寫一些Javascript來檢查元素相對(duì)于用戶視口的位置以及必要時(shí)延遲加載資源柜候。聽起來還有些工作，不是嗎躏精？
原生延遲加載是Google新推出的內(nèi)置解決方案渣刷，意思是不需要編寫額外的Javascript來實(shí)現(xiàn)延遲加載（并且極大地提高了網(wǎng)站的性能），本機(jī)延遲加載通過給圖像或iFrame添加屬性就能實(shí)現(xiàn)矗烛。
聽起來不錯(cuò)吧辅柴？但它實(shí)際上值得實(shí)施嗎？
我決定在BBC的一個(gè)內(nèi)部產(chǎn)品上實(shí)現(xiàn)原生延遲加載瞭吃，這個(gè)網(wǎng)站每天有大約3,000名活躍用戶碌嘀。網(wǎng)站上最常見的操作之一涉及運(yùn)行查詢，該查詢呈現(xiàn)最多100個(gè)圖像的列表歪架。我認(rèn)為這似乎是嘗試本機(jī)延遲加載的理想場(chǎng)所股冗。
所以，他值得嗎和蚪？是的止状，給圖片添加加載屬性，使它的加載時(shí)間減少了50%攒霹，意味著從1s到0.5s怯疤，以及最多可以向服務(wù)器保存40個(gè)請(qǐng)求，所有這些性能增強(qiáng)只是將一個(gè)屬性添加到一堆圖像中催束！
舉個(gè)例子
所以我們已經(jīng)看到了它能做什么集峦，讓我們來看看它是如何工作的。我將介紹如何為圖像實(shí)現(xiàn)本機(jī)延遲加載。
這很簡(jiǎn)單 - 附加load屬性塔淤，值為“l(fā)azy”會(huì)告訴瀏覽器延遲加載圖像摘昌。指定高度和寬度將防止在圖像加載時(shí)任何笨拙的頁(yè)面布局更改。
<img src="/images/example.png" loading="lazy" width="400" height="400" />
總結(jié)一下高蜂，使用本機(jī)延遲加載是為用戶提供真正漸進(jìn)式性能增強(qiáng)的最簡(jiǎn)單方法之一第焰。這不是一個(gè)完美的解決方案，但如果你還沒有使用延遲加載并擁有大量圖像/ iframe妨马，那么它絕對(duì)值得嘗試 - 特別是因?yàn)樗苋菀讓?shí)現(xiàn)！
不幸的是杀赢，原生懶加載不是一個(gè)銀子彈烘跺，因?yàn)樗且粋€(gè)新的瀏覽器功能，現(xiàn)在還缺少瀏覽器支持脂崔，因此滤淳，必須實(shí)現(xiàn)polyfill或后備Javascript解決方案以支持其他瀏覽器∑鲎螅可以關(guān)于這個(gè)更詳細(xì)的browsers that support native lazy loading on caniuse.com.
還值得注意的是脖咐，無法使用本機(jī)延遲加載來加載背景圖像，因此如果您使用了很多背景圖像汇歹，那么您可能需要考慮使用Javascript替代方法來延遲加載背景圖像屁擅。
有樂趣的懶加載！
