1 line
14 KiB
JavaScript
1 line
14 KiB
JavaScript
"use strict";(self.webpackChunkjjbook=self.webpackChunkjjbook||[]).push([[4109],{3905:function(e,t,r){r.d(t,{Zo:function(){return c},kt:function(){return d}});var o=r(7294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var p=o.createContext({}),s=function(e){var t=o.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},c=function(e){var t=s(e.components);return o.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},m=o.forwardRef((function(e,t){var r=e.components,n=e.mdxType,a=e.originalType,p=e.parentName,c=i(e,["components","mdxType","originalType","parentName"]),m=s(r),d=n,k=m["".concat(p,".").concat(d)]||m[d]||u[d]||a;return r?o.createElement(k,l(l({ref:t},c),{},{components:r})):o.createElement(k,l({ref:t},c))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var a=r.length,l=new Array(a);l[0]=m;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,l[1]=i;for(var s=2;s<a;s++)l[s]=r[s];return o.createElement.apply(null,l)}return o.createElement.apply(null,r)}m.displayName="MDXCreateElement"},7489:function(e,t,r){r.r(t),r.d(t,{frontMatter:function(){return i},contentTitle:function(){return p},metadata:function(){return s},toc:function(){return c},default:function(){return m}});var o=r(7462),n=r(3366),a=(r(7294),r(3905)),l=["components"],i={sidebar_label:"\u6d4f\u89c8\u5668\uff1a\u5982\u4f55\u5b9a\u4f4d\u5185\u5b58\u6cc4\u9732",sidebar_position:2},p="\u5982\u4f55\u5b9a\u4f4d\u5185\u5b58\u6cc4\u9732",s={unversionedId:"book3/browser-memory-leaks",id:"book3/browser-memory-leaks",isDocsHomePage:!1,title:"\u5982\u4f55\u5b9a\u4f4d\u5185\u5b58\u6cc4\u9732",description:"\u76f8\u5173\u95ee\u9898",source:"@site/docs/book3/browser-memory-leaks.md",sourceDirName:"book3",slug:"/book3/browser-memory-leaks",permalink:"/awesome-interview/book3/browser-memory-leaks",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_label:"\u6d4f\u89c8\u5668\uff1a\u5982\u4f55\u5b9a\u4f4d\u5185\u5b58\u6cc4\u9732",sidebar_position:2},sidebar:"tutorialSidebar",previous:{title:"\u6d4f\u89c8\u5668\uff1a\u6d4f\u89c8\u5668\u4e8b\u4ef6\u5faa\u73af",permalink:"/awesome-interview/book3/browser-event-loop"},next:{title:"\u5de5\u7a0b\u5316\uff1a\u8c08\u4e0b webpack loader \u7684\u673a\u5236",permalink:"/awesome-interview/book3/engineer-webpack-loader"}},c=[{value:"\u76f8\u5173\u95ee\u9898",id:"\u76f8\u5173\u95ee\u9898",children:[]},{value:"\u56de\u7b54\u5173\u952e\u70b9",id:"\u56de\u7b54\u5173\u952e\u70b9",children:[]},{value:"\u77e5\u8bc6\u70b9\u6df1\u5165",id:"\u77e5\u8bc6\u70b9\u6df1\u5165",children:[{value:"1. \u6392\u67e5\u5185\u5b58\u6cc4\u6f0f\u5e38\u89c1\u95ee\u9898",id:"1-\u6392\u67e5\u5185\u5b58\u6cc4\u6f0f\u5e38\u89c1\u95ee\u9898",children:[]},{value:"2. \u4f7f\u7528 Chrome DevTools \u5b9a\u4f4d\u5185\u5b58\u6cc4\u6f0f",id:"2-\u4f7f\u7528-chrome-devtools-\u5b9a\u4f4d\u5185\u5b58\u6cc4\u6f0f",children:[]},{value:"3. Node.js \u4e2d\u7684\u5185\u5b58\u6cc4\u6f0f\u5b9a\u4f4d",id:"3-nodejs-\u4e2d\u7684\u5185\u5b58\u6cc4\u6f0f\u5b9a\u4f4d",children:[]}]},{value:"\u53c2\u8003\u8d44\u6599",id:"\u53c2\u8003\u8d44\u6599",children:[]}],u={toc:c};function m(e){var t=e.components,r=(0,n.Z)(e,l);return(0,a.kt)("wrapper",(0,o.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"\u5982\u4f55\u5b9a\u4f4d\u5185\u5b58\u6cc4\u9732"},"\u5982\u4f55\u5b9a\u4f4d\u5185\u5b58\u6cc4\u9732"),(0,a.kt)("h2",{id:"\u76f8\u5173\u95ee\u9898"},"\u76f8\u5173\u95ee\u9898"),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"\u5783\u573e\u56de\u6536\u673a\u5236")),(0,a.kt)("h2",{id:"\u56de\u7b54\u5173\u952e\u70b9"},"\u56de\u7b54\u5173\u952e\u70b9"),(0,a.kt)("p",null,(0,a.kt)("inlineCode",{parentName:"p"},"\u5783\u573e\u56de\u6536")," ",(0,a.kt)("inlineCode",{parentName:"p"},"DevTools")),(0,a.kt)("p",null,"\u5185\u5b58\u6cc4\u6f0f\u662f\u6307\u4e0d\u518d\u4f7f\u7528\u7684\u5185\u5b58\uff0c\u6ca1\u6709\u88ab\u5783\u573e\u56de\u6536\u673a\u5236\u56de\u6536\u3002\u5f53\u5185\u5b58\u6cc4\u6f0f\u5f88\u5927\u6216\u8db3\u591f\u9891\u7e41\u65f6\uff0c\u7528\u6237\u4f1a\u6709\u6240\u611f\u77e5\uff1a\u8f7b\u5219\u5f71\u54cd\u5e94\u7528\u6027\u80fd\uff0c\u8868\u73b0\u4e3a\u8fdf\u7f13\u5361\u987f\uff1b\u91cd\u5219\u5bfc\u81f4\u5e94\u7528\u5954\u6e83\uff0c\u8868\u73b0\u4e3a\u65e0\u6cd5\u6b63\u5e38\u4f7f\u7528\u3002\u4e3a\u4e86\u907f\u514d\u5185\u5b58\u6cc4\u6f0f\u5e26\u6765\u7684\u4e0d\u826f\u5f71\u54cd\uff0c\u9700\u8981\u5bf9\u5783\u573e\u56de\u6536\u673a\u5236\u8fdb\u884c\u4e86\u89e3\uff0c\u638c\u63e1\u5185\u5b58\u6cc4\u6f0f\u5206\u6790\u65b9\u6cd5\uff0c\u5b8c\u5584\u7ebf\u4e0a\u76f8\u5173\u76d1\u63a7\u63aa\u65bd\u3002"),(0,a.kt)("p",null,"\u5185\u5b58\u6cc4\u6f0f\u5b9a\u4f4d\u548c\u5206\u6790\u4e00\u822c\u9700\u8981\u8f85\u52a9\u5de5\u5177\uff0c\u6bd4\u5982 Chrome DevTools\u3002\u5f00\u53d1\u8005\u53ef\u4ee5\u901a\u8fc7 DevTools \u8bb0\u5f55\u9875\u9762\u6d3b\u52a8\u6982\u51b5\uff0c\u751f\u6210\u53ef\u89c6\u5316\u5206\u6790\u7ed3\u679c\uff0c\u4ece\u65f6\u95f4\u8f74\u4e2d\u76f4\u89c2\u4e86\u89e3\u5185\u5b58\u6cc4\u6f0f\u60c5\u51b5\uff1b\u5229\u7528 DevTools \u83b7\u53d6\u82e5\u5e72\u6b21\u5185\u5b58\u5feb\u7167\uff0c\u68c0\u67e5\u5185\u5b58\u5806\u6808\u53d8\u5316\uff1b\u4ee5\u53ca\u4f7f\u7528 Chrome \u4efb\u52a1\u7ba1\u7406\u5668\uff0c\u5b9e\u65f6\u76d1\u63a7\u5185\u5b58\u7684\u4f7f\u7528\u60c5\u51b5\u3002"),(0,a.kt)("h2",{id:"\u77e5\u8bc6\u70b9\u6df1\u5165"},"\u77e5\u8bc6\u70b9\u6df1\u5165"),(0,a.kt)("h3",{id:"1-\u6392\u67e5\u5185\u5b58\u6cc4\u6f0f\u5e38\u89c1\u95ee\u9898"},"1. \u6392\u67e5\u5185\u5b58\u6cc4\u6f0f\u5e38\u89c1\u95ee\u9898"),(0,a.kt)("p",null,"\u5728 JavaScript \u4e2d\uff0c\u5f53\u4e00\u4e9b\u4e0d\u518d\u9700\u8981\u7684\u6570\u636e\u4ecd\u7136\u53ef\u8fbe\u65f6\uff0cV8 \u4f1a\u8ba4\u4e3a\u8fd9\u4e9b\u6570\u636e\u4ecd\u5728\u88ab\u4f7f\u7528\uff0c\u4e0d\u4f1a\u91ca\u653e\u5185\u5b58\u3002\u4e3a\u4e86\u8c03\u8bd5\u5185\u5b58\u6cc4\u6f0f\uff0c\u6211\u4eec\u9700\u8981\u627e\u5230\u88ab\u9519\u8bef\u4fdd\u7559\u7684\u6570\u636e\uff0c\u5e76\u786e\u4fdd V8 \u80fd\u591f\u5c06\u5176\u6e05\u7406\u6389\u3002"),(0,a.kt)("p",null,"\u4ee3\u7801\u91cf\u8f83\u5c0f\u65f6\uff0c\u5f00\u53d1\u8005\u901a\u5e38\u53ef\u4ee5\u57fa\u4e8e\u4ee5\u4e0b\u57fa\u672c\u539f\u5219\u8fdb\u884c\u5feb\u901f\u81ea\u67e5\uff1a"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},"\u662f\u5426\u6ee5\u7528\u5168\u5c40\u53d8\u91cf\uff0c\u6ca1\u6709\u624b\u52a8\u56de\u6536\u3002"),(0,a.kt)("li",{parentName:"ol"},"\u662f\u5426\u6ca1\u6709\u6b63\u786e\u9500\u6bc1\u5b9a\u65f6\u5668\u3001\u95ed\u5305\u3002"),(0,a.kt)("li",{parentName:"ol"},"\u662f\u5426\u6ca1\u6709\u6b63\u786e\u76d1\u542c\u4e8b\u4ef6\u548c\u9500\u6bc1\u4e8b\u4ef6\u3002")),(0,a.kt)("p",null,"\u9664\u6b64\u4e4b\u5916\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u501f\u52a9\u5916\u90e8\u5de5\u5177\u8fdb\u884c\u5185\u5b58\u6cc4\u6f0f\u6392\u67e5\u3002"),(0,a.kt)("h3",{id:"2-\u4f7f\u7528-chrome-devtools-\u5b9a\u4f4d\u5185\u5b58\u6cc4\u6f0f"},"2. \u4f7f\u7528 Chrome DevTools \u5b9a\u4f4d\u5185\u5b58\u6cc4\u6f0f"),(0,a.kt)("h4",{id:"performance"},"Performance"),(0,a.kt)("p",null,(0,a.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/17002181/129483290-b6fa5f92-2509-49af-9866-e1b08502fe51.png",alt:"image"})),(0,a.kt)("p",null,"\u6253\u5f00\u51c6\u5907\u5206\u6790\u7684\u9875\u9762\u548c DevTools \u7684 Performance \u9762\u677f\uff0c\u52fe\u9009 Memory \u5e76\u5f00\u59cb\u5f55\u5236\uff0c\u5728\u6a21\u62df\u7528\u6237\u64cd\u4f5c\u4e00\u6bb5\u65f6\u95f4\u540e\u7ed3\u675f\u5f55\u5236\uff0cDevTools \u4f1a\u5c06\u8fd9\u6bb5\u65f6\u95f4\u5185\u7684\u9875\u9762\u884c\u4e3a\u6d3b\u52a8\u8fdb\u884c\u8bb0\u5f55\u548c\u5206\u6790\u3002"),(0,a.kt)("p",null,"\u901a\u8fc7\u751f\u6210\u7684\u7ed3\u679c\u53ef\u4ee5\u76f4\u89c2\u67e5\u770b\u5230\u5185\u5b58\u65f6\u95f4\u7ebf\uff0c\u4e86\u89e3\u5185\u5b58\u968f\u65f6\u95f4\u7684\u5360\u7528\u53d8\u5316\uff0c\u5982\u679c\u5185\u5b58\u5360\u7528\u66f2\u7ebf\u6210\u9636\u68af\u72b6\u4e00\u76f4\u4e0a\u5347\uff0c\u5219\u53ef\u80fd\u5b58\u5728\u5185\u5b58\u6cc4\u6f0f\u3002\u6309\u9700\u9009\u53d6\u65f6\u95f4\u7ebf\u4e2d\u7684\u533a\u57df\u7247\u6bb5\uff0c\u68c0\u67e5\u5bf9\u5e94\u65f6\u95f4\u6bb5\u5185\u7684\u6d3b\u52a8\u7c7b\u578b\u548c\u65f6\u95f4\u5360\u7528\uff0c\u4f5c\u4e3a\u6392\u67e5\u548c\u5b9a\u4f4d\u5185\u5b58\u6cc4\u6f0f\u7684\u8f85\u52a9\u529e\u6cd5\u3002"),(0,a.kt)("h4",{id:"memory"},"Memory"),(0,a.kt)("p",null,(0,a.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/17002181/130357605-39e4ffb0-f679-4331-91c0-f9958e70e8a9.png",alt:"image"})),(0,a.kt)("p",null,"\u6253\u5f00\u51c6\u5907\u5206\u6790\u7684\u9875\u9762\u548c DevTools \u7684 Memory \u9762\u677f\uff0c\u6309\u9700\u751f\u6210\u5feb\u7167\u3002\u6bcf\u4e2a\u5feb\u7167\u7684\u5185\u5bb9\u662f\u5feb\u7167\u65f6\u523b\uff0c\u8fdb\u884c\u4e00\u6b21\u5783\u573e\u56de\u6536\u540e\uff0c\u5e94\u7528\u4e2d\u6240\u6709\u53ef\u8fbe\u7684\u5bf9\u8c61\u3002"),(0,a.kt)("p",null,"\u5f53\u5f00\u53d1\u8005\u660e\u786e\u77e5\u9053\u4e0e\u5185\u5b58\u6cc4\u6f0f\u5173\u8054\u7684\u7528\u6237\u4ea4\u4e92\u6b65\u9aa4\u65f6\uff0c\u53ef\u4ee5\u751f\u6210\u591a\u6b21\u5185\u5b58\u5feb\u7167\u8fdb\u884c\u5bf9\u6bd4\uff0c\u6392\u67e5\u51fa\u6cc4\u6f0f\u7684\u5bf9\u8c61\uff1a\u5728\u505a\u7528\u6237\u4ea4\u4e92\u64cd\u4f5c\u4e4b\u524d\uff0c\u8fdb\u884c\u4e00\u6b21\u6b63\u5e38\u5185\u5b58\u5806\u6808\u4fe1\u606f\u7684\u5feb\u7167\uff1b\u5728\u505a\u7528\u6237\u4ea4\u4e92\u64cd\u4f5c\u4e2d\u6216\u64cd\u4f5c\u7ed3\u675f\u65f6\uff0c\u8fdb\u884c\u5185\u5b58\u5feb\u7167\u3002\u4f7f\u7528 Comparison \u89c6\u56fe\u6216\u4f7f\u7528 filter \u6309\u9700\u67e5\u770b\u5feb\u7167\u4e4b\u95f4\u7684\u5dee\u5f02\u3002"),(0,a.kt)("p",null,"\u4e0a\u9762\u7684\u56fe\u4e2d\u4f7f\u7528 filter \u68c0\u67e5\u5feb\u7167 2 \u548c\u5feb\u7167 3 \u7684\u5dee\u5f02\uff0c\u901a\u8fc7\u7ed3\u679c\u53ef\u77e5\u5728\u4e24\u4e2a\u5feb\u7167\u4e4b\u95f4\u6301\u7eed\u88ab\u5206\u914d clickCallback \u95ed\u5305\u3002\u901a\u8fc7\u70b9\u51fb\u6587\u4ef6\u8def\u5f84\u53ef\u4ee5\u5b9a\u4f4d\u5230\u5185\u5b58\u6cc4\u6f0f\u7684\u4ee3\u7801\u3002"),(0,a.kt)("p",null,(0,a.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/17002181/130357708-28497c8f-93f8-4afd-a53f-9506eaa3de9c.png",alt:"image"})),(0,a.kt)("h3",{id:"3-nodejs-\u4e2d\u7684\u5185\u5b58\u6cc4\u6f0f\u5b9a\u4f4d"},"3. Node.js \u4e2d\u7684\u5185\u5b58\u6cc4\u6f0f\u5b9a\u4f4d"),(0,a.kt)("p",null,"\u5982\u679c\u9700\u8981\u5b9a\u4f4d Node.js \u4e2d\u7684\u5185\u5b58\u6cc4\u6f0f\uff0c\u542f\u52a8 Node.js \u65f6\u5e26\u4e0a --inspect \u53c2\u6570\uff0c\u4ee5\u4fbf\u5229\u7528 Chrome DevTools \u5de5\u5177\u751f\u6210 Memory \u5feb\u7167\u6570\u636e\u3002\u5982\u56fe\u6240\u793a\uff0c\u542f\u52a8 Node.js \u670d\u52a1\u540e\uff0c\u6253\u5f00 Chrome DevTools\uff0c\u4f1a\u6709 Node \u6807\u8bc6\uff0c\u70b9\u51fb\u53ef\u4ee5\u6253\u5f00 Node \u4e13\u7528 DevTools\u3002"),(0,a.kt)("p",null,(0,a.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/17002181/130330062-c37a1085-1464-4cc9-8aa0-2f65decead03.png",alt:"image"})),(0,a.kt)("p",null,"\u9664\u6b64\u4e4b\u5916\uff0c\u4e5f\u53ef\u4ee5\u501f\u52a9\u7b2c\u4e09\u65b9\u5305 heapdump \u751f\u6210\u5feb\u7167\u6587\u4ef6\uff0c\u5bfc\u5165\u81f3 Chrome DevTools \u4e2d\u7684 Memory \u8fdb\u884c\u5feb\u7167\u5bf9\u6bd4\u3002"),(0,a.kt)("p",null,"\u542f\u52a8 Node.js \u65f6\u5e26\u4e0a --expose-gc \u53c2\u6570\u4ee5\u4fbf\u8c03\u7528 ",(0,a.kt)("inlineCode",{parentName:"p"},"global.gc()")," \u65b9\u6cd5\u89e6\u53d1\u5783\u573e\u56de\u6536\u3002\u501f\u52a9 ",(0,a.kt)("inlineCode",{parentName:"p"},"process.memoryUsage().heapUsed")," \u68c0\u67e5\u5185\u5b58\u5927\u5c0f\uff0c\u4f5c\u4e3a\u5185\u5b58\u6cc4\u6f0f\u7684\u8f85\u52a9\u5224\u65ad\u3002"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},'const heapdump = require("heapdump");\n\nconst capture = function () {\n global.gc();\n heapdump.writeSnapshot("./HZFE_HEAPSNAPSHOT/" + Date.now() + ".heapsnapshot");\n console.log("heapUsed:", process.memoryUsage().heapUsed);\n};\n\ncapture();\n\n/* \u53ef\u80fd\u6709\u5185\u5b58\u6cc4\u6f0f\u7684\u4ee3\u7801\u7247\u6bb5 start */\n// code\n/* \u53ef\u80fd\u6709\u5185\u5b58\u6cc4\u6f0f\u7684\u4ee3\u7801\u7247\u6bb5 end */\n\ncapture();\n')),(0,a.kt)("h2",{id:"\u53c2\u8003\u8d44\u6599"},"\u53c2\u8003\u8d44\u6599"),(0,a.kt)("ol",null,(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("a",{parentName:"li",href:"https://developer.chrome.com/docs/devtools/"},"Chrome DevTools")),(0,a.kt)("li",{parentName:"ol"},(0,a.kt)("a",{parentName:"li",href:"https://developer.chrome.com/docs/devtools/memory-problems/"},"Fix memory problems"))))}m.isMDXComponent=!0}}]); |