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

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

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

這是一個比較新且有強大功能的屬性。

content-visibility: auto VS LazyLoad

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

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

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

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

這里我嘗試做了一個簡單的 DEMO：

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

<div class="g-wrap">
    <div class="paragraph">...</div>
    // ... 包含了 N 個 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>

相應設置下 CSS：

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

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

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

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

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

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

可訪問性功能探究

當然，content-visibility: auto 的特性又引申出了另外一個有意思的點。

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

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

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

相應設置下 CSS：

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

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

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

這里，我們可以得到另外一個非常重要的點：

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

這也是 content-visibility 設計上充分的考慮，對可訪問性功能，或者說用戶體驗的考量，有了這一點，對于它的實際使用有著非常大的幫助。

content-visibility 的一些其他問題

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

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

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

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

總結(jié)一下

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