提到提高頁面渲染速度，我們第一想到的是優(yōu)化 JavaScript。其實通過優(yōu)化 CSS 也能提高頁面渲染速度。
優(yōu)化方案
1. 延時渲染屏幕外的內(nèi)容 - content-visibility: auto
很長的頁面會有大量的內(nèi)容在屏幕外。如果只渲染屏幕內(nèi)的內(nèi)容，屏幕外的內(nèi)容在出現(xiàn)時才渲染，能大大的節(jié)約渲染時間。
CSS Containment Module Level 2 模塊 新增了 content-visibility 屬性。這個屬性能推遲選擇的HTML元素。
當有大量離屏內(nèi)容時，需要延時渲染屏幕外的內(nèi)容，只需在元素上使用 content-visibility: auto。
在屏幕外被延遲渲染的元素，未設置高度時，在瀏覽器中表現(xiàn)類似于 display: none。當發(fā)生滾動時，元素出現(xiàn)后才發(fā)生渲染行為，被渲染后高度也會相應更新，因此滾動條行為會以非預期方式進行。解決這個問題，可以設置元素未渲染時的高度: contain-intrinsic-size: 未渲染時的高度。代碼如下：
.target-elem {
content-visibility: auto;
contain-intrinsic-size: 200px;
}
注意：如果元素或其子元素顯式設置了高度，會被覆蓋 contain-intrinsic-size 的值。
局限性：
- 此功能仍處于試驗階段，截至目前，F(xiàn)irefox，IE，Safari 不支持。
2. 提升渲染的性能 - will-change
元素的樣式上設置 will-change 后，會開啟 GPU 加速，GPU 會優(yōu)化該元素的渲染。寫法:
.transition {
will-change: opacity;
}
局限性：
- 應作為“最后的手段”，避免過早優(yōu)化。
- 應在父元素上使用 will-change，在子元素上使用動畫。
- 有節(jié)制的使用，當元素變化之前和變化之后，通過腳本切換 will-change 的值，并在動畫完成后，將元素的 will-change 刪除。
3. 讓滾動更流暢 - scroll-behavior
設置 scroll-behavior 能讓滾動更流暢。 scroll-behavior 接受的值:
可接受屬性值：
- auto： 滾動框立即滾動
- smooth： 通過定義事件函數(shù)來實現(xiàn)平穩(wěn)滾動
效果對比:
