鎬ц兘娴嬭瘯鎬ц兘鎸囨爣瀵逛簬JS搴旂敤鐨勫紑鍙戣€咃紝涔熷彲浠ュ弬鑰冪被浼肩殑Rail鎸囨爣銆俁ail(response,amination,idle,load)鏄痳esponse,animation,idle,load杩欏洓涓瘝鐨勯瀛楁瘝缂╁啓銆傛帴涓嬫潵锛屾垜浠潵鐪嬬湅瀹冧滑鍒嗗埆浠ｈ〃浠€涔堛€傚叧浜庡搷搴旓紝鍘熷垯鏄垜浠殑搴旂敤搴旇鍦?0ms鍐呭鐞嗗搷搴旓紝骞跺湪50-100ms鍐呮彁渚涘彲瑙佺殑鍝嶅簲锛涘叧浜庡姩鏁堬紝鍓嶉潰鎻愬埌杩囷紝鍦ㄥ鐞嗘覆鏌撶殑鏃跺€欙紝鎴戜滑鐨勫抚棰勭畻鏄瘡绉?0甯э紝涔熷氨鏄瘡甯ц鎺у埗鍦?6.6ms浠ュ唴娓叉煋锛涘叧浜巌dleness锛屼笉绠℃槸鍦╨oadingmode杩樻槸garbagecollection鐨勮搴т腑锛屾垜浠兘鎻愬埌杩囪鏈€澶ч檺搴︾殑鍒╃敤idletime锛屼絾鏄繖閲岄渶瑕佹敞鎰忕殑鏄紝杩欎釜鍒╃敤涔熸槸闇€瑕佷竴瀹氱▼搴︾殑銆傚鏋滆繖涓椂闂撮渶瑕佸鐞嗙殑浠诲姟瓒呰繃50ms锛屽氨浼氬奖鍝嶆垜浠湪绗竴鐐规彁鍒扮殑100ms鍐呯殑鍝嶅簲锛涘叧浜庡姞杞斤紝瀵逛簬椤甸潰鍔犺浇锛屾垜浠殑搴旂敤搴旇灏介噺鍦?00ms浠ュ唴锛屽垵濮嬪姞杞藉湪5绉掑唴瀹屾垚锛屽悗缁〉闈㈠姞杞藉湪2绉掑唴瀹屾垚銆傚奖鍝嶆€ц兘鐨勫洜绱犺瀹屼簡娴嬭瘯鎸囨爣锛屾垜浠啀鏉ョ湅鐪嬪奖鍝峎eb鎬ц兘鐨勫洜绱犮€傚奖鍝嶆€ц兘鐨勫洜绱犻敊缁煎鏉傘€備粠澶х被鏉ョ湅锛屾棦鍖呮嫭浣嗕笉闄愪簬缃戠粶鐜銆佽祫婧愬姞杞姐€佹祻瑙堝櫒娓叉煋绛夊閮ㄥ洜绱狅紝涔熷寘鎷唴瀛樼鐞嗐€佸瀮鍦惧洖鏀剁瓑鍐呴儴鍥犵礌銆傞潰瀵瑰姝ゅ鐨勫洜绱狅紝浜哄伐杩涜鎬ц兘娴嬭瘯闈炲父璐规椂璐瑰姏锛岃€屼笖灏嗚繖浜涙祴璇曠殑缁撴灉鍙犲姞杞寲涓轰笂杩版寚鏍囦篃鏄竴涓箒鐞愮殑杩囩▼銆備负浜嗚В鍐宠繖涓棶棰橈紝澶у鏁版祻瑙堝櫒閮芥彁渚涗簡寮€鍙戣€呭伐鍏锋潵甯姪鎴戜滑杩涜杩欎簺娴嬭瘯銆備互Chrome涓轰緥锛屾垜浠彲浠ヤ娇鐢ㄤ袱涓伐鍏凤紝Lighthouse鍜孭erformanceInsights銆傛€ц兘娴嬭瘯宸ュ叿Lighthouse棣栧厛锛屾垜浠彲浠ョ湅鐪婰ighthouse銆傚湪寮€鍙戣€呭伐鍏风殑Lighthouse閫夐」鍗′笅锛屾垜浠彲浠ラ€夋嫨鎬ц兘妫€娴嬮€夐」銆備粠妫€娴嬬粨鏋滃彲浠ョ湅鍑猴紝鍓嶉潰鎻愬埌鐨凢CP銆乀TI绛夋寚鏍囬兘涓庢覆鏌撳姞杞芥湁鍏炽€傚悓鏃讹紝鎴戜滑鍙互鐪嬪埌涓€浜涙€ц兘璇婃柇鐨勫缓璁紝姣斿鍑忓皯杩囧鐨凞OM鑺傜偣锛屽闈欐€佽祫婧愪娇鐢ㄩ珮鏁堢殑缂撳瓨绛栫暐銆傚悓鏃讹紝鎴戜滑鍙互楠岃瘉涓€浜涗紭鍖栭」鐩紝姣斿缂╁皬鐨凧S鍜孋SS鏂囦欢銆備絾鏄湪涓婇潰鐨勭粨鏋滀腑锛屾垜浠緱鍒扮殑鍩烘湰閮芥槸涓€涓暟瀛楋紝瀵逛簬鍔犺浇杩囩▼涓殑鏃堕棿鍒嗗竷骞舵病鏈夌洿瑙傜殑鎰熷彈銆傞€氳繃PerformanceInsights閫夐」鍗★紝鎴戜滑鍙互鏇寸洿瑙傚湴鏍规嵁椤甸潰鐨勫疄闄呬娇鐢ㄥ満鏅紝鍦ㄦ椂闂磋酱涓婂睍绀洪〉闈㈠姞杞芥墍鑺辫垂鐨勬椂闂淬€傝繖鏍凤紝鎴戜滑灏卞彲浠ユ洿鐩存帴鍦板垎鏋愩€佸垽鏂拰浼樺寲涓€浜涙€ц兘鐡堕銆傛€ц兘鐡堕鎺掓煡浠ヤ笂鎴戜滑鍙互閫氳繃Lighthouse鍜孭erformanceInsights寰堝ソ鐨勫垎鏋愬閮ㄥ洜绱犮€備絾鏄浜庝竴浜涘唴瀛樼鐞嗗拰鍨冨溇鍥炴敹鐨勯棶棰橈紝灏辨棤浠庣煡鏅撲簡銆傛墍浠ユ垜浠彧鑳界湅鍒拌〃璞★紝鍗存棤娉曞垎鏋愬叾鑳屽悗鐨勬牴鏈師鍥犮€傛墍浠ユ垜浠渶瑕佹繁鍏ュ垎鏋愬唴瀛樼鐞嗙殑宸ュ叿銆傞鍏堬紝鎴戜滑鍙互閫氳繃鏇村宸ュ叿->浠诲姟绠＄悊杩涘叆鍐呭瓨绠＄悊绐楀彛锛屽湪杩欓噷鎴戜滑鍙互鐪嬪埌鍐呭瓨涓€鏍忔樉绀虹殑鍐呭瓨浣跨敤鎯呭喌銆傝繖鏃跺€欏鏋滄垜浠彸閿€夋嫨JavaScriptMemory锛屾垜浠篃鍙互鍚屾椂鍔犺浇JS鐨勫唴瀛樹娇鐢ㄤ俊鎭€傞偅涔圡emory鍜孞avaScriptMemory鍒楁湁浠€涔堝尯鍒憿锛熻繖閲岀殑鍖哄埆鍦ㄤ簬Memory鍖呭惈鎴戜滑椤甸潰鐢熸垚鐨凞OM鍏冪礌銆傝€孞SMemory鍖呭惈浜咼S鐢熸垚鐨勫璞℃暟閲忓拰鎷彿涓寘鍚殑褰撳墠瀛樻椿鐨勫璞℃暟閲忋€傚鏋滄澶勭殑鏁板瓧澶珮锛屽垯闇€瑕佽繘涓€姝ヨ皟鏌ャ€傞鍏堬紝浠庢椂闂寸淮搴︿笂锛屾垜浠彲浠ラ€氳繃寮€鍙戣€呭伐鍏蜂腑鐨凱erformanceTab杩涜鎬ц兘鍒嗘瀽銆傚湪杩欓噷锛屾垜浠彲浠ュ嬀閫夊唴瀛橀€夐」锛岀劧鍚庨€夋嫨褰曢煶锛岀偣鍑诲瀮鍦炬《鍥炬爣锛屽湪寮€濮嬪拰缁撴潫鐨勬椂鍊欏仛涓€娆″瀮鍦惧洖鏀讹紝閬垮厤娴嬭瘯鏃舵澶栫殑骞叉壈銆傜粨鏋滅殑姒傝绐楀彛涓紝鍫嗗浘浠ｈ〃JS鍫嗭紝姒傝涓嬫柟鏄鏁板櫒绐楀彛銆傚湪杩欓噷浣犲彲浠ョ湅鍒版寜JS鍫嗐€佽妭鐐瑰拰GPU鍐呭瓨绛夌粏鍒嗙殑鍐呭瓨浣跨敤鎯呭喌銆傚鏋滄鏃舵垜浠湅鍒帮紝闅忕潃璁板綍鐨勮繘琛岋紝鏈€鍚庣殑JS鍫嗘垨鑺傜偣鏁版瘮寮€濮嬫椂澶氾紝杩欐剰鍛崇潃杩涚▼涓彲鑳藉瓨鍦ㄥ唴瀛樻硠婕忋€傚彟澶栵紝閫氳繃MemoryTab锛屾垜浠彲浠ヤ粠绌洪棿鐨勭淮搴︽潵鍒嗘瀽鎬ц兘鐡堕銆傚浜庢祻瑙堝櫒锛屽彧鏈夊湪椤甸潰鐨凞OM鏍戞垨JavaScript浠ｇ爜涓湭寮曠敤DOM鑺傜偣鏃讹紝瀹冧滑鎵嶄細琚瀮鍦惧洖鏀躲€傚綋鑺傜偣浠嶥OM鏍戜腑绉婚櫎锛屼絾浠嶈鏌愪簺JavaScript寮曠敤鏃讹紝杩欎簺鑺傜偣琚О涓衡€滃垎绂昏妭鐐光€濄€備粠DOM鏍戜腑鎺夎惤鐨勮妭鐐规槸鍐呭瓨娉勬紡鐨勫父瑙佸師鍥犮€傚爢蹇収鏄瘑鍒垎绂昏妭鐐圭殑涓€绉嶆柟娉曘€傞【鍚嶆€濅箟锛屽爢蹇収鍚戞垜浠睍绀轰簡蹇収鏃堕〉闈㈢殑JS瀵硅薄鍜孌OM鑺傜偣涔嬮棿鐨勫唴瀛樺垎甯冦€傚湪鍐呭瓨閫夐」鍗′腑锛屾垜浠彲浠ョ湅鍒癑S鍫嗗揩鐓х殑閫夐」锛屽彲浠ュ府鍔╂垜浠簡瑙S瀵硅薄鍜岀浉鍏矰OM鑺傜偣鍦ㄩ〉闈笂鐨勫垎甯冩儏鍐点€傛媿鎽勫揩鐓у悗锛屾垜浠彲浠ヤ娇鐢ㄥ璞＄被鍨嬭繃婊ゅ櫒涓殑鈥渄etached鈥濆叧閿瓧鎼滅储浠嶥OM鏍戝垎绂荤殑鑺傜偣銆傝繖鏃跺€欐垜浠彲鑳戒細鐪嬪埌绾㈣壊鍜岄粍鑹茬殑鑺傜偣銆傛垜浠渶瑕佹敞鎰忕殑鏄粍鑹茶妭鐐癸紝鍥犱负瀹冧滑鏄洿鎺ュ紩鐢ㄧ殑鑺傜偣锛屼娇鐢ㄥ悗闇€瑕佸強鏃跺洖鏀讹紝瀹冧滑鐨勫洖鏀朵細鍒犻櫎涓嬮潰闂存帴寮曠敤鐨勭孩鑹茶妭鐐广€傛澶栵紝鎴戜滑杩樺彲浠ラ€氳繃JavaScript鍐呭瓨鍒嗛厤鐨勬椂闂磋酱锛屼粠鏃堕棿缁村害涓婄湅瀵硅薄鐨勫唴瀛樺垎閰嶆儏鍐碉紝鎺掓煡鍐呭瓨娉勬紡闂銆傚畨鍏ㄦ祴璇曡瀹屾€ц兘娴嬭瘯锛屾垜浠啀鏉ョ湅鐪嬪畨鍏ㄦ祴璇曘€傚湪缃戠粶瀹夊叏娴嬭瘯涓紝涓昏鍖呮嫭娓楅€忔祴璇曞拰婕忔礊鎵弿銆傛笚閫忔祴璇曞彲浠ユ槸榛戠洅涔熷彲浠ユ槸鐧界洅锛屽嵆娴嬭瘯浜哄憳鍏呭綋鍏ヤ镜鑰咃紝閫氳繃鍓嶇鎻愪緵鐨勬祴璇曠幆澧冨拰鐩稿叧寮€鍙戠殑搴旂敤绋嬪簭杩涜娴嬭瘯銆傚湪榛戝專瀛愮殑鎯呭喌涓嬶紝鍏ヤ镜鑰呴粯璁ゆ病鏈変唬鐮佽闂潈闄愶紝閫氳繃灏濊瘯锛岃瘯鍥炬笚閫忓埌绯荤粺鍐呴儴銆傛紡娲炴壂鎻忛€氬父鏄竴绉嶇櫧鐩掓祴璇曘€備緥濡傦紝璁稿浜戞湇鍔℃彁渚涘晢閮芥敮鎸佷唬鐮佹墭绠°€傚湪姝ゅ熀纭€涓婁竴鑸細澧炲姞婕忔礊鎵弿鐨勬祴璇曞伐鍏枫€傚湪杩欎釜鎵弿杩囩▼涓紝璐熻矗鑷姩娴嬭瘯鐨勭▼搴忓彲浠ヨ闂唬鐮佸簱涓殑浠ｇ爜锛岄€氳繃鎵弿浠ｇ爜鏉ュ彂鐜版紡娲炪€傛棤璁烘槸娓楅€忔祴璇曡繕鏄紡娲炴壂鎻忥紝杩欎袱绫绘祴璇曢兘鏄湪杞欢宸ョ▼涓敱涓撻棬鐨勬祴璇曚汉鍛樻垨浜戝钩鍙版彁渚涚殑宸ュ叿杩涜鐨勩€備笅闈㈡垜浠粠寮€鍙戠殑瑙掑害鏉ョ湅涓€涓嬫垜浠湪绋嬪簭寮€鍙戜腑鍙互鍋氬摢浜涘墠鏈熸祴璇曘€備粠鍓嶇濡備綍娴嬭瘯瀹夊叏杩炴帴锛熷湪杩欓噷锛屾垜浠繕鍙互浣跨敤娴忚鍣ㄦ彁渚涚殑寮€鍙戣€呭伐鍏枫€備互Chrome涓轰緥锛屽湪Security閫夐」鍗′腑鐪嬪埌鐨勪富瑕佹潵婧愮殑瀹夊叏璇佷功鍜岃繛鎺ュ畨鍏紝浠ュ強鐩稿叧璧勬簮鐨勫畨鍏ㄦ€э紝鍙互甯姪鎴戜滑瀵瑰畨鍏ㄩ棶棰樺仛涓€涓垵姝ョ殑鎺掓煡銆傛棤闅滅娴嬭瘯鏃犻殰纰嶆槸寰堝娆х編缃戠珯涓潪甯搁噸瑕佺殑鍔熻兘锛屽畠鍙互璁╀竴浜涙畫鐤句汉閫氳繃鏃犻殰纰嶆祻瑙堟垜浠紑鍙戠殑椤甸潰銆傝繖鍖呮嫭鏈夎壊寮便€佽壊鐩插拰鑹茬洸绛夌殑浜猴紝浠栦滑涔熷簲璇ヨ兘澶熸棤闅滅鍦拌闂垜浠紑鍙戠殑椤甸潰銆傚湪寮€鍙戣緟鍔╁姛鑳芥椂锛屾垜浠€氬父瑕佽€冭檻涓や釜闂锛屼竴涓槸鐢ㄦ埛鏄惁鍙互浣跨敤閿洏鎴栧睆骞曢槄璇诲櫒娴忚椤甸潰锛屽彟涓€涓槸椤甸潰鍏冪礌鏄惁涓哄睆骞曢槄璇诲櫒姝ｇ‘鏍囪銆備笅闈㈡槸涓€娈垫暟鎹俊鎭€傝鍒拌闅滀汉澹紝澶у鍙兘浼氳寰楄繖閮ㄥ垎浜虹殑姣斾緥寰堜綆锛屼絾瀹為檯涓婁腑鍥芥湁瓒呰繃1700涓囪闅滀汉澹紝鍏朵腑鏈夎秴杩?00涓囨槸瀹屽叏澶辨槑鐨勩€傚彟涓€涓粡甯歌蹇借鐨勭兢浣撴槸鑹茬洸鎴栬壊寮辩兢浣撱€備腑鍥借壊鐩蹭汉鏁拌秴杩?000涓囷紝鑹茬洸浜烘暟瓒呰繃2000涓囥€傚姞鍦ㄤ竴璧凤紝杩欐槸涓€涓儕浜虹殑8000涓囦汉銆備篃灏辨槸璇达紝浠呭湪涓浗锛屽彲鑳芥湁鏁颁嚎浜烘棤娉曟甯歌闂浉鍏冲唴瀹癸紝鍥犱负鎴戜滑鐨勯〉闈㈡病鏈夎緟鍔╁姛鑳姐€傚紑鍙戝杩欑兢浜哄弸濂界殑搴旂敤锛屼笉浠呮槸澶у叕鍙哥殑浼佷笟璐ｄ换锛屽嵆浣夸粠鍔熷埄鐨勮搴︽潵鐪嬶紝杩欑兢浜轰篃鏄喘涔版垜浠湇鍔℃垨浜у搧鐨勬綔鍦ㄥ鎴枫€傝闂綉绔欑殑娆℃暟瓒婂锛岄潰瀵圭殑缇や綋灏辫秺澶с€傚鏋滄垜浠笉閲嶈杩欓儴鍒嗙敤鎴凤紝涓嶄粎浼氬奖鍝嶆垜浠殑澹拌獕锛岃繕浼氬奖鍝嶆垜浠殑鐢熸剰銆傚洜姝わ紝鏃犺浠庣ぞ浼氬彂灞曡繘姝ョ殑瑙掑害锛岃繕鏄粠甯傚満鐨勮搴︼紝鎴戜滑閮藉簲璇ュ敖鍙兘鍦颁负杩欎簺鐢ㄦ埛鎻愪緵鐩稿叧鐨勫姛鑳藉拰娴嬭瘯銆傝壊鐩叉垨鑹插急鑰呴潰涓寸殑涓昏闂鏄棤娉曞垎杈ㄤ竴浜涗綆瀵规瘮搴︾殑棰滆壊銆傛垜浠彲浠ュ弬鑰冪浉鍏崇殑鎸囧鎬ф妧鏈爣鍑哤CAG锛岃繖鏄竴涓唴瀹规棤闅滅鎸囧崡銆傛€诲叡鏈?涓骇鍒€侫绾ф槸娈嬮殰鐢ㄦ埛鑳藉璁块棶鍜屼娇鐢╓eb鍐呭鐨勫熀鏈姹傦紱AA绾ц〃绀哄唴瀹逛竴鑸彲璁块棶骞舵秷闄や簡璁块棶鍐呭鐨勪富瑕侀殰纰嶏紱AAA绾т负涓€浜涙畫鐤剧敤鎴锋彁渚涚綉缁滃府鍔╁姛鑳芥敼杩涘拰澧炲己銆備粛鐒朵互ChromeDeveloperTools涓轰緥锛屽湪CSSOverviewTab锛圕SSOverviewTab锛変笅锛屾垜浠彲浠ョ湅鍒板姣斿害鏈夐棶棰樼殑瀛椾綋鍜岃儗鏅€傛瘮濡備笅闈㈢殑渚嬪瓙锛屾垜浠彲浠ョ湅鍒帮紝褰撴枃瀛楃殑鐏板害涓庤儗鏅殑鐏板害鐩歌繎鏃讹紝涓嶇鍚圓A鏍囧噯锛岃€屽熀浜庤摑鑹茶儗鏅殑鐧借壊瀛椾綋鍒欒揪鍒颁簡AA鏍囧噯锛屼絾鏄畠浠嶇劧姣擜AASome宸€傞櫎浜咰SS姒傝閫夐」鍗★紝鍦ㄥ紑鍙戣€呭伐鍏蜂腑锛屾垜浠繕鍙互閫氳繃鍕鹃€塋ighthouse閫夐」鍗′腑鐨凙ccessibility鍔熻兘鏉ュ缃戠珯杩涜瀹℃牳銆傞€氳繃瀹℃牳锛屾垜浠彲浠ョ湅鍒伴€氳繃鐨勭粨鏋滐紝闇€瑕侀澶栦汉宸ュ鏍哥殑闂锛屼互鍙婃湰娆℃祴璇曚笉閫傜敤鐨勬祴璇曠敤渚嬨€傛湰鏂囦负2鏈圖ay13鐨勫涔犵瑪璁帮紝鍐呭鏉ヨ嚜鏋佸鏃堕棿銆奐vascript杩涢樁瀹炴垬璇俱€嬶紝涓€璧疯繘姝ヰ煉煉?/p>
