×÷Õß | ľ¼°
À´Ô´ | °¢Àï¼¼Êõ¹«ÖÚºÅ
ºÜ¶à¿ª·¢Õß¿ÉÄÜƽʱ²¢²»¹ØÐÄ×Ô¼ºÎ¬»¤µÄÒ³ÃæÊÇ·ñ´æÔÚÄÚ´æй©£¬ÔÒò¿ÉÄÜÊǸտªÊ¼¼òµ¥µÄÒ³ÃæÄÚ´æй©µÄËٶȺܻºÂý£¬ÔÚÔì³ÉÑÏÖØ¿¨¶Ù֮ǰ¿ÉÄܾͱ»Óû§Ë¢ÐÂÁË£¬ÎÊÌâÒ²¾Í±»Òþ²ØÁË£¬µ«ÊÇËæ×ÅÒ³ÃæÔ½À´Ô½¸´ÔÓ£¬ÓÈÆäµ±ÄãµÄÒ³ÃæÊÇ SAP ·½Ê½½»»¥Ê±£¬ÄÚ´æй©µÄÒþ»¼±ãÔ½À´Ô½ÑÏÖØ£¬Ö±µ½Í»È»ÓÐÒ»ÌìÓû§·´À¡Ëµ£º¡°²Ù×÷Ò»»á¶ùÒ³Ãæ¾Í¿¨×¡²»¶¯ÁË£¬Ò²²»ÖªµÀΪʲô£¬ÒÔÇ°²»ÕâÑùµÄѽ¡±¡£
ÕâƪÎÄÕÂͨ¹ýһЩ¼òµ¥µÄÀý×Ó½éÉÜÄÚ´æй©µÄµ÷²é·½·¨¡¢×ܽáÄÚ´æй©³öÏÖµÄÔÒòºÍ³£¼ûÇé¿ö£¬²¢Õë¶ÔÿÖÖÇé¿ö×ܽáÈçºÎ±ÜÃâÄÚ´æй©¡£Ï£ÍûÄܶԴó¼ÒÓÐËù°ïÖú¡£
Ò» Ò»¸ö¼òµ¥µÄÀý×ÓÏÈ¿´Ò»¸ö¼òµ¥µÄÀý×Ó£¬ÏÂÃæÊÇÕâ¸öÀý×Ó¶ÔÓ¦µÄ´úÂ룺
´úÂë 1
´úÂë 1 µÄÂß¼ºÜ¼òµ¥£ºµã»÷¡°add date¡±°´Å¥Ê±»áÏò dateAry Êý×éÖÐ push 3000 ¸ö new Date ¶ÔÏ󣬵ã»÷¡°clear¡±°´Å¥Ê±½« dateAry Çå¿Õ¡£ºÜÃ÷ÏÔ£¬¡°add date¡±²Ù×÷»áÔì³ÉÄÚ´æÕ¼Óò»¶ÏÔö³¤£¬Èç¹û½«Õâ¸öÂß¼ÓÃÔÚʵ¼ÊÓ¦ÓÃÖбã»áÔì³ÉÄÚ´æй©£¨²»¿¼ÂǹÊÒ⽫´úÂëÂß¼Éè¼Æ³ÉÕâÑùµÄÇé¿ö£©£¬ÏÂÃæÎÒÃÇ¿´Ò»ÏÂÈçºÎµ÷²éÕâÖÖÄÚ´æÔö³¤³öÏÖµÄÔÒòÒÔ¼°ÈçºÎÕÒ³öÄÚ´æй©µã¡£
1 heap snapshotΪÁ˱ÜÃâä¯ÀÀÆ÷²å¼þµÄ¸ÉÈÅ£¬ÎÒÃÇÔÚ chrome ÖÐн¨Ò»¸öÎÞºÛ´°¿Ú´ò¿ªÉÏÊö´úÂ롣ȻºóÔÚ chrome µÄ devtools ÖÐµÄ Memory ¹¤¾ßÖÐÕÒµ½ ¡°Heap Snapshot¡±¹¤¾ß£¬µã»÷×óÉϽǵļÖÆ°´Å¥Â¼ÖÆÒ»¸ö Snapshot£¬È»ºóµã»÷¡°add date¡±°´Å¥£¬ÔÚÊÖ¶¯´¥·¢ GC£¨Garbage Collect£©Ö®ºó£¬ÔٴμÖÆÒ»¸ö Snapshot£¬·´¸´Ö´ÐÐÉÏÊö²Ù×÷Èô¸É´Î£¬Ïñͼ 1 ÖвÙ×÷µÄÄÇÑù£¬µÃµ½Ò»ÏµÁÐµÄ Snapshot¡£
ͼ 1 ¼ÖÆ Snapshot
ͼ 2 ÊÇÎÒÃǸոյõ½µÄ Snapshot ×飬ÆäÖеĵÚÒ»¸öÊÇÒ³Ãæ³õʼ¼ÓÔصÄʱºò¼ÖƵģ¬²»ÄÑ·¢ÏÖ£¬´ÓµÚ¶þ¸ö¿ªÊ¼£¬Ã¿¸ö Snapshot Ïà±ÈÓÚÉÏÒ»¸öÆä´óС¶¼Ôö¼ÓÁËÔ¼ 200KB£¬ÎÒÃǵã»÷Ñ¡Ôñ Snapshot 2£¬ÔÚ class filter ÊäÈë¿òÖд¦ÊäÈë date£¬¿ÉÒԵõ½ Snapshot 2 ÖÐËùÓб» Date ¹¹ÔìÆ÷¹¹Ôì³öÀ´µÄ JS ¶ÔÏó£¬Ò²¾ÍÊÇ Date ¶ÔÏó£¬ÕâÀï¿´µ½µÄ¹¹ÔìÆ÷¸úä¯ÀÀÆ÷ÄÚ²¿µÄʵÏÖÓйأ¬²»±Ø¸ú JS µÄ¶ÔÏó¶ÔÓ¦¡£
Ñ¡ÖÐÒ»¸ö Date ¶ÔÏó£¬ÔÚÏÂÃæµÄÃæ°åÖпÉÒÔ¿´µ½ËùÑ¡¶ÔÏóµÄ³ÖÓÐÁ´ÒÔ¼°Ïà¹Ø³ÖÓжÔÏóµÄÄÚ´æµÄ±£Áô´óС£¨Retained Size£©£¬´ÓͼÖпÉÒÔ¿´³öÑ¡ÖÐµÄ Date ¶ÔÏóÊÇ Array µÄµÚ 1 ¸öÔªËØ£¨index ´Ó 0 ¿ªÊ¼£©£¬¶øÕâ¸ö Array µÄ³ÖÓÐÕßÊÇ system/Context ÉÏÏÂÎÄÖÐµÄ dateAry£¬system/Context ÉÏÏÂÎľÍÊÇ´úÂëÖÐ script ±êÇ©µÄÉÏÏÂÎÄ£¬ÎÒÃÇ¿ÉÒÔ¿´µ½ÔÚÕâ¸ö dataAry µÄ±£Áô´óСÊÇ 197KB£¬ÎÒÃÇÔÙÇе½ Snapshot 3£¬ÓÃÏàͬµÄ·½Ê½²é¿´ÄÚ´æ³ÖÓкʹóС£¬¿ÉÒÔ·¢ÏÖ Snapshot 3 ÖÐµÄ dataAry µÄ±£Áô´óС±ä³ÉÁË 386KB£¬Ïà±ÈÓÚ Snapshot 2 ÔöÕÇÁËÔ¼ 200KB£¡ÖðÒ»±È½ÏºóÃæµÄ Snapshot 4¡¢5 ºóÒ²Äܵõ½ÏàͬµÄ¶Ô±È½á¹û£¬¼´ÏÂÒ»¸ö Snapshot ÖÐµÄ dateAry ±ÈÉÏÒ»¸öµÄ±£Áô´óС´óÔ¼ 200KB¡£
ͼ 2 ¼ÖÆµÄ Snapshot ×é
²Î¿¼¡¾´úÂë 1¡¿ÎÒÃÇ¿ÉÒÔÖªµÀ£¬¡°add date¡±°´Å¥ÔÚ±»µã»÷ʱ£¬»áÏò dateAry Êý×éÖÐ push 3000 ¸öÐ嵀 Date ¶ÔÏ󣬶øÔÚͼ 2 ÖÐµÄ Date ¹¹ÔìÆ÷µÄÓÒ²à¿ÉÒÔ¿´µ½Õâ 3000 ¸ö Date ¶ÔÏó£¨Date x 3000£©£¬Ëü¶ÔÓ¦µÄÕýʽÎÒÃǵÄÑ»·´´½¨µÄÄÇ 3000 ¸ö Date ¶ÔÏó¡£×ÛºÏÉÏÃæµÄ²Ù×÷ÎÒÃÇ¿ÉÒÔÖªµÀ£¬chorome devtools ÖÐµÄ Memroy µÄ Heap Snapshot ¹¤¾ß¿ÉÒÔ¼ÖÆijһ¸öʱ¿ÌµÄËùÓÐÄÚ´æ¶ÔÏó£¬Ò²¾ÍÊÇÒ»¸ö¡°¿ìÕÕ¡±£¬¿ìÕÕÖа´¡°¹¹ÔìÆ÷¡±·Ö×飬չʾÁËËùÓб»¼Ç¼ÏÂÀ´µÄ JS ¶ÔÏó¡£
Èç¹ûÕâ¸öÒ³ÃæÊÇÒ»¸öʵ¼Ê·þÎñÓÚÓû§µÄÍøÕ¾µÄij¸öÒ³Ãæ»°£¨Óû§¿ÉÄܷdz£Æµ·±µÄµã»÷¡°add date¡±°´Å¥£¬×÷Õß¿ÉÄÜÏë¼Ç¼Óû§µã»÷µÄ´ÎÊý£¿Ò²Ðí°É£¬ËäÈ»ÎÒÒ²²»ÖªµÀËûʲôҪÕâô×ö£©Ëæ×ÅÓû§Ê¹ÓÃʱ¼äµÄÔö³¤£¬¡°add date¡±°´Å¥µÄ·´Ó¦¾Í»áÔ½À´Ô½Âý£¬ÕûÌåÒ³ÃæÒ²ËæÖ®Ô½À´Ô½¿¨£¬ÔÒò³ýÁËϵͳµÄÄÚ´æ×ÊÔ´±»Õ¼ÓÃÖ®Í⣬»¹ÓÐ GC µÄƵÂʺÍʱ³¤Ôö³¤£¬Èçͼ 3 Ëùʾ£¬ÒòΪ GC Ö´ÐеĹý³ÌÖÐ JS µÄÖ´ÐÐÊDZ»ÔÝÍ£µÄ£¬ËùÒÔÒ³Ãæ¾Í»á³ÊÏÖ³öÔ½À´Ô½¿¨µÄÑù×Ó¡£
ͼ 3 Performance ¼ÖÆµÄ GC Õ¼±È
ͼ 4 chrome µÄÈÎÎñ¹ÜÀíÆ÷
ͼ 5 ÄÚ´æÕ¼Óùý¸ßµ¼ÖÂä¯ÀÀÆ÷±ÀÀ£
ÄÇô£¬ÔÚÕâ¸ö¡°Êµ¼Ê¡±µÄ³¡¾°Ï£¬ÈçºÎÕÒ³öÄÇ¡°×÷ËµÄ 3000 ¸ö Date ¶ÔÏóÄØ£¿ÎÒÃÇÊ×ÏÈÏëµ½µÄÓ¦¸ÃÊǾÍÊÇ£ºÖ®Ç°²»ÊǼÖÆÁ˺öà¸ö Snapshot Â𣿿ɲ»¿ÉÒÔ°ÑËüÃÇ×ö¶Ô±ÈÕÒµ½¡°²îÒ족ÄØ£¬´Ó²îÒìÖÐÕÒµ½Ôö³¤µÄµØ·½²»¾ÍÐÐÁË£¿Ë¼Â··Ç³£ÕýÈ·£¬ÔÚ´Ë֮ǰÎÒÃÇÔÙ·ÖÎöÒ»ÏÂÕ⼸¸ö Snapshot£ºÃ¿´Îµã»÷¡°add date¡±°´Å¥¡¢ÊÖ¶¯´¥·¢ GC¡¢µÃµ½µÄ Snapshot µÄ´óСÏà±ÈÉÏÒ»´Î¶¼ÓÐËùÔö¼Ó£¬Èç¹ûÕâÖÖÄÚ´æµÄÔö³¤ÏÖÏó²»·ûºÏ¡°Ô¤ÆÚ¡±µÄ»°£¨ÏÔÈ»ÔÚÕâ¸ö¡°Êµ¼Ê¡±µÄÀý×ÓÖÐÊDz»·ûºÏÔ¤Æڵģ©£¬ÄÇôÕâÀï¾ÍÓкܴóµÄÏÓÒÉ´æÔÚÄÚ´æй©¡£
Õâ¸öʱºòÎÒÃÇÑ¡ÖÐ Snapshot 2£¬ÔÚͼ 2 ËùʾµÄ " Summary" ´¦Ñ¡Ôñ¡°Comparison¡±£¬ÔÚÓÒ²àµÄ "All objects" ´¦Ñ¡Ôñ Snapshot 1£¬ÕâÑùÒ»À´£¬Constructor Àïչʾ±ãÊÇ Snapshot 1 ºÍ Snapshot 2 µÄ¶Ô±È£¬Í¨¹ý¹Û²ì²»ÄÑ·¢ÏÖ£¬Í¼ÖÐµÄ +144KB ×îÖµµÃ»³ÒÉ£¬ÓÚÊÇÎÒÃÇÑ¡ÖÐËüµÄ¹¹ÔìÆ÷ Date£¬Õ¹¿ªÑ¡ÖÐÈÎÒâ×ÓÏî¿´ÏêÇ飬·¢ÏÖÆäÊDZ» Array ¹¹ÔìÆ÷¹¹Ôì³öÀ´µÄ dateAry ³ÖÓеģ¨¼´ dateAry ÖеÄÒ»Ô±£©,²¢ÇÒ dateAry ±»Èý¸öµØ·½³ÖÓУ¬ÆäÖÐϵͳÄÚ²¿µÄ array ÎÒÃDz»ÓÃÀí»á£¬Í¼ 6 ÖÐдÓÐ "context in ()" µØ·½¸øÁËÎÒÃdzÖÓÐ dateAry µÄ context ËùÔÚµÄλÖ㬵ã»÷±ã¿ÉÒÔÌøµ½´úÂëËùÔÚµÄλÖÃÁË£¬Õû¸ö²Ù×÷Èçͼ 6 Ëùʾ£º
ͼ 6 ¶¨Î»´úÂëλÖÃ
ÕâÀïÓÐÒ»¸öÖµµÃ×¢ÒâµÄµØ·½£¬Í¼ 6 ÖÐµÄ ¡°context in () @449305¡± ÖÐµÄ "()"£¬ÕâÀïÖ®ËùÒÔչʾΪÁË "()" ÊÇÒòΪ´úÂëÖÐÓÃÁË¡°ÄäÃûº¯Êý¡±£¨´úÂë 2 ÖÐµÚ 2 ÐеļýÍ·º¯Êý£©£º
// ¡¾Ð´Èë date¡¿ pushDate.addEventListener("click", () = { dateCount.innerHTML = `${++dateNum}`; for (let j = 0; j 3000; ++j) { dateAry.push(new Date()); });
´úÂë 2 ÄäÃûº¯Êý
µ«ÊÇÈç¹ûÎÒÃǸøº¯ÊýÆðÒ»¸öÃû×Ö£¬ÈçÏÂÃæµÄ´úÂëËùʾ£¬Ò²¾ÍÊÇÈç¹ûÎÒÃÇʹÓþßÃûº¯Êý£¨´úÂë3 µÚ 2 Ðк¯Êý add£©»òÕß½«º¯Êý¸³Öµ¸øÒ»¸ö±äÁ¿²¢Ê¹ÓÃÕâ¸ö±äÁ¿£¨µÚ 10 ºÍ 18 ÐеÄÐÐΪ£©µÄʱºò£¬devtools Öж¼¿ÉÒÔ¿´µ½ÏàÓ¦µÄº¯ÊýµÄÃû×Ö£¬ÕâÒ²¾Í¿ÉÒÔ°ïÖúÎÒÃǸüºÃµÄ¶¨Î»´úÂ룬Èçͼ 7 Ëùʾ¡£
// ¡¾Ð´Èë date¡¿ pushDate.addEventListener("click", function add() { dateCount.innerHTML = `${++dateNum}`; for (let j = 0; j 3000; ++j) { dateAry.push(new Date()); const clear = document.querySelector(".clear"); const doClear = function () { dateAry = []; dateCount.innerHTML = "0"; // ¡¾»ØÊÕÄÚ´æ¡¿ clear.addEventListener("click", doClear);
´úÂë 3 ¾ßÃûº¯Êý
ͼ 7 ¾ßÃûº¯Êý·½±ã¶¨Î»
ÕâÑùÎÒÃDZãÕÒµ½ÁË´úÂë¿ÉÒɵĵط½£¬Ö»ÐèÒª½«´úÂëµÄ×÷Õß×¥¹ýÀ´¶Ô×ÅËûÒ»¶Ù¡°·ÖÎö¡±Õâ¸öÄÚ´æй©µÄÎÊÌâ»ù±¾¾ÍË®Âäʯ³öÁË¡£
Æäʵ£¬Snapshot ³ýÁË¡°Comparison¡±Ö®Í⻹ÓÐÒ»¸ö¸ü±ã½ÝµÄÓÃÓڶԱȵÄÈë¿Ú£¬ÔÚÕâÀïÖ±½Ó¿ÉÒÔ¿´µ½ÔÚ¼ÖÆ Snapshot 1 ºÍ Snapshot 2 Á½¸öʱ¼äµãÖ®¼ä±»·ÖÅä³öÀ´µÄÄڴ棬ÓÃÕâÖÖ·½Ê½Ò²¿ÉÒÔ¶¨Î»µ½ÄǸö¿ÉÒÉµÄ Date x 3000£º
ͼ 8 Snapshot ±È½ÏÆ÷
ÉÏÎļþ½éÉܵÄÊÇÓà Heap Snapshot Ñ°ÕÒÄÚ´æй©µãµÄ·½·¨£¬Õâ¸ö·½·¨µÄÓŵ㣺¿ÉÒÔ¼Öƶà¸ö Snapshot£¬È»ºó·½±ãµÄÁ½Á½±È½Ï£¬²¢ÇÒÄÜ¿´µ½ Snapshot ÖеÄÈ«Á¿Äڴ棬ÕâÒ»µãÊÇÏÂÎÄÒª½²µÄ¡°Allocation instrumentation on timeline¡±·½·¨²»¾ß±¸µÄ£¬²¢ÇÒÕâÖÖ·½·¨¿ÉÒÔ¸ü¼Ó·½±ãµØ²éÕÒºóÃæ»á½²µÄÒò Detached Dom µ¼ÖµÄÄÚ´æй©¡£
2 Allocation instrumentation on timelineµ«ÊÇ£¬²»ÖªµÀÄãÓÐûÓоõµÃ£¬ÕâÖÖ¸ßƵÂʵؼÖÆ Snapshot¡¢¶Ô±È¡¢ÔٶԱȵķ½Ê½Óеã¶ùÂé·³£¿ÎÒÐèÒª²»¶ÏµÄÈ¥µã»÷¡°add date¡±£¬È»ºóÊó±êÓÖÒªÅܹýÈ¥µã»÷ÊÖ¶¯ GC¡¢Â¼ÖÆ Snapshot¡¢µÈ´ý¼ÖÆÍê±Ï£¬ÔÙÈ¥²Ù×÷£¬ÔÙȥ¼ÖÆ¡£ÓÐûÓмòµ¥Ò»Ð©µÄ·½Ê½À´²éÕÒÄÚ´æй©£¿Õâ¸öʱºòÎÒÃǻص½ Memory ×î³õʼµÄ½çÃ棬ÄãͻȻ·¢ÏÖ ¡°Heap snapshot¡±ÏÂÃ滹ÓÐÒ»¸ö radio£º¡°Allocation instrumentation on timeline¡±£¬²¢ÇÒÕâ¸ö radio ÏÂÃæµÄ½éÉÜÎÄ°¸µÄ×îºóд×Å£º¡°Use this profile type to isolate memory leaks¡±£¬ÔÀ´ÕâÊÇÒ»¸öרÃÅÓÃÓÚµ÷²éÄÚ´æй©µÄ¹¤¾ß£¡ÓÚÊÇ£¬ÎÒÃÇÑ¡ÖÐÕâ¸ö radio£¬µã»÷¿ªÊ¼Â¼ÖÆ°´Å¥£¬È»ºó½«×¢ÒâÁ¦·ÅÔÚÒ³ÃæÉÏ£¬È»ºóÄã·¢ÏÖµ±µã»÷¡°add date¡±°´Å¥Ê±£¬ÓÒÃæ¼ÖÆµÄ timeline ±ã»á¶à³öÒ»¸öÐÄÌø£º
ͼ 9 Allocation instrumentation on timeline
Èçͼ 9 Ëùʾ£¬Ã¿µ±ÎÒÃǵã»÷¡°add date¡±°´Å¥Ê±£¬ÓÒÃ涼ÓÐÒ»¸ö¶ÔÓ¦µÄÐÄÌø£¬µ±ÎÒÃǵã»÷¡°clear¡±°´Å¥Ê±£¬¸Õ²Å³öÏÖµÄËùÓÐÐÄÌø±ãÈ«¶¼¡°Ëõ»Ø¡±È¥ÁË£¬ÓÚÊÇÎÒÃǵóö½áÂÛ£ºÃ¿Ò»¸ö¡°ÐÄÌø¡±¶¼ÊÇÒ»´ÎÄÚ´æ·ÖÅ䣬Æä¸ß¶È´ú±íÄÚ´æ·ÖÅäµÄÁ¿£¬ÔÚÖ®ºóµÄʱ¼äÍÆÒƹý³ÌÖУ¬Èç¹û¸Õ²ÅÐÄÌø¶ÔÓ¦µÄ±»·ÖÅäµÄÄÚ´æ±» GC »ØÊÕÁË£¬¡°ÐÄÌø¡±±ã»á¸ú×ű仯Ϊ»ØÊÕÖ®ºóµÄ¸ß¶È¡£ÓÚÊÇ£¬ÎÒÃDZã°ÚÍÑÁËÔÚ Snapshot ÖÐÀ´»Ø²Ù×÷¡¢Â¼ÖƵľ½¾³£¬Ö»ÐèÒª½«×¢ÒâÁ¦¼¯ÖÐÔÚÒ³ÃæµÄ²Ù×÷ÉÏ£¬²¢¹Û²ìÄĸö²Ù×÷ÔÚÓұߵÄʱ¼äÏ߱仯ÖÐÊÇ¿ÉÒɵġ£
¾¹ýһϵÁвÙ×÷£¬ÎÒÃÇ·¢ÏÖ¡°add date¡±Õâ¸ö°´Å¥µÄµã»÷ÐÐΪºÜ¿ÉÒÉ£¬ÒòΪËü·ÖÅäµÄÄÚ´æ²»»á×Ô¶¯±»»ØÊÕ£¬Ò²¾ÍÊÇÖ»Òªµã»÷Ò»´Î£¬ÄÚ´æ¾Í»áÔö³¤Ò»µã£¬ÎÒÃÇֹͣ¼ÖÆ£¬µÃµ½ÁËÒ»¸ö timeline µÄ Snapshot£¬Õâ¸öʱºòÈç¹ûÎÒÃǵã»÷ij¸öÐÄÌøµÄ»°£º
ͼ 10 µã»÷ij¸öÐÄÌø
ÊìϤµÄ Date x 3000 ÓÖ³öÏÖÁË£¨Í¼ 11£©£¬µã»÷Ò»¸ö Date ¶ÔÏó¿´³ÖÓÐÁ´£¬½ÓÏÂÀ´±ã¸úÉÏÎÄ Snapshot µÄ³ÖÓÐÁ´·ÖÎöÒ»ÑùÁË£º
ͼ 11 ͨ¹ý timeline ÕÒµ½Ð¹Â©µã
Õâ¸ö·½·¨µÄÓŵãÉÏÎÄÒѾ˵Ã÷£¬¿ÉÒԷdz£Ö±¹Û¡¢·½±ãµÄ¹Û²ìÄÚ´æËæ¿ÉÒɲÙ×÷µÄ·ÖÅäÓë»ØÊÕ¹ý³Ì£¬¿ÉÒÔ·½±ãµÄ¹Û²ìÿ´Î·ÖÅäµÄÄÚ´æ¡£ËüµÄȱµã£ºÂ¼ÖÆʱ¼ä½Ï³¤Ê± devtools ÊÕ¼¯Â¼Öƽá¹ûµÄʱ¼ä»áºÜ³¤£¬ÉõÖÁÓÐʱºò»á¿¨ËÀä¯ÀÀÆ÷£»ÏÂÎĻὲµ½ detached DOM£¬Õâ¸ö¹¤¾ß²»ÄܱȽϳö detached DOM£¬¶ø heap snapshot ¿ÉÒÔ¡£
3 performancedevtools ÖÐµÄ Performance Ãæ°æÖÐÒ²ÓÐÒ»¸ö Memory ¹¦ÄÜ£¬ÏÂÃæ¿´Ò»ÏÂËüÈçºÎʹÓá£ÎÒÃÇ°Ñ Memory ¹´Ñ¡ÉÏ£¬²¢Â¼ÖÆÒ»¸ö performance ½á¹û£º
ͼ 12 Performance µÄ¼Öƹý³Ì
ÔÚͼ 12 ÖпÉÒÔ¿´µ½£¬ÔÚ¼ÖƵĹý³ÌÖÐÎÒÃÇÁ¬Ðøµã»÷¡°add date¡±°´Å¥ 10 ´Î£¬È»ºóµã»÷Ò»´Î¡°clear¡±°´Å¥£¬È»ºóÔٴεã»÷¡°add date¡± 10 ´Î£¬µÃµ½µÄ×îÖÕ½á¹ûÈçͼ 13 Ëùʾ£º
ͼ 13 Performance µÄ¼Öƽá¹û
ÔÚͼ 13 ÖÐÎÒÃÇ¿ÉÒԵõ½ÏÂÃæµÄÐÅÏ¢£º
Õû¸ö²Ù×÷¹ý³ÌÖÐÄÚ´æµÄ×ßÊÆ£º²Î¼ûͼ 13 Ï·½µÄλÖ㬵ÚÒ»ÂÖµã»÷ 10 ´ÎµÄ¹ý³ÌÖÐÄÚ´æ²»¶ÏÔö³¤£¬µã clear Ö®ºóÄÚ´æ¶ÏÑÂʽϵø£¬µÚ¶þÂÖµã»÷ 10 ´ÎÄÚ´æÓÖ²»¶ÏÔö³¤¡£ÕâÒ²ÊÇÕâ¸ö¹¤¾ßµÄÖ÷Òª×÷Ó㺵õ½¿ÉÒɲÙ×÷µÄÄÚ´æ×ßÊÆͼ£¬Èç¹ûÄÚ´æ³ÖÐø×߸ßÔòÓÐÀíÓÉ»³Òɴ˲Ù×÷ÓÉÄÚ´æй©µÄ¿ÉÄÜ¡£ÄÚ´æµÄÔö³¤Á¿£º²Î¼û JS Heap λÖã¬Êó±ê·ÅÉÏÈ¥¿ÉÒÔ¿´¼ûÿ¸ö½×ÌÝÉÏÏÂλÖõÄÄÚ´æÔö³¤/ϵøµÄÁ¿Í¨¹ýÔÚ timeline Öж¨Î»Ä³¸ö¡°½×ÌÝ¡±£¬ÎÒÃÇÒ²ÄÜÕÒµ½¿ÉÒɵĴúÂ룬Èçͼ 14 Ëùʾ£ºÍ¼ 14 ͨ¹ý Performance ¶¨Î»ÎÊÌâ´úÂë
ÕâÖÖ·½·¨µÄÓŵ㣺¿ÉÒÔÖ±¹ÛµÃ¿´µ½ÄÚ´æµÄ×ÜÌå×ßÊÆ£¬²¢ÇÒͬʱµÃµ½ËùÓвÙ×÷¹ý³ÌÖеĺ¯Êýµ÷ÓÃÕ»ºÍʱ¼äµÈÐÅÏ¢¡£È±µã£ºÃ»ÓоßÌåµÄÄÚ´æ·ÖÅäµÄϸ½Ú£¬Â¼ÖƵĹý³Ì²»ÄÜʵʱ¿´µ½ÄÚ´æ·ÖÅäµÄ¹ý³Ì¡£
¶þ ÄÚ´æй©³öÏֵij¡¾°1 È«¾ÖJS ²ÉÓñê¼ÇÇåɨ·¨È¥»ØÊÕÎÞ·¨·ÃÎʵÄÄÚ´æ¶ÔÏ󣬱»¹ÒÔØÔÚÈ«¾Ö¶ÔÏó£¨ÔÚä¯ÀÀÆ÷Öм´Ö¸µÄÊÇ window ¶ÔÏó£¬ÔÚÀ¬»ø»ØÊյĽǶÈÉϳÆÆäΪ¸ù½Úµã£¬Ò²½Ð GC root£©ÉϵÄÊôÐÔËùÕ¼ÓÃÄÚ´æÊDz»»á±»»ØÊյģ¬ÒòΪÆäÊÇʼÖÕ¿ÉÒÔ·ÃÎʵģ¬ÕâÒ²·ûºÏ¡°È«¾Ö¡±µÄÃüÃûº¬Òå¡£
½â¾ö·½°¸¾ÍÊDZÜÃâÓÃÈ«¾Ö¶ÔÏó´æ´¢´óÁ¿µÄÊý¾Ý¡£
2 ±Õ°ü£¨closure£©ÎÒÃÇ°Ñ¡¾´úÂë 1¡¿ÉԼӸĶ¯±ã¿ÉÒԵõ½Ò»¸ö±Õ°üµ¼ÖÂÄÚ´æй©µÄ°æ±¾£º
´úÂë 3 ±Õ°üµ¼ÖÂÄÚ´æй©
½«ÉÏÊö´úÂë¼ÓÔص½ chrome ÖУ¬²¢Óà timeline µÄ·½Ê½Â¼ÖÆÒ»¸ö Snapshot£¬µÃµ½µÄ½á¹ûÈçͼ 15 Ëùʾ£º
ͼ 15 ±Õ°üµÄ¼Öƽá¹û
ÎÒÃÇÑ¡ÖÐ index = 2 µÄÐÄÌø£¬¿ÉÒÔ¿´µ½ Constructor ÀïÃæ³öÏÖÁËÒ»¸ö "(closure)"£¬ÎÒÃÇÕ¹¿ªÕâ¸ö closure£¬¿ÉÒÔ¿´µ½ÀïÃæµÄ "inner()"£¬inner() ºóÃæµÄ "()" ±íʾ inner ÊÇÒ»¸öº¯Êý£¬ÕâʱºòÄã¿ÉÄÜ»áÎÊ£º¡°Í¼ÖÐµÄ Constructor µÄ Retained Size ´óС¶¼²î²»¶à£¬ÎªÊ²Ã´ÄãҪѡ (closure)£¿¡±£¬ÕýÊÇÒòΪûÓÐÃ÷ÏÔÕ¼±È½Ï¸ßµÄ Retained Size ÎÒÃDzÅËæ±ãÑ¡Ò»¸öµ÷²é£¬ºóÃæÄã»á·¢ÏÖ²»¹ÜÄãÑ¡ÁËÄÄÒ»¸ö×îºóµÄµ÷²éÁ´Â·¶¼ÊÇÊâ;ͬ¹éµÄ¡£
ÎÒÃÇÔÚÏÂÃæµÄ Retainers Öп´Ï inner() µÄ³ÖÓÐϸ½Ú£º´ÓÏÂÃæµÄ Retainers ÖпÉÒÔ¿´³ö inner() Õâ¸ö closure ÊÇij¸ö Array µÄµÚ 2 Ïindex ´Ó 0 ¿ªÊ¼£©£¬¶øÕâ¸öÊý×éµÄ³ÖÓÐÕßÊÇ system/Context£¨¼´È«¾Ö£© ÖÐµÄ ary£¬Í¨¹ý¹Û²ì¿ÉÒÔ¿´µ½ ary µÄ³ÖÓдóС£¨Retained Size£©ÊÇ 961KB ´óÔ¼µÈÓÚ 192KB µÄ 5 ±¶£¬5 ¼´ÊÇÎÒÃǵã»÷¡°add date¡±°´Å¥µÄ´ÎÊý£¬¶øÏÂÃæµÄ 5 ¸ö "previous in system/Context" ÿ¸ö´óС¶¼ÊÇ 192KB£¬¶øËüÃÇ×îÖÕ¶¼ÊDZ»Ä³¸ö inner() ±Õ°ü³ÖÓУ¬ÖÁ´ËÎÒÃDZã¿ÉÒԵóö½áÂÛ£ºÈ«¾ÖÖÐÓÐÒ»¸ö ary Êý×飬ËüµÄÖ÷ÒªÄÚ´æÊDZ» inner() Ìî³äµÄ£¬Í¨¹ýÀ¶É«µÄ index.html:xx ´¦µÄ´úÂëÈë¿Ú¶¨Î»µ½´úÂëËùÔڵؿ´Ò»ÏÂÒ»ÇоͶ¼ÁËÈ»ÁË£¬ÔÀ´ÊÇ inner() ±Õ°üÄÚ²¿³ÖÓÐÁËÒ»¸ö´ó¶ÔÏ󣬲¢ÇÒËùÓÐµÄ inner() ±Õ°ü¼°Æä³ÖÓеĴó¶ÔÏ󶼱» ary ¶ÔÏó³ÖÓУ¬¶ø ary ¶ÔÏóÊÇÈ«¾ÖµÄ²»»á±»»ØÊÕ£¬µ¼ÖÂÁËÄÚ´æй©£¨Èç¹ûÕâÖÖÐÐΪ²»·ûºÏÔ¤ÆڵĻ°£©¡£·µ»ØÈ¥£¬Èç¹ûÕâ¸öʱºòÄãÑ¡ÔñÉÏÃæÌáµ½µÄ system/Context ¹¹ÔìÆ÷£¬Äã»á¿´µ½£¨¼ûͼ 16£¬ÊìϤ°É£©£º
ͼ 16 system/Context
Ò²¾ÍÊÇÄãÑ¡ÔñµÄ system/Context ÆäʵÊÇ inner() ±Õ°üµÄÉÏÏÂÎĶÔÏó£¨context£©£¬¶ø´ËÉÏÏÂÎijÖÓÐÁË 192KB Äڴ棬ͨ¹ýÀ¶É«µÄ index.html:xx ÓÖ¿ÉÒÔ¶¨Î»µ½ÎÊÌâ´úÂëÁË¡£Èç¹ûÄãÏñͼ 17 Ò»ÑùÑ¡ÔñÁË Date ¹¹ÔìÆ÷½øÐв鿴µÄ»°Ò²¿ÉÒÔ×îÖÕ¶¨Î»µ½ÎÊÌ⣬´Ë´¦½«·ÖÎö¹ý³ÌÁô¸ø¶ÁÕß×Ô¼º½øÐУº
ͼ 17 Ñ¡ÖÐ Date ¹¹ÔìÆ÷
3 Detached DOMÎÒÃÇÏÈ¿´Ò»ÏÂÏÂÃæµÄ´úÂ룬²¢Óà chrome ÔØÈëËü£º
´úÂë 4 Detached Dom
È»ºóÎÒÃDzÉÓà Heap Snapshot µÄ·½Ê½½«µã»÷¡°del¡±°´Å¥Ç°ºóµÄÁ½¸ö snapshot ¼ÖÆÏÂÀ´£¬µÃµ½µÄ½á¹ûÈçͼ 6 Ëùʾ¡£ÎÒÃÇÑ¡ÓÃºÍ snapshot 1 ¶Ô±ÈµÄ·½Ê½²¢ÔÚ snapshot 2 µÄ¹ýÂËÆ÷ÖÐÊäÈë "detached"¡£ÎÒÃǹ۲ìµÃµ½µÄɸѡ½á¹ûµÄ "Delta" ÁУ¬ÆäÖв»Îª 0 µÄÁÐÈçÏ£º
Òª½âÊÍÉÏÊö±í¸ñÐèÒªÏȽéÉÜÒ»¸ö֪ʶµã£ºDOM ¶ÔÏó±»»ØÊÕÐèҪͬʱÂú×ãÁ½¸öÌõ¼þ£¬1¡¢DOM ÔÚ DOM Ê÷Öб»É¾µô£»2¡¢DOM ûÓб» JS ¶ÔÏóÒýÓá£ÆäÖеڶþµã»¹ÊDZȽÏÈÝÒ×±»ºöÊӵġ£ÕýÈçÉÏÃæµÄÀý×ÓËùʾ£¬Detached HTMLButtonElement +1 ´ú±íÓÐÒ»¸ö button DOM ±»´Ó×é¼þÊ÷ÖÐɾµôÁË£¬µ«ÊÇÈÔÓÐ JS ÒýÓÃÖ®£¨ÎÒÃDz»¿¼ÂÇÓÐÒâΪ֮µÄÇé¿ö£©¡£
ÏàËƵģ¬Detached EventListener Ò²ÊÇÒòΪ DOM ±»É¾µôÁË£¬µ«ÊÇʼþûÓнâ°ó£¬ÓÚÊÇ Detached ÁË£¬½â¾ö·½°¸Ò²ºÜ¼òµ¥£º¼°Ê±½â°óʼþ¼´¿É¡£
ÓÚÊǽâ¾öµÄ·½·¨¾ÍºÜ¼òµ¥ÁË£º²Î¼û´úÂë 5£¬»Øµôº¯Êý del ÔÚÖ´ÐÐÍê±ÏʱÁÙʱ±äÁ¿»á±»»ØÊÕ£¬ÓÚÊÇÁ½¸öÌõ¼þ¾Í¶¼Í¬Ê±Âú×ãÁË£¬DOM ¶ÔÏó¾Í»á±»»ØÊÕµô£¬Ê¼þ½â°óÁË£¬Detached EventListener Ò²¾ÍûÓÐÁË¡£ÖµµÃ×¢ÒâµÄÊÇ table ÔªËØ£¬Èç¹ûÒ»¸ö td ÔªËØ·¢ÉúÁË detached£¬ÔòÓÉÓÚÆä×ÔÉíÒýÓÃÁË×Ô¼ºËùÔÚµÄ table£¬ÓÚÊÇÕû¸ö table ¾ÍÒ²²»»á±»»ØÊÕÁË¡£
´úÂë 5 Detached DOM µÄ½â¾ö·½·¨
ͼ 18 Detached DOM µÄ Snapshot
Performance monitor ¹¤¾ß
DOM/event listener й©ÔÚ±àдÂÖ²¥Í¼¡¢µ¯´°¡¢toast ÌáʾÕâÖÖ¹¤¾ßµÄʱºò»¹ÊǺÜÈÝÒ׳öÏֵģ¬chrome µÄ devtools ÖÐÓÐÒ»¸ö Performance monitor ¹¤¾ß¿ÉÒÔÓÃÀ´°ïÖúÎÒÃǵ÷²éÄÚ´æÖÐÊÇ·ñÓÐ DOM/event listener й©¡£Ê×ÏÈ¿´Ò»Ï´úÂë 6£º
´úÂë 6 ²»¶ÏÔö¼Ó DOM NODE
°´ÕÕÎÒÃÇͼ 19 µÄ·½Ê½´ò¿ª Performance monitor Ãæ°æ£º
ͼ 19 ´ò¿ª Performance monitor ¹¤¾ß
DOM Nodes ÓÒ²àµÄÊýÁ¿Êǵ±Ç°ÄÚ´æÖеÄËùÓÐ DOM ½ÚµãµÄÊýÁ¿£¬°üÀ¨µ±Ç° document ÖдæÔÚµÄºÍ detached µÄÒÔ¼°¼ÆËã¹ý³ÌÖÐÁÙʱ´´½¨µÄ£¬Ã¿µ±ÎÒÃǵã»÷Ò»´Î¡°add date¡±°´Å¥£¬²¢ÊÖ¶¯´¥·¢ GC Ö®ºó DOM Nodes µÄÊýÁ¿¾Í + 2£¬ÕâÊÇÒòΪÎÒÃÇÏò document ÖÐÔö¼ÓÁËÒ»¸ö button ½ÚµãºÍÒ»¸ö button µÄÎÄ×ֽڵ㣬¾ÍÏñͼ 20 ÖÐËùʾ¡£Èç¹ûÄãдµÄ toast ×é¼þÔÚÁÙʱ²åÈëµ½ document ²¢¹ýÒ»»á¶ùÖ´ÐÐÁË remove Ö®ºó´¦ÓÚÁË detached ״̬µÄ»°£¬Performance monitor Ãæ°æÖÐµÄ DOM Nodes ÊýÁ¿¾Í»á²»¶ÏÔö¼Ó£¬½áºÏ snapshot ¹¤¾ßÄã±ã¿ÉÒÔ¶¨Î»µ½ÎÊÌâËùÔÚÁË¡£ÖµµÃÒ»ÌáµÄÊÇ£¬ÓеĵÚÈý·½µÄ¿âµÄ toast ±ã´æÔÚÕâ¸öÎÊÌ⣬²»ÖªµÀÄã±»¿Ó¹ýûÓС£
ͼ 20 ²»¶ÏÔö¼ÓµÄ DOM Nodes
4 consoleÕâÒ»µã¿ÉÄÜÓÐÈ˲»»áÁôÒâµ½£¬¿ØÖÆ̨´òÓ¡µÄÄÚÈÝÊÇÐèҪʼÖÕ±£³ÖÒýÓõĴæÔڵģ¬ÕâÒ»µãÒ²ÊÇÖµµÃ×¢ÒâµÄ£¬ÒòΪ´òÓ¡¹ý¶à¹ý´ó¶ÔÏóµÄ»°Ò²ÊÇ»áÔì³ÉÄÚ´æй©µÄ£¬Èçͼ 21 Ëùʾ£¨ÅäºÏ´úÂë 7£©¡£½â¾ö·½·¨±ãÊDz»ÒªËÁÒâ´òÓ¡¶ÔÏ󵽿ØÖÆ̨ÖУ¬Ö»´òÓ¡±ØÒªµÄÐÅÏ¢³öÀ´¡£
´úÂë 7 console µ¼ÖÂÄÚ´æй©
ͼ 21 console µ¼ÖµÄÄÚ´æй©
Èý ×ܽ᱾ÎÄÓÃÁ˼¸¸ö¼òµ¥µÄСÀý×Ó½éÉÜÁËÄÚ´æй©³öÏÖµÄʱ»ú¡¢Ñ°ÕÒй©µãµÄ·½·¨²¢½«¸÷ÖÖ·½·¨µÄÓÅȱµã½øÐÐÁ˶Աȣ¬×ܽáÁ˱ÜÃâ³öÏÖÄÚ´æй©µÄ×¢Òâµã¡£Ï£ÍûÄܶԶÁÕßÓÐËù°ïÖú¡£ÎÄÖÐÈç¹ûÓб¾ÈËÀí½â´íÎó»òÊéд´íÎóµÄµØ·½»¶ÓÁôÑÔÖ¸Õý¡£
²Î¿¼
https://commandlinefanatic.com/cgi-bin/showarticle.cgi?article=art038
https://developer.chrome.com/docs/devtools/memory-problems/
https://www.bitdegree.org/learn/chrome-memory-tab
Ç°¶Ë¿ª·¢¼¼ÊõͼÆ×
6 ´ó֪ʶµã£¬14 ¸ö¿Î³Ì£¬680 ¸ö¿Îʱ£¬½«Ç°¶Ë¿ª·¢ÖªÊ¶ºÍʵս¾ÑéÈÚÈëͼÆ×£¬°üº¬ HTML ¡¢CSS¡¢JavaScript ¡¢jQuery ¡¢Vue ¡¢React ¡¢Angular ¡¢NodeJS µÈÇ°¶Ë¿ª·¢±Ø±¸¼¼ÄÜ£¬°ïÄãѸËÙÌáÉý¡£
µã»÷ÕâÀ¿ªÊ¼Ñ§Ï°°É~
²é¿´±í½á¹¹£¬sbtest1ÓÐÖ÷¼ü¡¢k_1¶þ¼¶Ë÷Òý¡¢i_c¶þ¼¶Ë÷Òý CREATE TABLE `sbtest1` ...
2020Äê¶ÔÓÚÔƼÆËãÐÐÒµÀ´ËµÊÇÍ»ÆÆÐÔµÄÒ»Ä꣬ÒòΪ¹«¹²Ôƹ©Ó¦ÉÌÔö¼ÓÁËÊÕÈ룬¶øÒßÇé...
Ò»¡¢PostgreSQLÐÐҵλÖà һ ÐÐҵλÖà Ê×ÏÈÎÒÃÇ¿´Ò»¿´RDS PostgreSQLÔÚÕû¸öÐÐÒµµ±...
Öйú×î?ºÃµÄÒ»¶äÔÆÆ®½øÁË»ªÈðÒøÐС£°¢ÀïÔƽ«½øÒ»²½ÖúÁ¦»ªÈðÒøÐÐAll in Cloud¡£ -...
ºÜ³¤Ê±¼äûÓиüÐÂÔ´´ÎÄÕÂÁË£¬µ«ÊÇ»¹Ò»Ö±ÔÚ˼¿¼ºÍ³Áµíµ±ÖУ¬ºóÃ湫ÖںŻá¸üƵ·±...
¶¨Òå thisÊǺ¯ÊýÔËÐÐʱ×Ô¶¯Éú³ÉµÄÄÚ²¿¶ÔÏ󣬼´µ÷Óú¯ÊýµÄÄǸö¶ÔÏó¡££¨²»Ò»¶¨ºÜ×¼...
±¾ÎÄתÔØ×ÔÍøÂ磬ÔÎÄÁ´½Ó£ºhttps://mp.weixin.qq.com/s/vlOUg46B5bcmToX-fjavJQ...
×î½ü£¬DevOpsµÄ²ÉÓõ¼ÖÂÁËÆóÒµ¼ÆËãµÄÖØ´óת±ä¡£³ýÎÞ·þÎñÆ÷¼ÆË㣬¶¯Ì¬ÅäÖúͼ´¸¶...
ÔÚTOPÔÆ£¨zuntop.com£©¿Æ¼¼×âÁÞ¹ý·þÎñÆ÷µÄÕ¾³¤¶¼ÖªµÀ¶ÀÁ¢·þÎñÆ÷ÔÚ¼Û¸ñÉϱÈVPSÖ÷...
9ÔÂ17ÈÕ£¬2020ÔÆÆÜ´ó»áÉÏ£¬°¢ÀïÔÆÕýʽ·¢²¼¹¤Òµ´óÄÔ3.0¡£ °¢ÀïÔÆÖÇÄÜ×ÊÉî²úƷר¼Ò...