CSS新特性contain，控制頁面的重繪與重排. ... contain: style; /* Turn on paint containment for an element. */ contain: paint; /* Turn on ...
菜單
網站主頁
前端設計
後端開發
.NET開發
軟體設計
企業開發
區塊鏈
移動端開發
軟體工程
資料庫
作業系統
其他
主頁 > 企業開發 > CSS新特性contain，控制頁面的重繪與重排
CSS新特性contain，控制頁面的重繪與重排
2021-05-0621:51:13企業開發
在介紹新的CSS屬性contain之前，讀者首先需要了解什么是頁面的重繪與重排，
之前已經描述過很多次了，還不太了解的可以先看看這個提高CSS影片性能的正確姿勢，
OK，下面進入本文正題，
contain為何？
contain屬性允許我們指定特定的DOM元素和它的子元素，讓它們能夠獨立于整個DOM樹結構之外，目的是能夠讓瀏覽器有能力只對部分元素進行重繪、重排，而不必每次都針對整個頁面，
Thecontainpropertyallowsanauthortoindicatethatanelementanditscontentsare,asmuchaspossible,independentoftherestofthedocumenttree.Thisallowsthebrowsertorecalculatelayout,style,paint,size,oranycombinationofthemforalimitedareaoftheDOMandnottheentirepage.
contain語法
看看它的語法：
{
/*Nolayoutcontainment.*/
contain:none;
/*Turnonsizecontainmentforanelement.*/
contain:size;
/*Turnonlayoutcontainmentforanelement.*/
contain:layout;
/*Turnonstylecontainmentforanelement.*/
contain:style;
/*Turnonpaintcontainmentforanelement.*/
contain:paint;
/*Turnoncontainmentforlayout,paint,andsize.*/
contain:strict;
/*Turnoncontainmentforlayout,andpaint.*/
contain:content;
}
除去none，取值還有6個，我們一個一個來看看，
contain:size
contain:size:設定了contain:size的元素的渲染不會受到其子元素內容的影響，
Thevalueturnsonsizecontainmentfortheelement.Thisensuresthatthecontainingboxcanbelaidoutwithoutneedingtoexamineitsdescendants.
我開始看到這個定義也是一頭霧水，光看定義很難明白到底是什么意思，還需實踐一番：
假設我們有如下簡單結構：
.container{
width:300px;
padding:10px;
border:1pxsolidred;
}
p{
border:1pxsolid#333;
margin:5px;
font-size:14px;
}
并且，借助jQuery實作每次點擊容器添加一個
Coco
結構：
$('.container').on('click',e=>{
$('.container').append('
Coco
')
})
那么會得到如下結果：
可以看到，容器.container的高度是會隨著元素的增加而增加的，這是正常的現象，
此刻，我們給容器.container添加一個contain:size，也就會出現上述說的：設定了contain:size的元素的渲染不會受到其子元素內容的影響，
.container{
width:300px;
padding:10px;
border:1pxsolidred;
+contain:size
}
再看看會發生什么：
正常而言，父元素的高度會因為子元素的增多而被撐高，而現在，子元素的變化不再影響父元素的樣式布局，這就是contain:size的作用，
contain:style
接下來再說說contain:style、contain:layout、contain:paint，先看看contain:style，
截止至本文書寫的程序中，contain:style暫時被移除了，
CSSContainmentModuleLevel1:Droptheat-risk“stylecontainment”featurefromthisspecification,moveitLevel2，
嗯，官方說辭是因為存在某些風險，暫時被移除，可能在規范的第二版會重新定義吧，那這個屬性也暫且放一放，
contain:paint
contain:paint：設定了contain:paint的元素即是設定了布局限制，也就是說告知UserAgent，此元素的子元素不會在此元素的邊界之外被展示，因此，如果元素不在螢屏上或以其他方式設定為不可見，則還可以保證其后代不可見不被渲染，
Thisvalueturnsonpaintcontainmentfortheelement.Thisensuresthatthedescendantsofthecontainingboxdon’tdisplayoutsideitsbounds,soifanelementisoff-screenorotherwisenotvisible,itsdescendantsarealsoguaranteedtobenotvisible.
這個稍微好理解一點，先來看第一個特性：
設定了contain:paint的元素的子元素不會在此元素的邊界之外被展示
設定了contain:paint的元素的子元素不會在此元素的邊界之外被展示
這個特點有點類似與overflow:hidden，也就是明確告知用戶代理，子元素的內容不會超出元素的邊界，所以超出部分無需渲染，
簡單示例，假設元素結構如下：
.container{
contain:paint;
border:1pxsolidred;
}
p{
left:-100px;
}
我們來看看，設定了contain:paint與沒設定時會發生什么：
CodePenDemo--contain:paintDemo
設定了contain:paint的元素在螢屏之外時不會渲染繪制
通過使用contain:paint，如果元素處于螢屏外，那么用戶代理就會忽略渲染這些元素，從而能更快的渲染其它內容，
contain:layout
contain:layout：設定了contain:layout的元素即是設定了布局限制，也就是說告知UserAgent，此元素內部的樣式變化不會引起元素外部的樣式變化，反之亦然，
Thisvalueturnsonlayoutcontainmentfortheelement.Thisensuresthatthecontainingboxistotallyopaqueforlayoutpurposes;nothingoutsidecanaffectitsinternallayout,andviceversa.
啟用contain:layout可以潛在地將每一幀需要渲染的元素數量減少到少數，而不是重新渲染整個檔案，從而為瀏覽器節省了大量不必要的作業，并顯著提高了性能，
使用contain：layout，開發人員可以指定對該元素任何后代的任何更改都不會影響任何外部元素的布局，反之亦然，
因此，瀏覽器僅計算內部元素的位置（如果對其進行了修改），而其余DOM保持不變，因此，這意味著幀渲染管道中的布局程序將加快，
存在的問題
描述很美好，但是在實際Demo測驗的程序中（截止至2021/04/27，Chrome90.0.4430.85），僅僅單獨使用contain：layout并沒有驗證得到上述那么美好的結果，
設定了contain:layout的指定元素，改元素的任何后代的任何更改還是會影響任何外部元素的布局，點擊紅框會增加一條
Coco
元素插入到container中：
簡單的代碼如下：
html,
body{
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
gap:10px;
}
.container{
width:150px;
padding:10px;
contain:layout;
border:1pxsolidred;
}
.g-test{
width:150px;
height:150px;
border:1pxsolidgreen;
}
CodePenDemo--contain:layoutDemo
目前看來，contain:layout的實際作用不那么明顯，更多的關于它的用法，你可以再看看這篇文章：CSS-tricks-contain
contain:strict|contain:content
這兩個屬性稍微有點特殊，效果是上述介紹的幾個屬性的聚合效果：
contain:strict：同時開啟layout、style、paint以及size的功能，它相當于contain:sizelayoutpaint
contain:content：同時開啟layout、style以及paint的功能，它相當于contain:layoutpaint
所以，這里也提一下，contain屬性是可以同時定義幾個的，
CaniUse--CSSContain
截止至2021-04-27，CaniUse上的CSSContain兼容性，已經可以開始使用起來：
參考文獻
CSSContainmentModuleLevel1
CSScontainment
CSSContainmentinChrome52
最后
好了，本文到此結束，希望對你有幫助??
更多精彩CSS技術文章匯總在我的Github--iCSS，持續更新，歡迎點個star訂閱收藏，
如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/283127.html
標籤：其他
上一篇：【jQuery】精細學習記錄下一篇：
