CSS怎么讓頁面渲染速度提升數倍

本篇內容介紹了“CSS怎么讓頁面渲染速度提升數倍”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

瀏覽器在接收到服務端返回的 HTML 之后，需要把這段數據渲染成用戶看到的頁面，在開始渲染第一個元素之前可能還需要經過很多步驟。這個過程會適用于整個頁面，包括當前不可見的內容。

所以在首屏渲染時，是有很大一部分時間花費在用戶不可見的內容上，實際上這部分數據我們沒必要在首屏就把它們渲染出來。

Chrome 85 新推出的 content-visibility: auto 就是為了解決上面的問題，它可以告訴瀏覽器暫時跳過該元素的布局和渲染工作，直到這個元素滾動到當前視口，從而可以加快整個頁面的初始渲染，并且縮短用戶和頁面可交互需要花費的時間。

CSS Containment

content-visibility 依賴于 CSS Containement，目前只能在 Chromium 85 中支持 content-visibility 屬性，但是大多數瀏覽器都支持 CSS Containement。

CSS Containment 是一種規范，它的主要目的就是在頁面渲染的過程中通過忽略文檔中的某些子樹來提高頁面的渲染性能。

上面我們提到，在首屏渲染時，是有很大一部分時間花費在用戶不可見的內容上，實際上這部分數據我們沒必要在首屏就把它們渲染出來。作為開發者，肯定很清楚當前修改的元素是否獨立或者影響其他元素。因此如果開發者能把這個信息通過 CSS 告訴瀏覽器，那么瀏覽器就不需要再去考慮其他元素了。CSS Containment 模塊中提供的 contain 屬性就為我們提供了這種能力。

css contain 一共有四個屬性：

• size: 在計算該元素盒子大小的時候會忽略其子元素

• layout: 元素的內部布局不受外部影響，同時該元素以及其內容也不會影響到上級

• style: 聲明同時會影響這個元素和其子孫元素的屬性，都在這個元素的包含范圍內

• paint: 聲明這個元素的子孫節點不會在它邊緣外顯示。如果一個元素在視窗外或因其他原因導致不可見，則同樣保證它的子孫節點不會被顯示。

content-visibility

css contain 是一個很棒的屬性，但是我們不太容易判斷要選取它的哪個值?，F在，我們可以直接應用 content-visibility 來達到這樣的效果，但是配置卻簡單的多。

content-visibility 屬性也有多個值，但是 auto 這個值是一個可以立刻提高性能的屬性：

.my-class {
  content-visibility: auto;
}

如果一個元素具有 auto 這個屬性，如果當前元素沒有出現在屏幕上，瀏覽器就不會渲染它和它的子元素；當元素接近用戶的可視區域時，瀏覽器就會解除限制，并開始進行渲染；這可以保證元素會及時被用戶看到。

contain-intrinsic-size

如果我們給可視區域外的元素增加了  content-visibility: auto 屬性，那么當滾動條滾動到這個元素之后，如果這個元素很大有一定高度，那么滾動條的長度就會發生變化，頁面可能就會發生抖動的現象。

解決這個問題，可以先使用 contains-intrinsic-size 提前給元素設置自然高度的大小，比如 1000px ，這樣元素提前占用了一些高度，就不會發生抖動現象。

“CSS怎么讓頁面渲染速度提升數倍”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！