鍓嶇鎬ц兘鐩戞帶

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鍓嶇鎬ц兘鐩戞帶相关的知识,希望对你有一定的参考价值。

鏍囩锛?/p>

鍓嶇鎬ц兘

1.鍏抽敭鐐?/h2>

銆€銆€鍒嗛〉闈€佸尯鍩熴€佹祻瑙堝櫒銆佹€ц兘鎸囨爣

銆€銆€椤甸潰鐨勬€ц兘鎸囨爣璇﹁В锛?/strong>

銆€銆€鐧藉睆鏃堕棿锛坒irst Paint Time锛?mdash;—鐢ㄦ埛浠庢墦寮€椤甸潰寮€濮嬪埌椤甸潰寮€濮嬫湁涓滆タ鍛堢幇涓烘

銆€銆€棣栧睆鏃堕棿——鐢ㄦ埛娴忚鍣ㄩ灞忓唴鎵€鏈夊唴瀹归兘鍛堢幇鍑烘潵鎵€鑺辫垂鐨勬椂闂?/p>

銆€銆€鐢ㄦ埛鍙搷浣滄椂闂?dom Interactive)——鐢ㄦ埛鍙互杩涜姝e父鐨勭偣鍑汇€佽緭鍏ョ瓑鎿嶄綔锛岄粯璁ゅ彲浠ョ粺璁?strong>domready鏃堕棿锛屽洜涓洪€氬父浼氬湪杩欐椂鍊欑粦瀹氫簨浠舵搷浣?/p>

銆€銆€鎬讳笅杞芥椂闂?mdash;—椤甸潰鎵€鏈夎祫婧愰兘鍔犺浇瀹屾垚骞跺憟鐜板嚭鏉ユ墍鑺辩殑鏃堕棿锛屽嵆椤甸潰 onload 鐨勬椂闂?/p>

 

銆€銆€纭畾缁熻璧风偣锛?/strong>

銆€銆€鎴戜滑闇€瑕佸湪鐢ㄦ埛杈撳叆 URL 鎴栬€呯偣鍑婚摼鎺ョ殑鏃跺€欏氨寮€濮嬬粺璁★紝鍥犱负杩欐牱鎵嶈兘琛¢噺鐢ㄦ埛鐨勭瓑寰呮椂闂淬€傞珮绔祻瑙堝櫒Navigation Timing鎺ュ彛锛涙櫘閫氭祻瑙堝櫒閫氳繃 cookie 璁板綍鏃堕棿鎴崇殑鏂瑰紡鏉ョ粺璁★紝闇€瑕佹敞鎰忕殑鏄?Cookie 鏂瑰紡鍙兘缁熻鍒扮珯鍐呰烦杞殑鏁版嵁銆?/p>

銆€銆€

2.濡備綍缁熻鎬ц兘鎸囨爣鐨勬椂闂?/h2>

2.1鐧藉睆鏃堕棿

銆€銆€鍏紡锛?/strong>

銆€銆€鐧藉睆鏃堕棿=寮€濮嬫覆鏌撴椂闂?棣栧瓧鑺傛椂闂?html涓嬭浇瀹屾垚鏃堕棿)+澶撮儴璧勬簮鍔犺浇鏃堕棿

銆€銆€

銆€銆€濡備綍鑾峰彇锛?/strong>

銆€銆€chrome 楂樼増鏈細

銆€銆€window.chrome.loadTimes().firstPaintTime loadTimes鑾峰彇鐨勭粨鏋?/p>

{
  connectionInfo: "http/1",
  finishDocumentLoadTime: 1422412260.278667,
  finishLoadTime: 1422412261.083637,
  firstPaintAfterLoadTime: 1422412261.094726,
  firstPaintTime: 1422412258.085214,
  navigationType: "Reload",
  npnNegotiatedProtocol: "unknown",
  requestTime: 0,
  startLoadTime: 1422412256.920803,
  wasAlternateProtocolAvailable: false,
  wasFetchedViaSpdy: false,
  wasNpnNegotiated: false
}

 銆€銆€鎵€浠ヨ绠楀叕寮忥細

(chrome.loadTimes().firstPaintTime - chrome.loadTimes().startLoadTime)*1000

 

銆€銆€鍏朵粬娴忚鍣細

銆€銆€澶ч儴鍒嗘祻瑙堝櫒娌℃湁鐗瑰畾鍑芥暟锛屽繀椤绘兂鍏朵粬鍔炴硶鏉ョ洃娴嬨€備粩缁嗚瀵?WebPagetest 瑙嗗浘鍒嗘瀽鍙戠幇锛岀櫧灞忔椂闂村嚭鐜板湪澶撮儴澶栭摼璧勬簮鍔犺浇瀹岄檮杩戯紝鍥犱负娴忚鍣ㄥ彧鏈夊姞杞藉苟瑙f瀽瀹屽ご閮ㄨ祫婧愭墠浼氱湡姝f覆鏌撻〉闈€傚熀浜庢鎴戜滑鍙互閫氳繃鑾峰彇澶撮儴璧勬簮鍔犺浇瀹岀殑鏃跺埢鏉ヨ繎浼肩粺璁$櫧灞忔椂闂淬€傚敖绠″苟涓嶇簿纭紝浣嗗嵈鑰冭檻浜嗗奖鍝嶇櫧灞忕殑涓昏鍥犵礌锛氶瀛楄妭鏃堕棿鍜屽ご閮ㄨ祫婧愬姞杞芥椂闂达紙HTML涓嬭浇瀹屾垚鏃堕棿闈炲父寰皬锛夈€?/p>

銆€銆€鎶€鏈垎浜? src=

銆€銆€鏈変竴涓偣:mod_36ad799.js绛夊嚑涓猨s涓轰粈涔堜細鍦╤m.js涔嬪墠涓嬭浇锛焗tml浠g爜濡備笅

銆€銆€鎶€鏈垎浜? src=

銆€銆€杩欒矊浼间笌鎴戜滑鐔熺煡鐨勮剼鏈樆濉炶В鏋愪笉绗﹀晩锛岀悊搴旀槸鑴氭湰鎻掑叆hm.js鍦ㄥ厛锛屽鑷碊OM鏍戞敼鍙橈紝閲嶆柊缁樺埗DOM鏍戯紝鐒跺悗缁х画寰€涓嬭В鏋?hellip;…鍘熷洜鏄幇鍦ㄧ殑娴忚鍣ㄥ杩欎釜杩囩▼鍋氫簡浼樺寲锛?/p>

澶勭悊鑴氭湰鍙婃牱寮忚〃鐨勯『搴忥紙The order of processing scripts and style sheets锛?/span>

銆€銆€鑴氭湰

銆€銆€web鐨勬ā寮忔槸鍚屾鐨勶紝寮€鍙戣€呭笇鏈涜В鏋愬埌涓€涓猻cript鏍囩鏃剁珛鍗宠В鏋愭墽琛岃剼鏈紝骞堕樆濉炴枃妗g殑瑙f瀽鐩村埌鑴氭湰鎵ц瀹屻€傚鏋滆剼鏈槸澶栧紩鐨勶紝鍒欑綉缁滃繀椤诲厛璇锋眰鍒拌繖涓祫婧?mdash;—杩欎釜杩囩▼涔熸槸鍚屾鐨勶紝浼氶樆濉炴枃妗g殑瑙f瀽鐩村埌璧勬簮琚姹傚埌銆?span style="color: #ff0000;">杩欎釜妯″紡淇濇寔浜嗗緢澶氬勾锛屽苟涓斿湪html4鍙奾tml5涓兘鐗瑰埆鎸囧畾浜嗐€傚紑鍙戣€呭彲浠ュ皢鑴氭湰鏍囪瘑涓篸efer锛屼互浣垮叾涓嶉樆濉炴枃妗hВ鏋愶紝骞跺湪鏂囨。瑙f瀽缁撴潫鍚庢墽琛屻€侶tml5澧炲姞浜嗘爣璁拌剼鏈负寮傛鐨勯€夐」锛屼互浣胯剼鏈殑瑙f瀽鎵ц浣跨敤鍙︿竴涓嚎绋嬨€?/p>

銆€銆€棰勮В鏋愶紙Speculative parsing锛?/span>

銆€銆€Webkit鍜孎irefox閮藉仛浜嗚繖涓紭鍖栵紝褰撴墽琛岃剼鏈椂锛屽彟涓€涓嚎绋嬭В鏋愬墿涓嬬殑鏂囨。锛屽苟鍔犺浇鍚庨潰闇€瑕侀€氳繃缃戠粶鍔犺浇鐨勮祫婧?/span>銆傝繖绉嶆柟寮忓彲浠ヤ娇璧勬簮骞惰鍔犺浇浠庤€屼娇鏁翠綋閫熷害鏇村揩銆傞渶瑕佹敞鎰忕殑鏄紝棰勮В鏋愬苟涓嶆敼鍙楧om鏍?/span>锛屽畠灏嗚繖涓伐浣滅暀缁欎富瑙f瀽杩囩▼锛岃嚜宸卞彧瑙f瀽澶栭儴璧勬簮鐨勫紩鐢紝姣斿澶栭儴鑴氭湰銆佹牱寮忚〃鍙婂浘鐗囥€?/p>

銆€銆€鏍峰紡琛紙Style sheets锛?/span>

銆€銆€鏍峰紡琛ㄩ噰鐢ㄥ彟涓€绉嶄笉鍚岀殑妯″紡銆傜悊璁轰笂锛屾棦鐒舵牱寮忚〃涓嶆敼鍙楧om鏍戯紝涔熷氨娌℃湁蹇呰鍋滀笅鏂囨。鐨勮В鏋愮瓑寰呭畠浠紝鐒惰€岋紝瀛樺湪涓€涓棶棰橈紝鑴氭湰鍙兘鍦ㄦ枃妗g殑瑙f瀽杩囩▼涓姹傛牱寮忎俊鎭紝濡傛灉鏍峰紡杩樻病鏈夊姞杞藉拰瑙f瀽锛岃剼鏈皢寰楀埌閿欒鐨勫€硷紝鏄剧劧杩欏皢浼氬鑷村緢澶氶棶棰橈紝杩欑湅璧锋潵鏄釜杈圭紭鎯呭喌锛屼絾纭疄寰堝父瑙併€侳irefox鍦ㄥ瓨鍦ㄦ牱寮忚〃杩樺湪鍔犺浇鍜岃В鏋愭椂闃诲鎵€鏈夌殑鑴氭湰锛岃€孋hrome鍙湪褰撹剼鏈瘯鍥捐闂煇浜涘彲鑳借鏈姞杞界殑鏍峰紡琛ㄦ墍褰卞搷鐨勭壒瀹氱殑鏍峰紡灞炴€ф椂鎵嶉樆濉炶繖浜涜剼鏈€?/p>

銆€銆€鎵€浠ュ氨寰楀埌浜嗕笂闈㈢殑閭d釜缁撴灉

銆€銆€鐪嬬湅IE鐨勫鐞?/p>

銆€銆€鎶€鏈垎浜? src=

銆€銆€銆€

銆€銆€鍥炲綊姝i锛屾櫘閫氭祻瑙堝櫒闇€瑕佽幏鍙栦袱涓椂闂达細寮€濮嬫覆鏌撴椂闂?/strong>鍜?strong>澶撮儴璧勬簮鍔犺浇鏃堕棿锛?/strong>

銆€銆€寮€濮嬫覆鏌撴椂闂达細

銆€銆€闇€瑕佸€熷姪娴忚鍣ㄧ殑navigator timing灞炴€?span style="color: #ff0000;">performance锛泈indow.performance.timing锛圢avigation timing鎬ц兘鏃堕棿绾匡級 鐩稿叧灞炴€э細

// 鍦ㄥ悓涓€涓祻瑙堝櫒涓婁笅鏂囦腑锛屽墠涓€涓綉椤碉紙涓庡綋鍓嶉〉闈笉涓€瀹氬悓鍩燂級unload 鐨勬椂闂存埑锛屽鏋滄棤鍓嶄竴涓綉椤?unload 锛屽垯涓?fetchStart 鍊肩浉绛?/span>
navigationStart: 1441112691935,
 
// 鍓嶄竴涓綉椤碉紙涓庡綋鍓嶉〉闈㈠悓鍩燂級unload 鐨勬椂闂存埑锛屽鏋滄棤鍓嶄竴涓綉椤?unload 鎴栬€呭墠涓€涓綉椤典笌褰撳墠椤甸潰涓嶅悓鍩燂紝鍒欏€间负 0
unloadEventStart: 0,
unloadEventEnd: 0,
 
// 绗竴涓?HTTP 閲嶅畾鍚戝彂鐢熸椂鐨勬椂闂淬€傛湁璺宠浆涓旀槸鍚屽煙鍚嶅唴鐨勯噸瀹氬悜鎵嶇畻锛屽惁鍒欏€间负 0 
redirectStart: 0,
redirectEnd: 0,
 ...
 // 寮€濮嬭В鏋愭覆鏌?DOM 鏍戠殑鏃堕棿锛屾鏃?Document.readyState 鍙樹负 loading锛屽苟灏嗘姏鍑?readystatechange 鐩稿叧浜嬩欢
domLoading: 1441112692690,
 ...

銆€銆€

var timing = performance.timing;

var loadingTime = timing .domLoading - timing.navigationStart;//寮€濮嬫覆鏌撴椂闂?/span>

 銆€銆€鐪嬩竴涓媙avigator timing娴忚鍣ㄦ敮鎸佹儏鍐?/p>

銆€銆€鎶€鏈垎浜? src=

銆€銆€瀵逛簬IE绛変綆鐗堟湰娴忚鍣ㄦ槸涓嶈鐨勩€?/p>

銆€銆€IE8 绛変綆鐗堟湰娴忚鍣?閫氳繃 cookie 璁板綍鏃堕棿鎴崇殑鏂瑰紡鏉ョ粺璁★紝闇€瑕佹敞鎰忕殑鏄?Cookie 鏂瑰紡鍙兘缁熻鍒扮珯鍐呰烦杞殑鏁版嵁銆?棣栨杩涘叆娌℃湁濂界殑缁熻鏂规硶銆?/p>

 銆€銆€

銆€銆€澶撮儴璧勬簮鍔犺浇鏃堕棿锛?/strong> 

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8"/>
    <script>
      var start_time = +new Date; //娴嬭瘯鏃堕棿璧风偣锛屽疄闄呯粺璁¤捣鐐逛负 DNS 鏌ヨ
    </script>
    <!-- 3s 鍚庤繖涓?js 鎵嶄細杩斿洖 -->
    <script src="script.php"></script>  
    <script>
      var end_time = +new Date; //鏃堕棿缁堢偣
      var headtime = end_time - start_time; //澶撮儴璧勬簮鍔犺浇鏃堕棿    
      console.log(headtime);
    </script>
    </head> 
    <body>     
    <p>鍦ㄥご閮ㄨ祫婧愬姞杞藉畬涔嬪墠椤甸潰灏嗘槸鐧藉睆</p>
    <p>script.php 琚ā鎷熻缃?3s 鍚庤繑鍥烇紝head 搴曢儴鍐呭祵 JS 绛夊緟鍓嶉潰 js 杩斿洖鍚庢墠鎵ц</p>
    <p>script.php 鏇挎崲鎴愪竴涓墽琛岄暱鏃堕棿寰幆鐨?js 鏁堟灉涔熶竴鏍?span style="color: #0000ff;"></p>  
    </body>
</html>

 銆€銆€杩欎釜姣旇緝绠€鍗曪紝鍦╤ead鐨勫墠闈㈣鏃跺紑濮嬶紝鍦╤ead鏈€鏈熬璁℃椂缁撴潫锛屼腑闂寸殑宸€煎氨璁$畻涓哄ご閮ㄨ祫婧愬姞杞芥椂闂淬€?/p>

銆€銆€鎵€浠ワ紝鏈€缁堣绠楁柟娉?

var firstPaintTime = end_time - performance.timing.navigationStart

  

 2.2棣栧睆鏃堕棿

銆€銆€棣栧睆鏃堕棿鐨勭粺璁℃瘮杈冨鏉傦紝鍥犱负娑夊強鍥剧墖绛夊绉嶅厓绱犲強寮傛娓叉煋绛夋柟寮忋€傝瀵熷姞杞借鍥惧彲鍙戠幇锛屽奖鍝嶉灞忕殑涓昏鍥犵礌鐨勫浘鐗囩殑鍔犺浇銆傞€氳繃缁熻棣栧睆鍐呭浘鐗囩殑鍔犺浇鏃堕棿渚垮彲浠ヨ幏鍙栭灞忔覆鏌撳畬鎴愮殑鏃堕棿銆傜粺璁℃祦绋嬪涓嬶細

銆€銆€棣栧睆浣嶇疆璋冪敤 API 寮€濮嬬粺璁?-> 缁戝畾棣栧睆鍐呮墍鏈夊浘鐗囩殑 load 浜嬩欢 -> 椤甸潰鍔犺浇瀹屽悗鍒ゆ柇鍥剧墖鏄惁鍦ㄩ灞忓唴锛屾壘鍑哄姞杞芥渶鎱㈢殑涓€寮?-> 棣栧睆鏃堕棿

銆€銆€杩欐槸鍚屾鍔犺浇鎯呭喌涓嬬殑绠€鍗曠粺璁¢€昏緫锛屽彟澶栭渶瑕佹敞鎰忕殑鍑犵偣锛?/p>

  • 椤甸潰瀛樺湪 iframe 鐨勬儏鍐典笅涔熼渶瑕佸垽鏂姞杞芥椂闂?/li>
  • gif 鍥剧墖鍦?IE 涓婂彲鑳介噸澶嶈Е鍙?load 浜嬩欢闇€鎺掗櫎
  • 寮傛娓叉煋鐨勬儏鍐典笅搴斿湪寮傛鑾峰彇鏁版嵁鎻掑叆涔嬪悗鍐嶈绠楅灞?/li>
  • css 閲嶈鑳屾櫙鍥剧墖鍙互閫氳繃 JS 璇锋眰鍥剧墖 url 鏉ョ粺璁?娴忚鍣ㄤ笉浼氶噸澶嶅姞杞?
  • 娌℃湁鍥剧墖鍒欎互缁熻 JS 鎵ц鏃堕棿涓洪灞忥紝鍗宠涓烘枃瀛楀嚭鐜版椂闂?/li>
//IE gif閲嶅onload瑙e喅
var img=new Image(); 
img.load=function(){ 
//do something 
img.load=null;//閲嶆柊璧嬪€间负null 
} 
img.src=鈥?times;×.gif鈥?

 銆€銆€

銆€銆€缁熻鏂规硶1:

銆€銆€鍘熺悊锛氬湪棣栧睆娓叉煋涔嬪墠鍩嬩笂澶勭悊閫昏緫锛屼娇鐢ㄥ畾鏃跺櫒涓嶆柇鐨勫幓妫€娴媔mg鑺傜偣鐨勫浘鐗囥€傚垽鏂浘鐗囨槸鍚﹀湪棣栧睆鍜屽姞杞藉畬鎴愶紝鎵惧埌棣栧睆涓姞杞芥椂闂存渶鎱㈢殑鐨勫浘鐗囧畬鎴愮殑鏃堕棿锛屼粠鑰岃绠楀嚭棣栧睆鏃堕棿銆傚鏋滈灞忔湁娌℃湁鍥剧墖锛屽鏋滄病鍥剧墖灏辩敤domready鏃堕棿銆?/p>

銆€銆€缂虹偣锛?1.娴忚鍣ㄥ畾鏃跺櫒鏈€澶х簿搴︿负55ms 2.鑳屾櫙鍥剧墖鍔犺浇娌℃湁璁$畻鍦ㄥ唴 3.涓嶆柇妫€娴嬪苟鎵ц鐨勮剼鏈€楁椂

鎶€鏈垎浜? id=
//1,鑾峰彇棣栧睆鍩虹嚎楂樺害
//2,璁$畻鍑哄熀绾縟om鍏冪礌涔嬩笂鐨勬墍鏈夊浘鐗囧厓绱?/span>
//3,鎵€鏈夊浘鐗噊nload涔嬪悗涓洪灞忔樉绀烘椂闂?/span>
  function getOffsetTop(ele) {
    var offsetTop = ele.offsetTop;
    if (ele.offsetParent !== null) {
      offsetTop += getOffsetTop(ele.offsetParent);
    }
    return offsetTop;
  }
  var firstScreenHeight = win.screen.height;
  var firstScreenImgs = [];
  var isFindLastImg = false;
  var allImgLoaded = false;
  var t = setInterval(function() {
    var i, img;
    if (isFindLastImg) {
      if (firstScreenImgs.length) {
        for (i = 0; i < firstScreenImgs.length; i++) {
          img = firstScreenImgs[i];
          if (!img.complete) {
            allImgLoaded = false;
            break;
          } else {
            allImgLoaded = true;
          }
        }
      } else {
        allImgLoaded = true;
      }
      if (allImgLoaded) {
        collect.add({
          firstScreenLoaded: startTime - Date.now()
        });
        clearInterval(t);
      }
    } else {
      var imgs = body.querySelector(鈥榠mg鈥?span style="color: #000000;">);
      for (i = 0; i < imgs.length; i++) {
        img = imgs[i];
        var imgOffsetTop = getOffsetTop(img);
        if (imgOffsetTop > firstScreenHeight) {
          isFindLastImg = true;
          break;
        } else if (imgOffsetTop <= firstScreenHeight 
           && !img.hasPushed) {
          img.hasPushed = 1;
          firstScreenImgs.push(img);
        }
      }
    }
  }, 0);

  doc.addEventListener(鈥楧OMContentLoaded鈥? function() {
    var imgs = body.querySelector(鈥榠mg鈥?span style="color: #000000;">);
    if (!imgs.length) {
      isFindLastImg = true;
    }
  });

  win.addEventListener(鈥榣oad鈥? function() {
    allImgLoaded = true;
    isFindLastImg = true;
    if (t) {
      clearInterval(t);
    }
    collect.log(collect.global);
  });
View Code

 銆€銆€

銆€銆€缁熻鏂规硶2锛?/strong>

銆€銆€鍘熺悊锛氬浜庣綉椤甸珮搴﹀皬浜庡睆骞曠殑缃戠珯鏉ヨ锛屽彧瑕佸湪椤甸潰搴曢儴鍔犱笂鑴氭湰鎵撳嵃褰撳墠鏃堕棿鍗冲彲锛涙垨鑰呭浜庣綉椤甸珮搴﹀ぇ浜庝竴灞忕殑缃戦〉鏉ヨ锛屽彧瑕佸湪浼扮畻鎺ヨ繎浜庝竴灞忓箷鐨勫厓绱犵殑浣嶇疆鍚庯紝鎵撳嵃涓€涓嬪綋鍓嶆椂闂淬€傚綋鐒惰繖涓椂闂磋寰楁妸棣栧睆涓墍鏈夊浘鐗囩殑鍔犺浇鏃堕棿涔熺畻涓娿€?/p>

銆€銆€缂虹偣锛?1.闇€瑕佹瘡涓〉闈㈡墜鍔ㄥ姞鍏ュ埌瀵瑰簲浣嶇疆 2.鑳屾櫙鍥剧墖鍔犺浇娌℃湁璁$畻鍦ㄥ唴

鎶€鏈垎浜? id=
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
        <script type="text/javascript">
            window.logInfo = {};
            window.logInfo.openTime = performance.timing.navigationStart;
        </script>
    </head>
    <body>
        <div>杩欐槸绗竴灞忥紝杩欐槸绗竴灞?lt;/div>
        <img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png">
        <img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png">
        <img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png">
        <img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png">
        <div>绗竴灞忕粨灏撅紝绗竴灞忕粨灏?lt;/div>
        <script type="text/javascript">
            (function logFirstScreen() {
                var images = document.getElementsByTagName(鈥榠mg鈥?span style="color: #000000;">);
                var iLen = images.length;
                var curMax = 0;
                var inScreenLen = 0;
                // 鍥剧墖鐨勫姞杞藉洖璋?/span>
                function imageBack() {
                    this.removeEventListener
                    && this.removeEventListener(鈥榣oad鈥? imageBack, !1);
                    if (++curMax === inScreenLen) {
                        // 濡傛灉鎵€鏈夊湪棣栧睆鐨勫浘鐗囧潎宸插姞杞藉畬鎴愪簡鐨勮瘽锛屽彂閫佹棩蹇?/span>
                        log();
                    }   
                } 
                // 瀵逛簬鎵€鏈夌殑浣嶄簬鎸囧畾鍖哄煙鐨勫浘鐗囷紝缁戝畾鍥炶皟浜嬩欢
                for (var s = 0; s < iLen; s++) {
                    var img = images[s];
                    var offset = {
                        top: 0
                    };
                    var curImg = img;
                    while (curImg.offsetParent) {
                        offset.top += curImg.offsetTop;
                        curImg = curImg.offsetParent;
                    }
                    // 鍒ゆ柇鍥剧墖鍦ㄤ笉鍦ㄩ灞?/span>
                    if (document.documentElement.clientHeight < offset.top) {
                        continue;
                    }
                    // 鍥剧墖杩樻病鏈夊姞杞藉畬鎴愮殑璇?/span>
                    if (!img.complete) {
                        inScreenLen++;
                        img.addEventListener(鈥榣oad鈥? imageBack, !1);
                    }
                }
                // 濡傛灉棣栧睆娌℃湁鍥剧墖鐨勮瘽锛岀洿鎺ュ彂閫佹棩蹇?/span>
                if (inScreenLen === 0) {
                    log();
                }
                // 鍙戦€佹棩蹇楄繘琛岀粺璁?/span>
                function log () {
                    window.logInfo.firstScreen = +new Date() - window.logInfo.openTime;
                    console.log(鈥橀灞忔椂闂达細鈥? window.logInfo.firstScreen + 鈥榤s鈥?span style="color: #000000;">);
                }
            })();
        </script>
        <img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png">
        <img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png">
    </body>
</html>
View Code

  

2.3缁熻鐢ㄦ埛鍙搷浣?/h3>

銆€銆€鐢ㄦ埛鍙搷浣滀负鎵€鏈塂OM閮借В鏋愬畬姣曠殑鏃堕棿锛岄粯璁ゅ彲浠ョ粺璁?strong>domready鏃堕棿锛屽洜涓洪€氬父浼氬湪杩欐椂鍊欑粦瀹氫簨浠舵搷浣溿€傚浜庝娇鐢ㄤ簡妯″潡鍖栧紓姝ュ姞杞界殑 JS 鍙互鍦ㄤ唬鐮佷腑鍘讳富鍔ㄦ爣璁伴噸瑕?JS 鐨勫姞杞芥椂闂达紝杩欎篃鏄骇鍝佹寚鏍囩殑缁熻鏂瑰紡銆?/p>

銆€銆€浣跨敤jquery涓殑$(document).ready()鍗虫槸姝ゆ剰涔?window.performance.timing.domInteractive window.performance.timing.domContentLoadedEventStart

銆€銆€璁$畻鍏紡锛?/strong>

performance.timing.domInteractive - performance.timing.navigationStart

  

2.4鎬讳笅杞芥椂闂?/strong>

銆€銆€榛樿鍙互缁熻onload鏃堕棿锛岃繖鏍峰彲浠ョ粺璁″悓姝ュ姞杞界殑璧勬簮鍏ㄩ儴鍔犺浇瀹岀殑鑰楁椂銆傚鏋滈〉闈腑瀛樺湪寰堝寮傛娓叉煋锛屽彲浠ュ皢寮傛娓叉煋鍏ㄩ儴瀹屾垚鐨勬椂闂翠綔涓烘€讳笅杞芥椂闂淬€?/p>

銆€銆€璁$畻鍏紡锛?/strong>

performance.timing.loadEventStart- performance.timing.navigationStart

 銆€銆€

2.5缁熻api鐩稿叧

鐗囨鎽樿嚜锛?a href="http://www.open-open.com/lib/view/open1414631044559.html" target="_blank">缇庡洟鎬ц兘鍒嗘瀽妗嗘灦鍜屾€ц兘鐩戞帶骞冲彴锛屽苟鍔犲叆閮ㄥ垎鍏朵粬鏂囧瓧

瀵逛簬缁熻鑴氭湰锛岄渶瑕佹弧瓒充袱涓潯浠讹細

  • 閬垮厤瀵逛笟鍔′唬鐮佺殑鍏ヤ镜锛涳紙鐙珛鐨勮剼鏈級
  • 涓嶅奖鍝嶈娴嬮噺鐨勯〉闈㈢殑鎬ц兘锛涳紙涓绘枃妗e姞杞藉畬姣曚箣鍚庯紝鍐嶆敞鍏ョ粺璁¤剼鏈敹闆嗘暟鎹紝骞朵笖灏藉彲鑳界殑鍚堝苟鏁版嵁璇锋眰锛屽噺灏戝甫瀹芥秷鑰椼€傦級

纭畾浜嗘暟鎹粺璁¤剼鏈殑绾︽潫鏉′欢涔嬪悗锛屾垜浠粠鍝噷寰楀埌杩欎簺鏁版嵁鍛紵鐩墠浣跨敤鐨勪富瑕侀€斿緞鏈夛細

  • 涓绘枃妗e姞杞介€熷害锛屽埄鐢?Navigation Timing API 鍙栧緱锛?/li>

銆€銆€鎶€鏈垎浜? src=

銆€銆€鎶€鏈垎浜? src=

  • 闈欐€佽祫婧愬姞杞介€熷害锛屽埄鐢?Resource Timing API 鍙栧緱锛?/li>

銆€銆€鎶€鏈垎浜? src=

  • 棣栨娓叉煋閫熷害锛孖E 涓嬬敤 msFirstPaint(window.performance.timing.msFirstPaint) 鍙栧緱锛孋hrome 涓嬪埄鐢?loadTimes(window.chrome.loadTimes()) 鍙栧緱锛屾垜浠殑 Chrome 娴忚鍣ㄧ敤鎴峰崰姣旇秴杩?70%锛?/li>
  • 鏂囨。鐢熸垚閫熷害锛屽垯鏄湪鍚庣搴旂敤鍐呮墦鐐规潵鑾峰緱锛?/li>

瀵逛簬涓绘枃妗e姞杞介€熷害锛屾垜浠粠瀹忚鍒板井瑙傜殑鍋氫簡杩欐牱鐨勫垎瑙o紝浠庝笂鍒颁笅鐨勬椂闂存祦锛屽彸杈圭殑鏃跺埢鏍囪浜嗘瘡涓寚鏍囦粠鍝噷寮€濮嬭绠楀埌鍝噷鎴锛屾瘮濡傦紝璺宠浆鏃堕棿 redirect 鐢?nbsp;redirectEnd - redirectStart 璁$畻寰楀埌锛屽叾浠栫殑绫绘帹锛?/p>

銆€銆€鎶€鏈垎浜? src=

 閲囬泦涓绘枃妗e姞杞介€熷害鐨勫叿浣撳仛娉曟槸锛?/p>

  • 鍦ㄤ富鏂囨。 load 涔嬪墠鎻愪緵鍙紦瀛樻暟鎹殑鎺ュ彛锛屾柟渚垮湪缁熻鑴氭湰杞藉叆鍓嶅氨鍙互鍑嗗鏁版嵁锛?/li>
  • 鍦ㄤ富鏂囨。 load 涔嬪悗娉ㄥ叆鏁版嵁鏀堕泦鑴氭湰锛岃鑴氭湰鍔犺浇瀹屾垚涔嬪悗浼氬鐞嗘墍鏈夌殑鏁版嵁锛?/li>
  • 鍒╃敤 Navigation Timing API 鏀堕泦璁$畻寰楀埌涓婂浘涓殑鎸囨爣锛?/li>
  • 缁欐墍鏈夋暟鎹墦涓婇〉闈€佸湴鐞嗕綅缃€佹祻瑙堝櫒绛夋爣绛撅紝鏂逛究鏇寸粏缁村害鐨勫垎鏋愶紱

瀵逛簬闈欐€佽祫婧愮殑鍔犺浇閫熷害锛屾垜浠篃鍋氫簡绫讳技鐨勫垎瑙e拰閲囬泦(浣跨敤resource timing API)锛?/p>

銆€銆€鎶€鏈垎浜? src=

闇€瑕佺壒鍒彁绀虹殑鏄紝濡傛灉浣犱娇鐢?CDN 鐨勮瘽锛岄渶瑕佽 CDN 鏈嶅姟鍟嗗姞涓?Timing-Allow-Origin 鐨勫搷搴斿ご锛屾墠鑳芥嬁鍒伴潤鎬佽祫婧愮殑鏁版嵁銆?/p>

鑰屽浜庝富鏂囨。鐢熸垚閫熷害锛屾垜浠垯寮€鍙戜簡鎬ц兘缁熻鐨?Library锛屽湪妗嗘灦绾у埆闆嗘垚鍚庣鎬ц兘鐨勬椂闂存寚鏍囥€?/p>

  • High Resolution Timing锛堥珮绮惧害璁℃椂锛?/li>

璇PI瑙勮寖鎵€瀹氫箟鐨凧avaScript鎺ュ彛鑳藉鎻愪緵绮剧‘鍒板井绉掔骇鐨勫綋鍓嶆椂闂达紝骞朵笖涓嶄細鍙楀埌绯荤粺鏃堕挓鍋忓樊鎴栬皟鏁寸殑褰卞搷銆傚浜庢€ц兘鍒嗘瀽鏉ヨ锛岀簿纭殑娴嬮噺缁撴灉鎰忎箟閲嶅ぇ銆?/p>

var perf = performance.now();
// console output 439985.4570000316
  • Page Visibility 锛堥〉闈㈠彲瑙佹€э級

閫氳繃杩欎竴瑙勮寖锛岀綉绔欏紑鍙戣€呰兘澶熶互缂栫▼鏂瑰紡纭畾椤甸潰鐨勫綋鍓嶅彲瑙佺姸鎬侊紝浠庤€屼娇缃戠珯鑳藉鏇存湁鏁堝湴鍒╃敤鐢垫簮涓嶤PU銆?/p>

褰撻〉闈㈣幏寰楁垨澶卞幓鐒︾偣鏃讹紝鏂囨。瀵硅薄鐨剉isibilitychange浜嬩欢渚夸細琚Е鍙戙€?/p>

document.addEventListener(鈥榲isibilitychange鈥? function(event){if(document.hidden){// Page currently hidden.}else{// Page currently visible.}});
杩欎竴浜嬩欢瀵逛簬浜嗚В椤甸潰鐨勫彲瑙佺姸鎬佸崄鍒嗘湁鐢紝涓句緥鏉ヨ锛岀敤鎴峰彲鑳戒細鍚屾椂鎵撳紑澶氫釜娴忚鍣ㄦ爣绛撅紝鑰屼綘甯屾湜鍙湪鐢ㄦ埛鏄剧ず浣犵殑缃戠珯椤甸潰鏃舵墠杩涜鏌愪簺鎿嶄綔锛堟瘮濡傛挱鏀句竴娈甸煶棰戞枃浠躲€佹垨鏄墽琛屼竴娈礘avaScript鍔ㄧ敾锛夛紝灏卞彲浠ラ€氳繃杩欎竴浜嬩欢杩涜瑙﹀彂銆傚浜庣Щ鍔ㄨ澶囨潵璇达紝濡傛灉鐢ㄦ埛鍦ㄦ煇涓爣绛句腑鎵撳紑浜嗕綘鐨勭綉绔欙紝浣嗘鍦ㄥ彟涓€涓爣绛句腑娴忚鍏跺畠鍐呭鏃讹紝杩欎竴鐗规€ц兘澶熻妭鐪佽璁惧鐨勭數姹犳秷鑰椼€傦紙铏界劧瀵逛簬浣犵殑缃戠珯鎬ц兘鏉ヨ鎰忎箟涓嶅ぇ……锛?/span>

鍏跺畠閮ㄥ垎API鍔熻兘绠€浠?/h4>
  • Resource Timing锛堣祫婧愯鏃讹級——瀵瑰崟涓祫婧愶紙濡傚浘鐗囷級鐨勮鏃讹紝鍙互瀵圭粏绮掑害鐨勭敤鎴蜂綋楠岃繘琛屾娴嬨€?/li>
  • Performance Timeline锛堟€ц兘鏃堕棿绾匡級——浠ヤ竴涓粺涓€鐨勬帴鍙h幏鍙栫敱Navigation Timing銆丷esourcing Timing鍜孶ser Timing鎵€鏀堕泦鐨勬€ц兘鏁版嵁銆?/li>
  • Battery Status锛堢數姹犵姸鎬侊級——鑳藉妫€娴嬪綋鍓嶈澶囩殑鐢垫睜鐘舵€侊紝渚嬪鏄惁姝e湪鍏呯數銆佺數閲忕瓑绾х瓑绛夈€傚彲浠ユ牴鎹綋鍓嶇數閲忓喅瀹氭槸鍚︽樉绀烘煇浜涘唴瀹癸紙渚嬪瑙嗛銆佸姩鐢荤瓑绛夛級锛屽浜庣Щ鍔ㄨ澶囨潵璇撮潪甯稿疄鐢ㄣ€?/li>
  • User Timing锛堢敤鎴疯鏃讹級——鍙互瀵规煇娈典唬鐮併€佸嚱鏁拌繘琛岃嚜瀹氫箟璁℃椂锛屼互浜嗚В杩欐浠g爜鐨勫叿浣撹繍琛屾椂闂达紝绫讳技浜巗top watch鐨勪綔鐢ㄣ€?/li>
  • Beacon锛堢伅濉旓級——鍙互灏嗗垎鏋愮粨鏋滄垨璇婃柇浠g爜鍙戦€佺粰鏈嶅姟鍣紝瀹冮噰鐢ㄤ簡寮傛鎵ц鐨勬柟寮忥紝鍥犳涓嶄細褰卞搷椤甸潰涓叾瀹冧唬鐮佺殑杩愯銆傚浜庢敹闆嗘祴璇曠粨鏋滃苟杩涜缁熻鍒嗘瀽鏉ヨ鏄竴绉嶅崄鍒嗕究鍒╃殑宸ュ叿銆?/li>
  • Animation Timing锛堝姩鐢昏鏃讹級 - 閫氳繃requestAnimationFrame鍑芥暟璁╂祻瑙堝櫒绮鹃€氬湴鎺у埗鍔ㄧ敾鐨勫抚鏁帮紝鑳藉鏈夋晥鍦伴厤鍚堟樉绀哄櫒鐨勫埛鏂扮巼锛屾彁渚涙洿骞虫粦鐨勫姩鐢绘晥鏋滐紝鍑忓皯瀵笴PU鍜岀數姹犵殑娑堣€椼€?/li>
  • Resource Hits锛堣祫婧愭彁绀猴級 - 閫氳繃html灞炴€ф寚瀹氳祫婧愮殑棰勫姞杞斤紝渚嬪鍦ㄦ祻瑙堢浉鍐屾椂鑳藉棰勫厛鍔犺浇涓嬩竴寮犲浘鐗囷紝鍔犲揩缈婚〉鐨勬樉绀洪€熷害銆?/li>
  • Frame Timing锛堝抚璁℃椂锛?mdash;—閫氳繃涓€涓帴鍙h幏鍙栦笌甯х浉鍏崇殑鎬ц兘鏁版嵁锛屼緥濡傛瘡绉掑抚鏁板拰TTF銆傝鏍囧噯鐩墠灏氭湭琚敮鎸併€?/li>
  • Navigation Error Logging锛堝鑸敊璇棩蹇楄褰曪級——閫氳繃涓€涓帴鍙e瓨鍌ㄥ強鑾峰彇涓庢煇涓枃妗g殑瀵艰埅鐩稿叧鐨勯敊璇褰曘€傝鏍囧噯鐩墠灏氭湭琚敮鎸併€?/li>

 

娴忚鍣ㄦ敮鎸?/strong>

涓嬭〃鍒椾妇浜嗗綋鍓嶄富娴佹祻瑙堝櫒瀵规€ц兘API鐨勬敮鎸侊紝鍏朵腑鏍囨敞鏄熷彿鐨勫唴瀹瑰苟闈炴潵鑷簬Web鎬ц兘宸ヤ綔灏忕粍銆?/p>

瑙勮寖 Internet Explorer Firefox Chrome Safari Opera ios Safari android
Navigation Timing 9 31 鍏ㄩ儴 8 26 8 (涓嶅寘鎷?8.1) 4.1
High Resolution Timing 10 31 鍏ㄩ儴 8 26 8 (涓嶅寘鎷?8.1) 4.4
Page Visibility 10 31 鍏ㄩ儴 7 26 7.1 4.4
Resource Timing 10 34 鍏ㄩ儴 - 26 - 4.4
Battery Status* - 31 锛堥儴鍒嗘敮鎸侊級 38 - 26 - -
User Timing 10 - 鍏ㄩ儴 - 26 - 4.4
Beacon - 31 39 - 26 - -
Animation Timing 10 31 鍏ㄩ儴 6.1 26 7.1 4.4
Resource Hints - - 浠呴檺Canary鐗?/td> - - - -
Frame Timing - - - - - - -
Navigation Error Logging - - - - - - -
WebP* - - 鍏ㄩ儴 - 26 - 4.1
Picture element and srcset attribute * - - 38 - 26 - -

鍏跺畠

DZone.com鍦ㄣ€奝erformance & Monitoring 2015銆嬭繖浠界櫧鐨功涓笓闂ㄤ粙缁嶄簡鎬ц兘API浠ュ強W3C鎵€鎺ㄨ崘鐨勬柊鍗忚銆佹爣鍑嗗強HTML鍏冪礌锛屽苟鎻愪緵浜嗙畝鍗曠殑绀轰緥銆傚彲浠ュ湪杩欓噷涓嬭浇瀹屾暣鐨勭櫧鐨功锛堥渶瑕佹敞鍐岋級銆傛湰鏂囦腑鐨勭ず渚嬩唬鐮佸嵆鏉ヨ嚜浜庤鐧界毊涔︺€?/p>

濡傛灉鎯充簡瑙f湁鍏砏eb鎬ц兘API鐨勬洿澶氬唴瀹癸紝鍙互鍙傝€?a href="https://www.w3.org/wiki/Web_Performance/Publications">W3C瀹樻柟鏂囨。鎴栬繖绡?a href="https://blogs.msdn.com/b/ie/archive/2013/05/21/web-performance-apis-rapidly-become-w3c-recommendations.aspx">鍗氬銆?/p>

 

2.6 鎬ц兘浼樺寲鍒嗕负涓や釜闃舵鏉ュ仛

銆€銆€1.浣跨敤娴嬭瘯宸ュ叿鑷祴鍜屼紭鍖栵紙宸ュ叿濡倅Slow/,绾夸笂宸ュ叿www.webpagetest.org銆侀樋閲屾祴銆?a href="https://gtmetrix.com/" target="_blank">gtmetrix锛?/strong>

銆€銆€ySlow/ShowSlow锛歨ttp://www.showslow.com/ 銆愬墠绔€ц兘鐩戞帶绯荤粺锛屽墠绔€ц兘鎸囨爣鏁版嵁灞曠ず锛屾棤娉曞疄鐜拌嚜鍔ㄥ寲鐩戞帶鐢ㄦ埛鐪熷疄鐨勫簲鐢ㄥ満鏅紝閽堝绉诲姩绔殑鎬ц兘鐩戞帶锛岀洰鍓嶇敱浜庡叾鏈韩渚濊禆鐨勫伐鍏风粷澶у鏁板彧鏈塒C绔紝鍦ㄧЩ鍔ㄧ缂轰箯鐩稿簲鐨勬暟鎹笂鎶ュ伐鍏凤紙鐗瑰埆鏄Щ鍔ㄧ鏈韩澶嶆潅鐨勭綉缁滅幆澧冿級锛屾墍浠ュ鏋滄兂浣跨敤ShowSlow浣滀负鍓嶇鎬ц兘鐩戞帶骞冲彴锛岄渶瑕佸崟鐙疄鐜版暟鎹敹闆嗙郴缁燂紝鑰屽彧鏄皢ShowSlow褰撲綔灞曠ず绯荤粺浣跨敤,寮€婧愩€?/p>

銆€銆€Page Speed: 銆愬熀浜庝竴绯诲垪浼樺寲瑙勫垯瀵圭綉绔欒繘琛屾娴嬶紝绫讳技鐨勬湁Yslow锛堟帹鑽愪娇鐢╤ttps://gtmetrix.com/鏉ユ娴嬬綉绔欐€ц兘鍜岃鍒欙紝浣跨敤涓嶅悓鐨勫伐鍏锋娴嬪姣旓級 銆戙€€銆€

銆€銆€闃块噷娴嬶細鍩轰簬WebPageTest锛岀綉椤靛墠绔€ц兘娴嬭瘯宸ュ叿;銆€銆€

銆€銆€PhantomJS锛氳嚜鍔ㄥ寲鐩戞祴锛屾ā鎷烶hantom JS 鏄竴涓湇鍔″櫒绔殑 JavaScript API 鐨?WebKit锛屽熀浜庡畠鍙互杞绘澗瀹炵幇 web 鑷姩鍖栨祴璇曘€傜被浼肩殑鏈塨erserkJS銆備絾鏄兘鏄湇鍔″櫒妯℃嫙娴嬭瘯锛屼笉鑳界洃鎺х敤鎴风湡瀹炵幆澧冦€?/p>

 

銆€銆€webpagetest绾夸笂鐗?/p>

銆€銆€鎶€鏈垎浜? src=

銆€銆€鎶€鏈垎浜? src=

銆€銆€鍩轰簬WebPagetest鐨勯樋閲屾祴锛堝凡涓嬬嚎锛屼笉涓句緥浜嗭紝涓?7娴?http://www.17ce.com/锛?/p>

銆€銆€缁煎悎浜唒agespeed鍜寉Slow鐨凣Tmetrix

鎶€鏈垎浜? src=

 

銆€銆€2.鍚敤绾夸笂鐩戞帶鐢ㄦ埛鐪熷疄鎯呭喌锛堝墠绔€ц兘鐩戞帶骞冲彴锛?/strong>

銆€銆€鐪嬪嚑涓緥瀛?/p>

銆€銆€閫忚瀹濓細http://www.toushibao.com/brower.html 銆愬墠绔€ц兘涓婃姤锛屽浘琛ㄥ睍绀猴紝鐩戞帶鐢ㄦ埛鐪熷疄鐨勫簲鐢ㄥ満鏅紝浠樿垂銆戙€€銆€

銆€銆€鎶€鏈垎浜? src=

 

銆€銆€鎶€鏈垎浜? src=

銆€銆€鎻愪緵浜嗘瘡涓€涓姹傜殑璇︾粏淇℃伅

銆€銆€鎶€鏈垎浜? src=

銆€銆€鎶€鏈垎浜? src=

銆€銆€鎶€鏈垎浜? src=

 

銆€銆€鍙互鎸夐€夋嫨鐨勫瓧娈垫帓搴忥紝閫氳繃杩囨护杩涜绫讳技鏁版嵁瀵规瘮锛屽彲浠ユ煡鐪嬫瘡涓€涓姹傜殑璇︾粏淇℃伅锛屼笉杩囨寜url鎼滅储璨屼技娌℃湁鐢?濡傛灉杩欎釜鏈夌敤鐨勮瘽閭e氨鍙互瀵瑰悓涓€涓〉闈㈠仛鏃堕棿鐨勫姣斻€?/p>

銆€銆€鎶€鏈垎浜? src=

銆€銆€

銆€銆€浼樼偣锛?

銆€銆€1.鏌辩姸鏃堕棿绾挎帓鍒?/p>

銆€銆€2.澶氫釜鎸囨爣鍚屾椂灞曠ず锛屼究浜庢瘮杈?/p>

銆€銆€缂虹偣锛?

銆€銆€1.缂哄皯閮ㄥ垎鍏抽敭鏃堕棿锛堢櫧灞忔椂闂?棣栧瓧鑺傛椂闂?HTML涓嬭浇瀹屾垚鏃堕棿+澶撮儴璧勬簮鍔犺浇鏃堕棿锛?/p>

銆€銆€2.鎬ц兘娌℃湁鎸夊湴鍖哄垎绫伙紝鍙傝€冧环鍊煎ぇ澶у噺灏?/p>

銆€銆€3.鍏嶈垂鐗堟湰鍙瓨鍌?澶?/p>

 

銆€銆€Browser Insight锛歨ttp://www.oneapm.com/bi/feature.html 銆愬墠绔€ц兘涓婃姤锛屽浘琛ㄥ睍绀猴紝鐩戞帶鐢ㄦ埛鐪熷疄鐨勫簲鐢ㄥ満鏅紝浠樿垂銆?/p>

銆€銆€鎶€鏈垎浜? src=

 

銆€銆€鎶€鏈垎浜? src=

銆€銆€鎶€鏈垎浜? src=

銆€銆€鎶€鏈垎浜? src=

銆€銆€

銆€銆€鎶€鏈垎浜? src=

銆€銆€瑕佹煡鐪嬫煇娆¤闂殑璇︽儏闇€瑕佸湪浜戝揩鐓т腑鎷嶇収锛屾ā鎷熻闂?/p>

銆€銆€鎶€鏈垎浜? src=

銆€銆€鎶€鏈垎浜? src=

 銆€銆€浼樼偣锛?

銆€銆€1.鎸囨爣榻愬叏

銆€銆€2.鎱㈠姞杞借拷韪墍鏈夎祫婧愬姞杞芥儏鍐?/p>

銆€銆€缂虹偣锛?

銆€銆€1.鍥涗釜鎬ц兘鎸囨爣娌℃湁鎸夊湴鍖哄垎绫荤殑鏁版嵁锛屽弬鑰冧环鍊煎ぇ澶у噺灏?/p>

 銆€銆€

銆€銆€mmtrix锛堟€ц兘榄旀柟锛夛細http://www.mmtrix.com/

銆€銆€鍏堢湅璇勬祴

銆€銆€http://www.7k7k.com WEB璇勬祴瀹炰緥锛氱粺璁℃暟鎹笉閿?/p>

銆€銆€鎶€鏈垎浜? src=

 

銆€銆€鎶€鏈垎浜? src=

銆€銆€鐪熷疄鐢ㄦ埛鎬ц兘鐩戞帶锛?/p>

銆€銆€鎶€鏈垎浜? src=

銆€銆€鎶€鏈垎浜? src=

銆€銆€鎶€鏈垎浜? src=

銆€銆€鎶€鏈垎浜? src=

銆€銆€浼樼偣锛?

銆€銆€1.鏀寔涓嶅悓鍦板煙鐨勫洓涓叧閿€ц兘鎸囨爣鐨勫睍绀?/p>

銆€銆€2.鏀寔灞曠ず涓嶅悓鍖洪棿鐨勬暟鎹瘮渚?/p>

銆€銆€缂虹偣锛?

銆€銆€1.涓嶆敮鎸乭ttps鍗忚

 

銆€銆€鐪嬩竴涓嬪浗澶栫殑鎬ц兘鐩戞帶缃戠珯 

銆€銆€鍏堢湅newrelic锛坮pm.newrelic.com锛夛紝娉ㄥ唽闇€瑕佽嚜宸变娇鐢ㄥ缃戜唬鐞?/p>

銆€銆€鎶€鏈垎浜? src=

銆€銆€鍜孫neAPM寰堝儚锛屽墠绔€ц兘鎸囨爣涓嶅叏銆傜敤鏉ョ洃鎺jax璇锋眰锛?js鎶ラ敊绛夎繕涓嶉敊锛屼絾鏄弧瓒充笉浜嗘垜鐨勯渶姹傘€?/p>

 

銆€銆€appdynamics锛坵ww.appdynamics.com锛?/p>

銆€銆€娉ㄥ唽灞呯劧鎵句笉鍒颁腑鍥?/p>

銆€銆€鎶€鏈垎浜? src=

銆€銆€闅忎究閫変簡涓€涓猚anmroon

銆€銆€鎶€鏈垎浜? src=

 銆€銆€鍜岄€忚瀹濆緢鍍忋€傚厤璐圭増鏈繚瀛樻椂闂存洿灏戯紝鍙湁24灏忔椂銆?/p>

 

 銆€銆€鎬荤殑鏉ヨ锛宮mtrix鍜孫neAPM鎸囨爣鏇村叏涓€浜涖€傝繕娌℃湁鐮旂┒浠栦滑鐨勭洃鎺т唬鐮侊紝涓嶇煡閬撶洃鎺х殑鎸囨爣姝g‘涓庡惁銆傚叕鍙哥殑鎬ц兘杩欏潡涔熷垰璧锋锛岀浼樼杩樻湁寰堝ぇ涓€娈佃窛绂伙紝灏卞啓鍒拌繖閲屼簡,甯屾湜瀵圭爺绌舵€ц兘鍒氳捣姝ョ殑绔ラ瀷鏈夌偣浣滅敤锛屼换鍔¤繕寰堥噸锛屽姞娌广€?/p>

 

銆€銆€濡傛灉瑙夊緱鏈枃涓嶉敊锛岃鐐瑰嚮鍙充笅鏂广€愭帹鑽愩€戯紒

銆€銆€

 

 

銆€

以上是关于鍓嶇鎬ц兘鐩戞帶的主要内容,如果未能解决你的问题,请参考以下文章

鎵嬫妸鎵嬫暀浣犱娇鐢?Prometheus 鐩戞帶 JVM

銆岀26璁层€?濡備綍鐩戞帶鍜岃瘖鏂?JVM 鍫嗗唴鍜屽澶栧唴瀛樹娇鐢紵|瀛︿範绗旇

iOS鎬ц兘娴嬭瘯瀹炴垬-instruments

Oracle IO鎬ц兘娴嬭瘯

linux绯荤粺IO鎬ц兘娴嬭瘯

鎬ц兘娴嬭瘯鐢ㄤ緥璁捐