浠嬬粛鍦ㄥ紑濮嬩粙缁嶄粖澶╃殑涓昏CSSContainment涔嬪墠锛屾垜浠渶瑕佷簡瑙ｄ竴浜涘墠缃煡璇唕eflow鍜岄噸缁橈紝鏂逛究鎴戜滑鐨勭悊瑙ｅ拰搴旂敤鍦烘櫙銆傜畝鍗曞洖蹇嗕竴涓嬪洖娴佸拰閲嶇粯鍥炴祦锛圧eflow锛夛細鍥炴祦鍙戠敓鍦ㄦ祻瑙堝櫒蹇呴』瀵归〉闈㈢殑閮ㄥ垎鎴栧叏閮ㄩ噸鏂板鐞嗗拰閲嶇粯鏃讹紝渚嬪灏哄銆佸竷灞€銆侀殣钘忕瓑鍙戠敓鍙樺寲闇€瑕侀噸寤虹殑鍏冪礌銆傞噸缁橈細褰撳厓绱犵殑鏌愪簺灞炴€у彂鐢熸洿鏀硅€屼笉褰卞搷甯冨眬鏃讹紝灏变細鍙戠敓閲嶇粯銆傛瘮濡傛敼鍙樹竴涓厓绱犵殑鑳屾櫙棰滆壊锛屽瓧浣撻鑹茬瓑銆傚洖娴佷細瀵艰嚧浠€涔堬紵閲嶆帓鍦ㄦ€ц兘鏂归潰闈炲父鏄傝吹锛屾槸瀵艰嚧DOM鑴氭湰缂撴參鐨勪富瑕佸師鍥犱箣涓€锛屽湪寰堝鎯呭喌涓嬶紝瀹冧滑鐩稿綋浜庨噸鏂板竷灞€鏁翠釜椤甸潰銆傞€氳繃缈昏瘧鎴戜滑鍙互鐭ラ亾锛屽洖娴佸湪鎬ц兘鏂归潰鏄潪甯告槀璐电殑锛屼篃鏄緢澶欴OM鍔犺浇缂撴參鐨勫師鍥犱箣涓€銆傚湪璁稿鎯呭喌涓嬶紝瀹冧滑鐩稿綋浜庨噸鏂版覆鏌撴暣涓〉闈€傛帴涓嬫潵锛岃鎴戜滑鐪嬬湅鍝簺琛屼负浼氳Е鍙戝洖娴?閲嶇粯銆傝Е鍙戝洖娴?閲嶇粯褰撴坊鍔犮€佸垹闄ゅ拰鏇存柊DOM鑺傜偣鏃跺彂鐢熷洖娴佸綋鍏冪礌鐨勫睘鎬ц缃负display:none鏃跺彂鐢熷洖娴佸綋鍏冪礌鐨勫睘鎬ц缃负visibility:hidden鏃跺彂鐢熷洖娴丏OM鑺傜偣涓婄殑鍔ㄧ敾灞炴€т篃浼歵riggerreflowAdjustmentwindowfont-style鐨勫ぇ灏忎細瑙﹀彂reflow锛屾敼鍙榝ont-style浼氭敼鍙樺厓绱犵殑鍑犱綍褰㈢姸銆傝繖鎰忓懗鐫€瀹冨彲鑳戒細褰卞搷椤甸潰涓婂叾浠栧厓绱犵殑浣嶇疆鎴栧ぇ灏忋€傝Е鍙戝洖娴佹坊鍔犳垨鍒犻櫎鏍峰紡鏂囦欢浼氬鑷村洖娴?閲嶇粯閫氳繃JavaScript绛夎幏鍙栧厓绱犵殑澶у皬锛岀敱浜庨渶瑕佷繚璇佽幏鍙栫殑鍊兼槸鏈€鏂扮殑锛屾祻瑙堝櫒浼氬厛杩涜涓€娆″洖娴侊紝浠ヤ繚璇佹纭殑鍊笺€傛瘮濡俹ffsetXXX_銆乢clientXXX銆乻crollXXX绛夐噸缁樺洖娴佷紭鍖栨柟妗堢煡閬撲簡瑙﹀彂鍥炴祦/閲嶇粯鐨勫師鍥狅紝鐒跺悗鍙互鏍规嵁杩欎簺鍘熷洜鍒跺畾鐩稿簲鐨勪紭鍖栨柟妗堬紝濡備笅銆傞伩鍏嶄娇鐢ㄨЕ鍙戝洖娴佺殑CSS灞炴€с€傚敖閲忓噺灏慗S鎿嶄綔淇敼DOM鐨凜SS鎿嶄綔銆傚鏋滄妸棰戠箒閲嶇粯鍜屽洖娴佺殑DOM鍏冪礌鐪嬫垚涓€涓嫭绔嬬殑灞傦紝閭ｄ箞杩欎釜DOM鍏冪礌鐨勯噸缁樺拰鍥炴祦鏁堟灉鍙細鍦ㄨ繖涓€灞傘€傜粡杩囦紭鍖栵紝鍥炴祦鍜岄噸缁樼殑娆℃暟鍑忓皯浜嗭紝浣嗘槸鐢变簬鍚勭鍘熷洜闅惧厤杩樻槸浼氬嚭鐜板洖娴佸拰閲嶇粯銆傝瘯鎯充竴涓嬶紝鏈変竴涓洿澶嶆潅鐨勯〉闈€傚綋鐢ㄦ埛灏嗛紶鏍囩Щ鍒版煇涓厓绱犱笂鏃讹紝浼氳Е鍙戣鍏冪礌鐨勬偓鍋溿€傝繖涓偓鍋滅殑浣滅敤鏄敼鍙樺厓绱犵殑瀹介珮锛坵idth,height锛夈€傚綋鍏冪礌鐨勫楂樺彂鐢熷彉鍖栨椂锛屾祻瑙堝櫒闇€瑕佽€冭檻鎵€鏈夌殑鍏冪礌锛屾槸鍚︽湁鐩稿簲鐨勫彉鍖栵紝鎵€浠ユ祻瑙堝櫒闇€瑕侀噸鏂板竷灞€鏁翠釜椤甸潰锛屼絾瀹為檯涓婂彧鏄竴灏忛儴鍒嗛〉闈㈠彲鑳戒細鍙戠敓鍙樺寲锛屼絾椤甸潰鐨勫ぇ閮ㄥ垎鍐呭淇濇寔涓嶅彉銆傝繖瀵逛簬鎬ц兘鏉ヨ鏃犵枒鏄緢宸殑銆傞偅涔堟湁娌℃湁鍔炴硶璁╂祻瑙堝櫒杩涜灞€閮ㄥ洖娴侀噸缁樻潵杈惧埌浼樺寲鎬ц兘鐨勭洰鐨勫憿锛熶篃灏辨槸璇达紝鍑忓皯reflow鏃剁殑鎬ц兘娑堣€椼€傜瓟妗堟槸鑲畾鐨勶紝涔熷氨鏄粖澶╂垜浠浜嗚В鐨凜SSContainmentCSSContainmentCSSContainment涓昏鏄€氳繃璁╁紑鍙戣€呬粠椤甸潰涓垎绂诲嚭鏌愪簺瀛愭爲鏉ユ彁楂橀〉闈㈢殑鎬ц兘銆傚鏋滄祻瑙堝櫒鐭ラ亾椤甸潰鐨勫悇涓儴鍒嗘槸鍒嗗紑鐨勶紝瀹冨氨鍙互浼樺寲娓叉煋骞惰幏寰楁€ц兘銆傜敱浜庝氦浜掕緝澶氭垨鎯呭喌澶嶆潅锛岄渶瑕佽Е鍙憆eflow閲嶆柊娓叉煋鏁翠釜椤甸潰銆備负浜嗘敼鍠勮繖涓€鐐癸紝娴忚鍣ㄥ繀椤昏瘑鍒摢浜涢儴鍒嗘槸鐙珛鐨勩€傚綋瀹冧滑鐨勫瓙鍏冪礌鍙戠敓鍙樺寲鏃讹紝娴忚鍣ㄧ殑娓叉煋寮曟搸鍙互璇嗗埆鍑烘潵锛屽彧鍥炴祦鍜岄噸缁橀儴鍒嗗厓绱狅紝鑰屼笉鏄暣涓〉闈€傛爣璇嗘鏍囧噯鐨勫睘鎬ф槸contain銆俢ontain閫氳繃contain灞炴€у憡璇夋祻瑙堝櫒杩欎簺鑺傜偣鏄嫭绔嬬殑銆傝娉昫iv{鍖呭惈锛氭棤锛?*琛ㄧず璇ュ厓绱犲皢鍦ㄦ病鏈夊寘鍚鍒欑殑鎯呭喌涓嬫甯告覆鏌?/contain:layout;/*琛ㄧず鍏冪礌澶栭儴涓嶈兘褰卞搷鍏冪礌鍐呴儴鐨勫竷灞€锛屽弽涔嬩害鐒?/contain:paint;/*鎸囩ず姝ゅ厓绱犵殑鍚庝唬涓嶄細鏄剧ず鍦ㄥ叾杈圭紭涔嬪銆傚鏋滀竴涓厓绱犲湪瑙嗗浘涔嬪鎴栦互鍏朵粬鏂瑰紡涓嶅彲瑙侊紝瀹冪殑鍚庝唬涔熶繚璇佷笉浼氭樉绀恒€?/鍖呭惈锛氬ぇ灏忥紱/*琛ㄧず杩欎釜鍏冪礌鐨勫ぇ灏忚绠椾笉渚濊禆浜庡畠鐨勫悗浠ｅ厓绱犵殑澶у皬*/contain:content;/*鐩稿綋浜巆ontain:layoutpaint*/contain:strict;/*鐩稿綋浜巆ontain:sizelayoutpaint*/}LayoutThis鍊肩殑绀轰緥鎵撳紑鍏冪礌鐨勫竷灞€鍖呭惈銆傝繖纭繚浜嗘敹瀹圭鍑轰簬甯冨眬鐩殑鏄畬鍏ㄤ笉閫忔槑鐨勶紱澶栭儴鐨勪换浣曚笢瑗块兘涓嶈兘褰卞搷瀹冪殑鍐呴儴甯冨眬锛屽弽涔嬩害鐒躲€傝缃甽ayout灞炴€у悗锛屽氨鏄憡璇夋祻瑙堝櫒褰撳墠鍏冪礌鍐呴儴鐨勬牱寮忔敼鍙樹笉浼氬紩璧峰厓绱犲閮ㄧ殑鏍峰紡鏀瑰彉銆傛澶栵紝鍏冪礌澶栭儴鐨勬牱寮忔洿鏀逛笉浼氬鑷村厓绱犲唴閮ㄧ殑鏍峰紡鏇存敼銆傝繖鏍凤紝娴忚鍣ㄥ氨鍙互鐩稿簲鍦板噺灏戞覆鏌撳厓绱狅紝鎻愰珮娓叉煋鎬ц兘銆傚鏋滆缃簡layout灞炴€х殑鍏冪礌锛屽垯琚伄鎸★紝姣斿off-screen銆傞偅涔堟祻瑙堝櫒灏变細鎶婅繖涓厓绱犵浉鍏崇殑澶勭悊鏀惧湪杈冧綆鐨勪紭鍏堢骇銆?containerli{padding:10px;楂樺害锛?00px锛沜ontain:layout;}鍊煎緱娉ㄦ剰鐨勬槸锛岀敱浜庡厓绱犲唴閮ㄧ殑鏍峰紡鍙樺寲锛屽綋鍏冪礌鏈韩鏈塻ize绛夊彲浠ヨЕ鍙憆eflow鐨勫睘鎬ф椂锛宭ayout灞炴€у皢涓嶄細鐢熸晥銆侾aintThis鍊兼墦寮€鍏冪礌鐨勭粯鍒跺寘鍚€傝繖纭繚浜嗗寘鍚鐨勫悗浠ｄ笉浼氭樉绀哄湪鍏惰竟鐣屼箣澶栵紝鍥犳濡傛灉涓€涓厓绱犲湪灞忓箷澶栨垨涓嶅彲瑙侊紝瀹冪殑鍚庝唬涔熶繚璇佷笉鍙銆傝缃簡paint灞炴€э紝琛ㄧず璇ュ厓绱犵殑鍚庝唬鑺傜偣涓嶄細鏄剧ず鍦ㄥ叾杈圭紭涔嬪銆傚鏋滀竴涓厓绱犲湪瑙嗗浘涔嬪鎴栦笉鍙锛屽畠鐨勫悗浠ｄ篃涓嶄細鏄剧ず銆?containerli{padding:10px;楂樺害锛?00px锛沜ontain:paint;}瀵逛簬瀛愬厓绱狅紝濡傛灉閮ㄥ垎鍐呭瓒呭嚭浜嗚竟妗嗭紝閭ｄ箞杩欓儴鍒嗗唴瀹瑰皢涓嶄細琚覆鏌撱€備粠鏁堟灉涓婄湅锛岃繖鏈夌偣绫讳技浜巓verflow:hidden锛屼笉鍚岀殑鏄痮verflow:hidden锛屾槸閫氳繃鍓帀澶氫綑鐨勯儴鍒嗐€傛瘮濡傛湁婊氬姩鏉＄殑鍏冪礌锛屼細鍥犱负婊氬姩鑰岃Е鍙戝娆℃覆鏌撱€傝繖浜涙覆鏌撳嚭鏉ョ殑鍏冪礌鍖呭惈浜嗗綋鍓嶅彲瑙嗗尯鍩熶箣澶栫殑鍏冪礌锛岄€犳垚浜嗘€ц兘涓婄殑娴垂銆備娇鐢╬aint鍙互蹇界暐鍙鍖哄煙涔嬪鐨勮繖浜涘厓绱犵殑娓叉煋锛屼粠鑰屼紭鍖栨覆鏌撴€ц兘銆係ize璇ュ€兼墦寮€鍏冪礌鐨勫昂瀵搁檺鍒躲€傝繖纭繚浜嗘敹瀹圭鐨勫竷灞€鏃犻渶妫€鏌ュ叾鍚庝唬銆傝缃簡size灞炴€х殑鍏冪礌鎰忓懗鐫€璇ュ厓绱犵殑澶у皬璁＄畻涓嶄緷璧栦簬鍏跺悗浠ｇ殑澶у皬銆傚浜庢祻瑙堝櫒鏉ヨ锛岃缃畇ize灏辨槸鍛婅瘔娴忚鍣ㄨ繖涓厓绱犵殑澶у皬宸茬粡鍥哄畾浜嗭紝灏辫繖涔堝ぇ浜嗭紝涓嶉渶瑕侀噸鏂版帓鍒楀瓙鍏冪礌鏉ヨ幏鍙栧綋鍓嶅厓绱犵殑澶у皬銆傚浜庤缃簡size灞炴€х殑鍏冪礌锛屾棤璁哄瓙鍏冪礌濡備綍甯冨眬鎴栬缃牱寮忥紝閮戒笉浼氬奖鍝嶇埗鍏冪礌銆?containerli{padding:10px;楂樺害锛?00px锛沜ontain:size;}浣跨敤杩欎釜size灞炴€т細鏀瑰彉娓叉煋鏍硅妭鐐癸紝浠庤€岃揪鍒颁紭鍖栫殑鐩殑锛岃€屽悗鑰呮槸鍩轰簬褰撳墠鍖呭惈鐨勫鍣ㄥ厓绱犮€傚湪鏃ュ父浣跨敤涓紝鎴戜滑鍙互浣跨敤涓€浜涘鍣ㄥ厓绱犳潵閬垮厤鍥犱负瀹瑰櫒鍐呴儴鐨勫竷灞€鍙戠敓鍙樺寲鑰屽鑷存暣涓〉闈㈤噸鎺掋€傚唴瀹?&涓ユ牸鍖呭惈锛氬唴瀹癸紱//琛ㄧず姝ゅ厓绱犲叿鏈夐櫎澶у皬鍜屾牱寮忎箣澶栫殑鎵€鏈夊寘鍚鍒欍€傜浉褰撲簬鍖呭惈锛氬竷灞€缁樺埗銆傚寘鍚細涓ユ牸锛?/琛ㄧず闄ゆ牱寮忓鐨勬墍鏈夊寘鍚鍒欓兘閫傜敤浜庤鍏冪礌銆傜浉褰撲簬鍖呭惈锛歴izelayoutpaint銆侺ayout涓嶇煡閬撳ぇ瀹舵湁娌℃湁娉ㄦ剰鍒帮紝璁剧疆涓篶ontain鐨勫厓绱犲彧鏈夋寚瀹氫簡瀹介珮鎵嶄細鐢熸晥锛屽惁鍒欏氨鍜屾櫘閫氬厓绱犱竴鏍蜂簡銆傜湡鐨勬病鏈夊叾浠栧彉鍖栧悧锛熷叾瀹炲苟涓嶆槸銆傚彧瑕佽缃簡contain鍏冪礌锛屽氨绫讳技浜庝娇鐢╬osition:relative甯冨眬銆備笉鍚岀殑鏄紝z-index銆乼op銆乴eft绛夋敼鍙樹綅缃殑灞炴€у鑷繁鏃犳晥銆傚浜巆ontain:layout鐨勮缃紝鎴戜滑閫氳繃瑙傚療鍙互鐪嬪嚭锛屽湪澶栬涓婁笌position:relative骞舵棤鍖哄埆銆傚畠浠兘鍦ㄦ甯告枃妗ｆ祦涓崰鎹竴涓綅缃紝瀛愬厓绱犳紓娴湪姝ｅ父鏂囨。娴佷箣涓娿€備絾鏄紝瀵逛簬璁剧疆浜哻ontain:size鐨勫厓绱狅紝閫氳繃瑙傚療鍙互鐪嬪嚭锛屽畠鍦ㄦ甯哥殑鏂囨。娴佷腑涔熷崰鏈変竴甯箣鍦般€備笉鍚岀殑鏄紝瀛愬厓绱犳诞鍔ㄥ湪姝ｅ父鏂囨。娴佺殑涓嬫柟锛屽彲浠ヨ鏄庡彧瑕乧ontain:璁剧疆浜唖ize锛屽畠鐨勫眰绾у氨浣庝簬姝ｅ父鏂囨。娴併€備緥瀛愪负浜嗘洿鐩磋鐨勭湅鍒癱ontain鐨勬晥鏋滐紝鍏堥檮涓奙anuelRegoCasasnovas鍐欑殑渚嬪瓙銆倃indow.performance.now()//閫氳繃[window.performance.now()](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance/now)璁板綍reflow鐨勫紑濮嬫椂闂达紝鐒跺悗閫氳繃[window.performance.now()](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance/now)鏉ヨ褰曚竴娆＄粨鏉熸椂闂达紝灏嗗緱鍒扮殑寮€濮嬫椂闂村拰缁撴潫鏃堕棿鐩稿噺锛屽嵆涓哄畬鍏ㄥ洖娴佺粡杩囩殑鏃堕棿銆傚嚱鏁拌繍琛屾祴璇曪紙锛墈璁剧疆锛堬級;//鍒涘缓1000涓妭鐐筶etavg1=changeTargetContent();//濡傛灉娌℃湁璁剧疆contain锛屽垯瑙﹀彂鍥炴祦lettargetItem=document.getElementById('targetItem');targetItem.style.contain='strict';璁゛vg2=changeTargetContent();//瑙﹀彂鍥炴祦}functionchangeTargetContent(){//寮哄埗layout.document.body.offsetLeft;璁﹕tart=window.performance.now();璁﹖argetInner=document.getElementById('targetInner');targetInner.textContent=targetInner.textContent=='HelloWorld!'锛?鍐嶈'锛?浣犲ソ涓栫晫锛?;//寮哄埗layout.document.body.offsetLeft;璁╃粨鏉?window.performance.now();璁╂椂闂?缁撴潫-寮€濮嬶紱returntime;}閫氳繃瀵规瘮can:strict璁剧疆鍓嶅悗鐨勮缃紝鍙互鐪嬪埌鎬ц兘浼樺寲杈惧埌浜?0%宸﹀彸銆傚疄闄呴」鐩腑锛屼娇鐢╟antain:strict灞炴€у悗鐨勬晥鏋溿€傚湪鎴浘鍦烘櫙涓紝鐐瑰嚮鎸夐挳涓ゆ锛屽氨鍙互瀹屽叏瑙﹀彂涓€涓ā鍧楃殑鎵撳紑鍜屽叧闂€傚墠鑰呮槸浣跨敤鍓嶏紝鍚庤€呮槸浣跨敤鍚庣殑瀹為檯娓叉煋鏁堟灉銆備娇鐢ㄥ墠锛氫娇鐢ㄥ悗锛氶€氳繃瀵规瘮鍙互鐪嬪嚭锛屼娇鐢╟antain:strict鍚庯紝娓叉煋鏃堕棿浠?750ms鍑忓皯鍒?58ms锛屼紭鍖栦簡澶х害60%銆傜粯鐢绘椂闂翠粠230ms鍑忓皯鍒?5ms锛屼紭鍖栦簡澶х害75%銆傛覆鏌撳拰缁樼敾鎵€鑺辫垂鐨勬椂闂村凡鏄剧潃鍑忓皯銆備娇鐢ㄥ悗娓叉煋鎬ц兘鐨勪紭鍖栬繕鏄緢鏄庢樉鐨勩€傚吋瀹规€у啓鍦ㄦ渶鍚庛€傚湪杩欎釜鐮旂┒涓紝鍏跺疄涔熸湁涓€浜涘€煎緱鎺㈢储鎴栬€呴仐鎲剧殑鍦版柟锛歝ontain鍦ㄤ紭鍖栭〉闈㈡覆鏌撴€ц兘鐨勫悓鏃讹紝鏄惁缁欐祻瑙堝櫒甯︽潵浜嗗叾浠栫殑璐熸媴锛熶釜浜虹寽娴嬫槸绌洪棿鎹㈡椂闂寸殑鏂瑰紡銆傝璁＄殑demo瀹為檯鏁堟灉涓庣悊鎯虫晥鏋滀笉绗︼紝鏈夌偣閬楁喚銆傛瘮濡俢ontain:paint锛屽湪灞忓箷澶栨坊鍔犲瓙鑺傜偣浼氳Е鍙憆eflow閲嶇粯銆傛牴鎹甤ontain:paint灞炴€у湪灞忓箷澶栦笉缁樺埗鍏冪礌鐨勭壒鐐癸紝閲嶇粯鐨勬椂闂村簲璇ュ緢灏忥紝鎺ヨ繎0ms锛屼絾鏄湪瀹炶返涓苟娌℃湁杈惧埌杩欎釜鏁堟灉銆傚鏋滄枃绔犳湁閿欒锛屾垨鑰呮湁鏇村ソ鐨勯獙璇乨emo锛屾杩庣暀瑷€浜ゆ祦馃槉銆傚弬鑰僀SSContainmentCSSContainmentinChrome52CSS-TrickscaniuseCSSContainment绠€浠婥SSContainmentModuleLevel1CSSContainmentModuleLevel2
