两行CSS让页面渲染性能提升近7倍！

.card_item{margin:20pxauto;content-visibility:auto;}/*...*/鍓嶈█瀵逛簬鍓嶇浜哄憳鏉ヨ锛屾渶澶寸柤鐨勫氨鏄〉闈㈡€ц兘銆傜敤鎴峰湪璁块棶涓€涓〉闈㈡椂锛屾€绘槸甯屾湜瀹冭兘澶熷揩閫熷憟鐜板拰浜や簰銆傚鏋滈〉闈㈠姞杞介€熷害澶參锛屾偍鐨勭敤鎴峰彲鑳戒細绂诲紑鎮ㄣ€傚洜姝わ紝椤甸潰鎬ц兘鏄墠绔紑鍙戜汉鍛樼殑閲嶄腑涔嬮噸銆備簨瀹炰笂锛屽鏋滀綘浜嗚В浜嗕粠鍔犺浇鍒版覆鏌撶殑鏁翠釜杩囩▼锛屼綘灏变細鐭ラ亾浠庡摢閲屽紑濮嬨€傚ソ鍚э紝涓嶈璇叆姝ч€斻€備粖澶╀富瑕佺爺绌堕暱鍒楄〃椤甸潰鐨勬覆鏌撴€ц兘銆傚浠婏紝椤甸潰鍙樺緱瓒婃潵瓒婂鏉傘€傞〉闈㈤€氬父鍖呭惈澶ч噺鍏冪礌銆傛渶甯歌鐨勬槸涓€浜涚數鍟嗛〉闈紝鍑犱竾涓€備骇鍝佸垪琛ㄥ浣曚繚璇佹覆鏌撲笉鍗￠】锛熼潰瀵硅繖涔堥暱鐨勫垪琛ㄦ覆鏌撳満鏅紝澶у涓€鑸細浣跨敤鍒嗛〉鎴栬€呰櫄鎷熷垪琛ㄦ潵鍑忚交椤甸潰涓€娆℃€ф覆鏌撶殑鍘嬪姏锛屼絾鏄繖浜涙柟娉曢兘闇€瑕侀厤鍚圝S瀹炵幇锛岄偅涔堟湁娌℃湁瑙ｅ喅鏂规鍙互浠呬娇鐢–SS灏辫兘瀹炵幇锛熺瓟妗堟槸鑲畾鐨勶紝灏辨槸鎴戜滑浠婂ぉ鐨勪富瑙掆€斺€斿唴瀹瑰彲瑙佹€э紙content-visibility锛夊鏋滆繖绡囨枃绔犲浣犳湁甯姪锛屸潳锔忓叧娉?鐐硅禐鉂わ笍榧撳姳浣滆€咃紝鏂囩珷鍏紬鍙烽鍙戯紝鍏虫敞鍓嶉潰-end鍗椾節绗竴鏃堕棿鑾峰彇鏈€鏂版枃绔爚content-visibility灞炴€у€糲ontent-visibility鏄疌SS鐨勪竴涓柊灞炴€э紝涓昏鐢ㄤ簬鎻愰珮椤甸潰娓叉煋鎬ц兘銆傚畠鍙互鎺у埗涓€涓厓绱犳槸鍚︽覆鏌撳畠鐨勫唴瀹癸紝骞跺厑璁告祻瑙堝櫒璺宠繃杩欎簺甯︽湁娓叉煋鐨勫厓绱犵殑甯冨眬銆倂isible锛氶粯璁ゅ€硷紝娌℃湁浣滅敤锛岀浉褰撲簬涓嶅姞content-visibility锛屾覆鏌撴晥鏋滃拰骞虫椂涓€鏍凤級auto锛氬鏋滃厓绱犱笉鍦ㄥ睆骞曚笂锛屼笌鐢ㄦ埛鏃犲叧锛屽垯鍏跺瓙鍏冪礌涓嶄細琚覆鏌揷ontent-visibility:hidden涓婇潰璇翠簡content-visibility:hidden鐨勬晥鏋滃拰display:none宸笉澶氾紝浣嗘槸杩樻槸鏈夋瘮杈冨ぇ鐨勫尯鍒細content-visibility:hidden鍙槸闅愯棌浜嗗瓙鍏冪礌鍏冪礌锛岃€屼笉鏄畠鏈韩銆備細閲嶆柊娓叉煋锛屼絾鏄細搴旂敤缂撳瓨锛屾墍浠ュ浜庨渶瑕侀绻佸垏鎹㈡樉绀哄拰闅愯棌鐨勫厓绱狅紝杩欎釜灞炴€у彲浠ュぇ澶ф彁楂樻覆鏌撴€ц兘銆備粠涓婇潰鎴戜滑鍙互鐪嬪嚭锛屾坊鍔犱簡content-visibility:hidden鍏冪礌鐨勫瓙鍏冪礌纭疄娌℃湁琚覆鏌擄紝浣嗘槸瀹冭嚜宸变細娓叉煋锛乧ontent-visibility:autovirtuallist鎴戜滑浠旂粏鎯虫兂銆傝櫧鐒堕〉闈笂浼氭湁寰堝鍏冪礌锛屼絾鏄畠浠細鍚屾椂鍛堢幇鍦ㄧ敤鎴烽潰鍓嶅悧锛熷緢鏄庢樉涓嶆槸銆傜敤鎴锋瘡娆＄湡姝ｈ兘鐪嬪埌鐨勶紝鍙湁璁惧鍙鍖哄煙鐨勫唴瀹癸紝瀵逛簬闈炲彲瑙佸尯鍩熺殑鍐呭锛屽彧瑕侀〉闈笉婊氬姩锛岀敤鎴锋案杩滅湅涓嶅埌銆傝櫧鐒剁敤鎴风湅涓嶅埌锛屼絾娴忚鍣ㄥ疄闄呬笂浼氭覆鏌撳畠锛屾氮璐逛簡寰堝鎬ц兘銆傛墍浠ユ垜浠緱鎯冲姙娉曡娴忚鍣ㄤ笉鍘绘覆鏌撻潪鍙鍖哄煙鐨勫唴瀹癸紝浠庤€岃揪鍒版彁鍗囬〉闈㈡覆鏌撴€ц兘鐨勬晥鏋溿€傛垜浠笂闈㈣鐨勮櫄鎷熷垪琛ㄧ殑鍘熺悊鍏跺疄鍜岃繖涓樊涓嶅銆傚姞杞界涓€涓睆骞曟椂锛屽彧鍔犺浇鍙鍖哄煙鐨勫唴瀹广€傞〉闈㈡粴鍔ㄦ椂锛岄€氳繃璁＄畻鍔ㄦ€佽幏鍙栧彲瑙佸尯鍩熺殑鍐呭锛屽皢涓嶅彲瑙佸尯鍩熺殑鍒楄〃鍐呭鍒犻櫎锛屽彲浠ュぇ澶ф彁楂橀暱鍒楄〃鐨勬覆鏌撴€ц兘銆備絾鏄繖涓渶瑕佺敤JS鏉ュ疄鐜般€傜幇鍦ㄦ垜浠彲浠ュ湪CSS涓娇鐢╟ontent-visibility:auto鏉ヨ烦杩囨覆鏌撶灞忓唴瀹广€傚浜庤繖涔堥暱鐨勫垪琛紝绂诲睆鍐呭寰堝锛屽彲浠ュぇ澶у噺灏戦〉闈㈡覆鏌撴椂闂淬€傛垜浠皢涓婇潰鐨勭ず渚嬩唬鐮佸井鏀癸細<鑴氭湰璁剧疆lang="ts">瀵煎叆{toRefs}鏉ヨ嚜鈥渧ue鈥濓紱constprops=defineProps<{book:any;index:any;}>();const{book,iindex}=toRefs(props);.card_item{margin:20pxauto;content-visibility:auto;}/*...*/棣栧厛娌℃湁娣诲姞content-visibility:auto鐨勬晥鏋滐紝涓嶇杩欎簺鍏冪礌鏄惁鍦ㄥ彲瑙佸尯鍩燂紝閮戒細琚覆鏌撱€傚鏋滄垜浠湪姝ｅ父涓氬姟涓繖鏍峰啓锛岀敤鎴疯繘鍏ヨ繖涓〉闈㈠彲鑳戒細鐩存帴鍚愭Ы銆傚嚭浜庢€ц兘鑰冭檻锛屾垜浠负姣忎釜娣诲姞涓€涓垪琛ㄩ」锛?card_item{content-visibility:auto;}杩欐椂鍊欐垜浠啀鐪嬩竴涓嬫晥鏋滐細浠庣10涓紑濮嬶紝涓嶆覆鏌撹繖浜涗笉鍦ㄥ彲瑙佸尯鍩熺殑鍏冪礌锛岃繖姣斾笂闈㈡墍鏈夌殑鍏冪礌閮芥覆鏌撶殑濂藉緢澶氾紝浣嗘槸濡傛灉娴忚鍣ㄤ笉娓叉煋椤甸潰鍐呴儴鐨勬煇浜涘厓绱狅紝婊氬姩灏嗘槸涓€鍦哄櫓姊︼紝鍥犱负鏃犳硶姝ｇ‘璁＄畻椤甸潰楂樺害銆傝繖鏄洜涓猴紝content-visibility浼氬皢鍒嗛厤缁欏畠鐨勫厓绱犵殑楂樺害锛坔eight锛夎涓?锛屾祻瑙堝櫒浼氬湪娓叉煋涔嬪墠灏嗚繖涓厓绱犵殑楂樺害鏇存敼涓?锛屽紕涔辨垜浠殑椤甸潰楂樺害鍜屾粴鍔ㄣ€傝繖閲屾垜浠彲浠ョ湅鍒伴〉闈㈢殑婊氬姩鏉′細鎶栧姩銆傝繖鏄洜涓哄彲瑙佸尯鍩熶箣澶栫殑鍏冪礌鍙湁鍑虹幇鍦ㄥ彲瑙佸尯鍩熸墠浼氳娓叉煋锛岃繖浼氬鑷村墠鍚庨〉闈㈢殑楂樺害鍙戠敓鍙樺寲锛屼粠鑰屽鑷存粴鍔ㄦ潯濂囨€殑鎶栧姩鐜拌薄锛岃繖鏄竴涓熀鏈殑闂瀛樺湪浜庤櫄鎷熷垪琛ㄤ腑銆俢ontain-intrinsic-size淇濆瓨椤甸潰銆傛粴鍔ㄦ潯鍦ㄦ粴鍔ㄨ繃绋嬩腑涓€鐩存姈鍔ㄣ€傝繖鏄竴涓棤娉曟帴鍙楃殑浣撻獙闂銆傝繖鏃跺€欐垜浠彲浠ヤ娇鐢╟ontain-intrinsic-size鏉ヤ繚璇佸厓绱犵殑姝ｇ‘娓叉煋锛屽悓鏃朵繚鐣欏欢杩熸覆鏌撶殑濂藉銆俢ontain-intrinsic-size鏄拰content-visibility涓€璧蜂娇鐢ㄧ殑灞炴€э紝鍙互鐢ㄦ潵鎺у埗content-visibility鎸囧畾鐨勫厓绱犵殑鑷劧灏哄璇硶璇ュ睘鎬ф槸浠ヤ笅CSS灞炴€х殑绠€鍐欙細contain-intrinsic-widthcontain-intrinsic-height/*鍏抽敭瀛楀€?/contain-intrinsic-width:none;/*鍊?/contain-intrinsic-size:1000px;contain-intrinsic-size:10rem;/*width|楂樺害*/contain-intrinsic-size:1000px1.5em;/*auto*/contain-intrinsic-size:auto300px;/*鑷姩瀹藉害|autoheight*/contain-intrinsic-size:auto300pxauto4rem;contain-intrinsic-size鍙互涓哄厓绱犳寚瀹氫笅闈㈢殑涓€涓や釜鍊笺€傚鏋滄寚瀹氫簡涓や釜鍊硷紝绗竴涓€奸€傜敤浜庡搴︼紝绗簩涓€奸€傜敤浜庨珮搴︺€傚鏋滄寚瀹氬崟涓€硷紝鍒欏畠閫傜敤浜庡搴﹀拰楂樺害銆傝瀹炵幇杩欎竴鐐癸紝鎴戜滑鍙渶瑕佸湪娣诲姞浜哻ontent-visibility:auto鐨勫厓绱犱腑娣诲姞contain-intrinsic-size鍗冲彲瑙ｅ喅婊氬姩鏉℃姈鍔ㄧ殑闂銆傚綋鐒讹紝杩欎釜楂樺害瓒婃帴杩戠湡瀹炴覆鏌撶殑楂樺害锛屾晥鏋滆秺濂斤紝濡傛灉鏃犳硶鐭ラ亾纭垏鐨勯珮搴︼紝鎴戜滑涔熷彲浠ョ粰鍑轰竴涓ぇ姒傜殑鍊硷紝杩欐牱涔熶細鐩稿鍑忓皯婊氬姩鏉＄殑闂..card_item{鍐呭鍙鎬э細鑷姩锛沜ontain-intrinsic-size:200px;}涔嬪墠涓嶆坊鍔燾ontain-intrinsic-size灞炴€ф椂锛屽彲瑙佸尯鍩熷鐨勫厓绱犻珮搴︿负0锛岀幇鍦ㄨ繖浜涘厓绱犵殑楂樺害灏辨槸鎴戜滑璁剧疆涓篶ontain鐨勫€?intrinsic-size锛岃鏁翠釜椤甸潰鐨勯珮搴︿笉浼氬彂鐢熷彉鍖栵紙鎴栬€呰鍙樺寲寰堝皬锛夛紝杩欐牱椤甸潰婊氬姩鏉″氨涓嶄細鍑虹幇鎶栧姩闂锛堟垨鑰呮姈鍔ㄥ噺灏戯級銆傚姣斾笂闈㈡彁鍒扮殑鎬ц兘锛宑ontent-visibility鐪熺殑鑳芥彁鍗囬〉闈㈢殑娓叉煋鎬ц兘鍚楋紵璁╂垜浠湪瀹炶返涓繘琛屾瘮杈冿細棣栧厛锛屾病鏈塩ontent-visibility鐨勯〉闈㈡覆鏌擄紝鐒跺悗鏈塩ontent-visibility鐨勯〉闈㈡覆鏌撳湪涓婇潰鐢?000涓垪琛ㄥ厓绱犺繘琛屼簡娴嬭瘯銆傚甫content-visibility鐨勯〉闈㈡覆鏌撴椂闂寸害涓?7ms锛屼笉甯ontent-visibility鐨勯〉闈㈡覆鏌撴椂闂寸害涓?69ms锛屾暣鏁存彁鍗囦簡7鍊嶏紒锛侊紒瀵逛簬鍒楄〃鍏冪礌杈冨鐨勯〉闈紝content-visibility甯︽潵鐨勬覆鏌撴€ц兘鎻愬崌浼氭洿鍔犳槑鏄俱€傛€濊€凁煠擜ccessibility浣跨敤content-visibility:auto闈炲彲瑙佸尯鍩熺殑鍏冪礌鏄惁瀛樺湪浜巃ccessibility鏍戜腑锛熶粠杩欎釜鎼滅储涓垜浠彲浠ョ湅鍒癱ontent-visibility:auto鐨勪笉鍙鍖哄煙鍐呯殑鍐呭鍦ㄦ枃妗ｅ璞℃ā鍨嬪拰鍙闂€ф爲涓粛鐒跺彲鐢紙涓嶅悓浜巚isibility:hidden锛夈€傚彲浠ョ敤鏉ユ噿鍔犺浇鍥剧墖鍚楋紵鎴戜滑鐢ㄤ笂闈㈢殑渚嬪瓙鎻掑叆涓€浜涗笉鍚岀殑鍥剧墖锛岀湅鐪嬮潪鍙鍖虹殑鍥剧墖璧勬簮浼氫笉浼氳鍔犺浇锛熶粠Network鐨勮搴︽潵鐪嬶紝鍗充娇涓嶆覆鏌撳彲瑙佸尯鍩熶箣澶栫殑鍐呭锛屽畠浠殑涓€浜涢潤鎬佽祫婧愯繕鏄細琚姞杞姐€俢ontent-visibility:auto浼间箮涓嶉€傚悎寤惰繜鍔犺浇鍥剧墖銆傚吋瀹规€ontent-visibility鏄痗hrome85鐨勬柊鐗规€э紝鎵€浠ュ吋瀹规€т笉鏄緢楂樸€俢ontent-visibility鐩墠杩樹笉閫傚悎瀹為檯涓氬姟锛屼絾鏄槸涓€涓潪甯稿疄鐢ㄧ殑CSS灞炴€э紝鐩镐俊鍏煎鎬ч棶棰樹細鍦ㄤ笉涔呯殑灏嗘潵寰楀埌瑙ｅ喅~鍠滄鐨勫悓瀛︽杩庣偣璧瀪娆㈣繋澶у鍏虫敞鍒板叕浼楀彿銆婂墠绔崡涔呫€嬶紝鎯冲姞鍏ュ墠绔氦娴佺兢涓€璧峰涔犵殑璇风偣杩欓噷鎴戞槸鍗椾箙锛屾垜浠笅鏈熻锛侊紒锛?/p>