¿ª·¢Ò»¸öÏÖ´ú»¯µÄ»¥ÁªÍøÍøÕ¾ÊÇÒ»ÏÔÓµÄÈÎÎñ£¬ÐèÒª¸÷ÖÖÖ°ÄܵÄÃÜÇкÏ×÷ÒÔÓ¦¶ÔÓû§ÈÕÐÂÔÂÒìµÄÐèÇ󡣯äÖУ¬ÍøÒ³µÄÐÔÄÜÖ±½Ó¾ö¶¨ÁËÓû§µÄÌåÑ飬¶øËæ×ÅÐÂÐͿͻ§¶Ëä¯ÀÀÉ豸µÄ³öÏÖÓëÍøÕ¾¹¦ÄܵÄÈÕÒæ¸´ÔÓ»¯£¬¶ÔÓÚÐÔÄܵÄרעҲ´ïµ½ÁËǰËùδÓеĸ߶ȡ£
´«Í³µÄÍøÕ¾ÐÔÄܼà²âͨ³£ÓÐÒÔϼ¸ÖÖ·½Ê½£º
½èÖú´«Í³µÄ¿ª·¢Õß¹¤¾ß²é¿´ÍøÂçÇëÇó£¬ÀýÈçä¯ÀÀÆ÷µÄF12¹¤¾ß¡¢Fiddler¡¢CharlesµÈµÈ¡£»ù±¾·½Ê½ÊÇͨ¹ý×·×ÙHTTPÇëÇóÓëÏìÓ¦µÄʱ¼ä£¬ÒÔͼÐεķ½Ê½ÁгöËùÓÐ×ÊÔ´µÄÏÂÔØÇé¿ö¡£ÕâÖÖ·½Ê½ÒÀÀµÓÚÈËΪ²Ù×÷£¬ÄÑÒÔʵÏÖÅúÁ¿²âÊÔÓëͳ¼Æ¡£
ʹÓÃÇÖÈëʽµÄJavaScript´úÂë¼ì²âDOMʼþµÄ·¢Éúʱ¼ä¡£ÀýÈçDOMContentLoadedºÍdocument.onreadystatechangeµÈµÈ¡£ÕâÖÖ·½Ê½»áÔÚÒ³ÃæÖÐÒýÈë¶îÍâµÄ´úÂ룬¼ÓÖØÁË¿ª·¢ÕßÓë²âÊÔÈËÔ±µÄ¸ºµ££¬»¹ÓпÉÄÜÒòΪ¼ì²â´úÂë±¾ÉíµÄDZÔÚÎÊÌâÓ°ÏìÒ³ÃæµÄÐÔÄÜ¡£
ʹÓõÚÈý·½µÄ·þÎñÓ빤¾ß£¬ÀýÈçWebPagetest¡¢PingdomµÈµÈ£¬ÕâЩ·þÎñͨ³£Äܹ»ÊµÏÖÔÚ²»Í¬ä¯ÀÀÆ÷ºÍ²»Í¬µØÓò½øÐвâÊÔ£¬²¢ÇÒΪÓû§ÌṩһЩÓÅ»¯½¨Òé¡£µ«Ä³Ð©·þÎñÐèÒªÅŶӵȴý£¬²¢ÇÒ¶à´Î²âÊÔ½á¹ûÖ®¼äÍùÍùÇø±ð½Ï´ó¡£µÚÒ»Ìõ·½Ê½µÄÎÊÌâҲͬÑù´æÔÚ¡£
³ý´ËÖ®Í⣬ÒÔÉϸ÷ÖÖ·½Ê½µÄ²âÁ¿Ö¸±ê¶¼±È½Ïµ¥Ò»£¬»ù±¾Ö»ÄÜÆðµ½¼ÆÊ±ºÍÁ÷Á¿¼ÆËãµÄ×÷Ó᣶ÔÓÚÆäËüһЩָ±ê£¬ÀýÈçµç³Ø×´Ì¬µÈÎÞÄÜΪÁ¦¡£²¢ÇÒÄÑÒÔʵÏÖ×Ô¶¯»¯£¬ÒÔ¼°ÔÚ³ÖÐø¼¯³ÉÁ÷³ÌÖÐͳ¼Æ²âÊÔ½á¹û¡£
W3C WebÐÔÄܹ¤×÷С×éÓë¸÷ä¯ÀÀÆ÷³§É̶¼ÒÑÈÏʶµ½ÐÔÄܶÔÓÚweb¿ª·¢µÄÖØÒªÐÔ£¬ÎªÁ˽â¾öµ±Ç°ÐÔÄܲâÊÔµÄÀ§ÄÑ£¬W3CÍÆ³öÁËÒ»Ì×ÐÔÄÜAPI±ê×¼£¬¸÷ÖÖä¯ÀÀÆ÷¶ÔÕâÌ×±ê×¼µÄÖ§³ÖÈç½ñÒ²Öð½¥³ÉÊìÆðÀ´¡£ÕâÌ×APIµÄÄ¿µÄÊǼò»¯¿ª·¢Õß¶ÔÍøÕ¾ÐÔÄܽøÐо«È··ÖÎöÓë¿ØÖÆµÄ¹ý³Ì£¬×îÖÕʵÏÖÐÔÄܵÄÌá¸ß¡£
ÆäÖл¹°üÀ¨ÁËһЩÐÂÐÒéÓëHTMLÔªËØµÄÌáÒ飬ĿµÄÊÇÈÃÄÚÈݵÄÕ¹ÏÖ¸ü¿ì¡¢¸ü¼ÓÓÅ»¯¡£
ÐÔÄÜAPIʾÀý
ÕûÌ×±ê×¼°üº¬ÁË10ÓàÖÖAPI£¬¸÷×ÔÕë¶ÔÐÔÄܼì²âµÄij¸ö·½Ã档ΪÁ˱£Ö¤ÕûÌ×±ê×¼µÄÖÊÁ¿Ó뻥²Ù×÷ÐÔ£¬W3C°´ÕÕ¹ßÀý¶ÔËüÃÇÓ¦ÓÃÁ˹淶³ÉÊì¶ÈÁ÷³Ì£¬ÕâЩAPI¸÷×Ô´¦ÓÚÁ÷³ÌµÄ²»Í¬½×¶Î¡£ÔÚÏÂͼÖпÉÒÔ¿´µ½ËüÃǵ±Ç°µÄ½øÕ¹£º

ÒÔϽ«Í¨¹ý¼òµ¥µÄʾÀý½éÉÜĿǰÒÑÊôÓÚW3CÍÆ¼ö±ê×¼£¨REC£©µÄÈý¸öAPI£º
Navigation Timing £¨µ¼º½¼ÆÊ±£©
Navigation Timing APIÄܹ»°ïÖúÍøÕ¾¿ª·¢Õß¼ì²âÕæÊµÓû§Êý¾Ý£¨RUM£©£¬ÀýÈç´ø¿í¡¢ÑÓ³Ù»òÖ÷Ò³µÄÕûÌåÒ³Ãæ¼ÓÔØÊ±¼ä¡£¿ª·¢Õß¿ÉÒÔÓÃÒÔÏÂJavaScript´úÂë¼ì²âÒ³ÃæµÄÐÔÄÜ£º
varpage = performance.timing,plt = page.loadEventStart - page.navigationStart,console.log(plt);
// Page load time (PTL) output for specific browser/user in ms |
ÐèҪעÒâµÄÊÇ£¬Navigation TimingµÄÄ¿µÄÊÇÓÃÓÚ·ÖÎöÒ³ÃæÕûÌåÐÔÄÜÖ¸±ê¡£Èç¹ûÒª»ñÈ¡¸ö±ð×ÊÔ´£¨ÀýÈçJS¡¢Í¼Æ¬£©µÄÐÔÄÜÖ¸±ê£¬ÇëʹÓÃResource
Timing API¡£
W3C¸Õ¸ÕÐû²¼ÁËNavigation Timing 2£¬Ëü½«Ìæ´ú֮ǰµÄ°æ±¾¡£
High Resolution Timing£¨¸ß¾«¶È¼ÆÊ±£©
¸ÃAPI¹æ·¶Ëù¶¨ÒåµÄJavaScript½Ó¿ÚÄܹ»Ìṩ¾«È·µ½Î¢Ãë¼¶µÄµ±Ç°Ê±¼ä£¬²¢ÇÒ²»»áÊܵ½ÏµÍ³Ê±ÖÓÆ«²î»òµ÷ÕûµÄÓ°Ïì¡£¶ÔÓÚÐÔÄÜ·ÖÎöÀ´Ëµ£¬¾«È·µÄ²âÁ¿½á¹ûÒâÒåÖØ´ó¡£
varperf = performance.now();// console output 439985.4570000316 |
Page Visibility £¨Ò³Ãæ¿É¼ûÐÔ£©
ͨ¹ýÕâÒ»¹æ·¶£¬ÍøÕ¾¿ª·¢ÕßÄܹ»ÒÔ±à³Ì·½Ê½È·¶¨Ò³ÃæµÄµ±Ç°¿É¼û״̬£¬´Ó¶øÊ¹ÍøÕ¾Äܹ»¸üÓÐЧµØÀûÓõçÔ´ÓëCPU¡£
µ±Ò³Ãæ»ñµÃ»òʧȥ½¹µãʱ£¬Îĵµ¶ÔÏóµÄvisibilitychangeʼþ±ã»á±»´¥·¢¡£
document.addEventListener('visibilitychange',
function(event){if(document.hidden){// Page currently hidden.}else{// Page currently visible.}}); |
Õâһʼþ¶ÔÓÚÁ˽âÒ³ÃæµÄ¿É¼û״̬ʮ·ÖÓÐÓ㬾ÙÀýÀ´Ëµ£¬Óû§¿ÉÄÜ»áͬʱ´ò¿ª¶à¸öä¯ÀÀÆ÷±êÇ©£¬¶øÄãÏ£ÍûÖ»ÔÚÓû§ÏÔʾÄãµÄÍøÕ¾Ò³ÃæÊ±²Å½øÐÐijЩ²Ù×÷£¨±ÈÈç²¥·ÅÒ»¶ÎÒôƵÎļþ¡¢»òÊÇÖ´ÐÐÒ»¶ÎJavaScript¶¯»£©£¬¾Í¿ÉÒÔͨ¹ýÕâһʼþ½øÐд¥·¢¡£
¶ÔÓÚÒÆ¶¯É豸À´Ëµ£¬Èç¹ûÓû§ÔÚij¸ö±êÇ©Öдò¿ªÁËÄãµÄÍøÕ¾£¬µ«ÕýÔÚÁíÒ»¸ö±êÇ©ÖÐä¯ÀÀÆäËüÄÚÈÝʱ£¬ÕâÒ»ÌØÐÔÄܹ»½ÚÊ¡¸ÃÉ豸µÄµç³ØÏûºÄ¡££¨ËäÈ»¶ÔÓÚÄãµÄÍøÕ¾ÐÔÄÜÀ´ËµÒâÒå²»´ó¡¡£©
ÆäËû²¿·ÖAPI¹¦Äܼò½é
Resource Timing£¨×ÊÔ´¼ÆÊ±£©¡ª¡ª¶Ôµ¥¸ö×ÊÔ´£¨ÈçͼƬ£©µÄ¼ÆÊ±£¬¿ÉÒÔ¶ÔϸÁ£¶ÈµÄÓû§ÌåÑé½øÐмì²â¡£
Performance Timeline£¨ÐÔÄÜʱ¼äÏߣ©¡ª¡ªÒÔÒ»¸öͳһµÄ½Ó¿Ú»ñÈ¡ÓÉNavigation
Timing¡¢Resourcing TimingºÍUser TimingËùÊÕ¼¯µÄÐÔÄÜÊý¾Ý¡£
Battery Status£¨µç³Ø×´Ì¬£©¡ª¡ªÄܹ»¼ì²âµ±Ç°É豸µÄµç³Ø×´Ì¬£¬ÀýÈçÊÇ·ñÕýÔÚ³äµç¡¢µçÁ¿µÈ¼¶µÈµÈ¡£¿ÉÒÔ¸ù¾Ýµ±Ç°µçÁ¿¾ö¶¨ÊÇ·ñÏÔʾijЩÄÚÈÝ£¨ÀýÈçÊÓÆµ¡¢¶¯»µÈµÈ£©£¬¶ÔÓÚÒÆ¶¯É豸À´Ëµ·Ç³£ÊµÓá£
User Timing£¨Óû§¼ÆÊ±£©¡ª¡ª¿ÉÒÔ¶Ôij¶Î´úÂë¡¢º¯Êý½øÐÐ×Ô¶¨Òå¼ÆÊ±£¬ÒÔÁ˽âÕâ¶Î´úÂëµÄ¾ßÌåÔËÐÐʱ¼ä£¬ÀàËÆÓÚstop
watchµÄ×÷Óá£
Beacon£¨µÆËþ£©¡ª¡ª¿ÉÒÔ½«·ÖÎö½á¹û»òÕï¶Ï´úÂë·¢Ë͸ø·þÎñÆ÷£¬Ëü²ÉÓÃÁËÒì²½Ö´Ðеķ½Ê½£¬Òò´Ë²»»áÓ°ÏìÒ³ÃæÖÐÆäËü´úÂëµÄÔËÐС£¶ÔÓÚÊÕ¼¯²âÊÔ½á¹û²¢½øÐÐͳ¼Æ·ÖÎöÀ´ËµÊÇÒ»ÖÖÊ®·Ö±ãÀûµÄ¹¤¾ß¡£
Animation Timing£¨¶¯»¼ÆÊ±£© - ͨ¹ýrequestAnimationFrameº¯ÊýÈÃä¯ÀÀÆ÷¾«Í¨µØ¿ØÖƶ¯»µÄÖ¡Êý£¬Äܹ»ÓÐЧµØÅäºÏÏÔʾÆ÷µÄË¢ÐÂÂÊ£¬Ìṩ¸üƽ»¬µÄ¶¯»Ð§¹û£¬¼õÉÙ¶ÔCPUºÍµç³ØµÄÏûºÄ¡£
Resource Hits£¨×ÊÔ´Ìáʾ£© - ͨ¹ýhtmlÊôÐÔÖ¸¶¨×ÊÔ´µÄÔ¤¼ÓÔØ£¬ÀýÈçÔÚä¯ÀÀÏà²áʱÄܹ»Ô¤ÏȼÓÔØÏÂÒ»ÕÅͼƬ£¬¼Ó¿ì·Ò³µÄÏÔʾËÙ¶È¡£
Frame Timing£¨Ö¡¼ÆÊ±£©¡ª¡ªÍ¨¹ýÒ»¸ö½Ó¿Ú»ñÈ¡ÓëÖ¡Ïà¹ØµÄÐÔÄÜÊý¾Ý£¬ÀýÈçÿÃëÖ¡ÊýºÍTTF¡£¸Ã±ê׼ĿǰÉÐδ±»Ö§³Ö¡£
Navigation Error Logging£¨µ¼º½´íÎóÈÕÖ¾¼Ç¼£©¡ª¡ªÍ¨¹ýÒ»¸ö½Ó¿Ú´æ´¢¼°»ñÈ¡Óëij¸öÎĵµµÄµ¼º½Ïà¹ØµÄ´íÎó¼Ç¼¡£¸Ã±ê׼ĿǰÉÐδ±»Ö§³Ö¡£ |