日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Content-Visibility再探究，完美替代Lazyload？

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

  1. content-visibility: auto 能否完全替代傳統(tǒng)的懶加載 LazyLoad？
  2. 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ǔ)上，插入一些圖片資源：


    
...

    // ... 包含了 N 個(gè) paragraph
    
...

相應(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è)特殊的字符串：


    

        
content-visibility: auto 對搜索功能影響的探究

    

    
...

    // ... 包含了 N 個(gè) paragraph
    
...

    

        
content-visibility: auto 對搜索功能影響的探究

相應(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é)一下

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

當(dāng)前文章：Content-Visibility再探究，完美替代Lazyload？
轉(zhuǎn)載來于：http://www.5511xx.com/article/dppdhig.html