Content-Visibility 再探究，完美替代 Lazyload？

作者：SbCo 2022-06-10 07:33:26

如果 content-visibility: auto 要能夠替代 LazyLoad，則需要做到，初始化渲染的時(shí)候，在頁面當(dāng)前展示范圍外的，設(shè)定了 content-visibility: auto 的元素內(nèi)的一些靜態(tài)資源不會(huì)被加載。

在上一篇文章 ??使用 content-visibility 優(yōu)化渲染性能?? 發(fā)布后，收到了非常多同學(xué)的反饋與討論，有幾個(gè)點(diǎn)沒有講的特別明白，本文將繼續(xù)探討探討 content-visibility 中兩個(gè)非常有意思的點(diǎn)：

content-visibility: auto 能否完全替代傳統(tǒng)的懶加載 LazyLoad？
content-visibility: auto 是否會(huì)影響用戶的搜索？

閱讀本文之前，如果你還沒看過上一篇，強(qiáng)烈建議先看看，否則可能有有一些懵：??使用 content-visibility 優(yōu)化渲染性能??。

這是一個(gè)比較新且有強(qiáng)大功能的屬性。

content-visibility: auto VS LazyLoad

那么，content-visibility: auto 是否可以替代 LazyLoad（懶加載）呢？

我們來看看我們通常對于 LazyLoad（懶加載）的一個(gè)定義。

LazyLoad：通常而言，LazyLoad 的作用在于，當(dāng)頁面未滾動(dòng)到相應(yīng)區(qū)域，該區(qū)域內(nèi)的資源（網(wǎng)絡(luò)請求）不會(huì)被加載。反之，當(dāng)頁面滾動(dòng)到相應(yīng)區(qū)域，相關(guān)資源的請求才會(huì)被發(fā)起。

那么，如果 content-visibility: auto? 要能夠替代 LazyLoad，則需要做到，初始化渲染的時(shí)候，在頁面當(dāng)前展示范圍外的，設(shè)定了 content-visibility: auto 的元素內(nèi)的一些靜態(tài)資源不會(huì)被加載。

這里我嘗試做了一個(gè)簡單的 DEMO：

還是借助上述的代碼，假設(shè)我們有如下的 HTML 結(jié)構(gòu)，也就是在上述代碼基礎(chǔ)上，插入一些圖片資源：

<div class="g-wrap">
    <div class="paragraph">...</div>
    // ... 包含了 N 個(gè) paragraph
    <div class="paragraph">...</div>
    <div class="g-img">
      <img src="https://www.womenly.net/wp-content/uploads/2017/03/Tips-to-Maintain-the-Soft-Skin.jpg">
    </div>
    <div class="g-img">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTD8kEsEE3hJ64aU-_TKQJtvKDtTOGQfT3A4A&usqp=CAU">
    </div>
    <div class="g-img">
      <img src="https://i.pinimg.com/originals/e8/ba/25/e8ba252917952f23dfc9715e942e654e.jpg">
    </div>
</div>

相應(yīng)設(shè)置下 CSS：

.paragraph,
.g-img {
    content-visibility: auto;
}

當(dāng)刷新頁面的時(shí)候，觀察網(wǎng)絡(luò)請求（Network）的狀況：

即便當(dāng)前頁面可視區(qū)域外的內(nèi)容未被渲染，但是圖片依然會(huì)被加載！

因此，這也得到了一個(gè)非常重要的結(jié)論：

content-visibility: auto? 無法直接替代 LazyLoad，設(shè)置了 ?content-visibility: auto 的元素在可視區(qū)外只是未被渲染，但是其中的靜態(tài)資源仍舊會(huì)在頁面初始化的時(shí)候被全部加載。

所以，在實(shí)際使用中，如果你的業(yè)務(wù)中已經(jīng)使用了比較完善的 Lazyload 處理長列表或者一些圖片資源，那么 content-visibility: auto 不是更好的選擇。

可訪問性功能探究

當(dāng)然，content-visibility: auto 的特性又引申出了另外一個(gè)有意思的點(diǎn)。

如果說可視區(qū)外的內(nèi)容未被渲染，那是否會(huì)影響用戶進(jìn)行全文檢索呢？畢竟這是一個(gè)非常重要的功能。

我們再來做個(gè)探究，還是上面的 DEMO，我們在首尾添加兩個(gè)特殊的字符串：

<div class="g-wrap">
    <div class="text">
        <p>content-visibility: auto 對搜索功能影響的探究</p>
    </div>
    <div class="paragraph">...</div>
    // ... 包含了 N 個(gè) paragraph
    <div class="paragraph">...</div>
    <div class="text">
        <p>content-visibility: auto 對搜索功能影響的探究</p>
    </div>
</div>

相應(yīng)設(shè)置下 CSS：

.paragraph,
.text {
    content-visibility: auto;
}

好，如此一來，在頁面刷新后，第二個(gè) .text? 是處于未被渲染狀態(tài)，我們試著全局 ctrl + F 查找一下，看看能找到幾個(gè)：

很有意思的現(xiàn)象，全局查找的時(shí)候，可以找到當(dāng)前未被渲染的元素內(nèi)的內(nèi)容。

這里，我們可以得到另外一個(gè)非常重要的點(diǎn)：

即便存在設(shè)置了 ?content-visibility: auto 的未被渲染的元素，但是它并不會(huì)影響全局的搜索功能。

這也是 content-visibility 設(shè)計(jì)上充分的考慮，對可訪問性功能，或者說用戶體驗(yàn)的考量，有了這一點(diǎn)，對于它的實(shí)際使用有著非常大的幫助。

content-visibility 的一些其他問題

首先，看看 content-visibility 的兼容性（2022-06-03）：

目前還是比較慘淡的，并且我沒有實(shí)際在業(yè)務(wù)中使用它，需要再等待一段時(shí)間。當(dāng)然，由于該屬性屬于漸進(jìn)增強(qiáng)一類的功能，即便失效，也完全不影響頁面本身的展示。

同時(shí)，也有一些同學(xué)表示，利用 content-visibility: auto 只能解決部分場景，在海量 DOM 的場景下的實(shí)際效果，還有待進(jìn)一步的實(shí)測。真正運(yùn)用的時(shí)候，多做對比，在做取舍。

當(dāng)然，現(xiàn)代瀏覽器已經(jīng)越來越智能，類似 content-visibility 功能的屬性也越來越多，我們在性能優(yōu)化的路上有了更多選擇，總歸是一件好事。

總結(jié)一下

在一些需要被頻繁切換顯示、隱藏狀態(tài)的元素上，使用content-visibility: hidden，用戶代理無需重頭開始渲染它和它的子元素，能有效的提升切換時(shí)的渲染性能；
content-visibility: auto 的作用更加類似于虛擬列表，使用它能極大的提升長列表、長文本頁面的渲染性能；
合理使用contain-intrinsic-size? 預(yù)估設(shè)置了content-visibility: auto 元素的高寬，可以有效的避免滾動(dòng)條在滾動(dòng)過程中的抖動(dòng)；
content-visibility: auto? 無法直接替代 LazyLoad，設(shè)置了content-visibility: auto 的元素在可視區(qū)外只是未被渲染，但是其中的靜態(tài)資源仍舊會(huì)在頁面初始化的時(shí)候被全部加載；
即便存在設(shè)置了content-visibility: auto 的未被渲染的元素，但是它并不會(huì)影響全局的搜索功能。

責(zé)任編輯：姜華來源： iCSS前端趣聞

CSS 前端 LazyLoad