{"id":545,"date":"2025-12-06T16:08:09","date_gmt":"2025-12-06T08:08:09","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=545"},"modified":"2025-12-06T16:08:09","modified_gmt":"2025-12-06T08:08:09","slug":"javascript%e4%b8%ad%e9%a2%91%e7%b9%81%e5%9e%83%e5%9c%be%e5%9b%9e%e6%94%b6gc%e7%9a%84%e9%81%bf%e5%85%8d%e6%96%b9%e6%b3%95%e4%b8%8e%e5%ae%9e%e8%b7%b5","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/06\/javascript%e4%b8%ad%e9%a2%91%e7%b9%81%e5%9e%83%e5%9c%be%e5%9b%9e%e6%94%b6gc%e7%9a%84%e9%81%bf%e5%85%8d%e6%96%b9%e6%b3%95%e4%b8%8e%e5%ae%9e%e8%b7%b5\/","title":{"rendered":"JavaScript\u4e2d\u9891\u7e41\u5783\u573e\u56de\u6536(GC)\u7684\u907f\u514d\u65b9\u6cd5\u4e0e\u5b9e\u8df5"},"content":{"rendered":"\n<p>\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd <strong>\u300aJavaScript \u4e2d\u9891\u7e41\u5783\u573e\u56de\u6536\uff08GC\uff09\u907f\u514d\u65b9\u6cd5\u4e0e\u5b9e\u8df5\u300b<\/strong>\uff08\u6700\u65b0\u7248 2025\uff09\uff0c\u5305\u542b\u6210\u56e0\u2192\u89e3\u51b3\u65b9\u6848\u2192\u4ee3\u7801\u793a\u4f8b\uff0c\u975e\u5e38\u9002\u5408\u5de5\u7a0b\u5b9e\u8df5\u3001\u9762\u8bd5\u548c\u8c03\u4f18\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\ude80 JavaScript \u4e2d\u9891\u7e41\u5783\u573e\u56de\u6536\uff08GC\uff09\u907f\u514d\u65b9\u6cd5\u4e0e\u5b9e\u8df5\uff082025 \u5b8c\u6574\u6307\u5357\uff09<\/h1>\n\n\n\n<p>V8\uff08Chrome \/ Node.js\uff09\u7684 GC \u7c7b\u578b\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Minor GC\uff08Scavenge\uff09<\/strong>\uff1a\u65b0\u751f\u4ee3\uff0c\u9891\u7387\u9ad8\u3001\u901f\u5ea6\u5feb<\/li>\n\n\n\n<li><strong>Major GC\uff08Mark-Sweep\/Mark-Compact\uff09<\/strong>\uff1a\u8001\u751f\u4ee3\uff0c\u9891\u7387\u4f4e\u4f46\u4ee3\u4ef7\u5f88\u5927<\/li>\n\n\n\n<li><strong>\u9891\u7e41 GC\uff08\u5c24\u5176\u662f Minor GC\uff09\u4f1a\u5bfc\u81f4\u5361\u987f\u3001\u6389\u5e27\u3001\u541e\u5410\u4e0b\u964d<\/strong><\/li>\n<\/ul>\n\n\n\n<p>\u4e0b\u9762\u4ece <strong>\u6839\u56e0 \u2192 \u65b9\u6848 \u2192 \u6700\u4f73\u5b9e\u8df5 \u2192 \u4ee3\u7801\u4f8b\u5b50<\/strong> \u5168\u8986\u76d6\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2b50 \u4e00\u3001\u5bfc\u81f4\u9891\u7e41 GC \u7684\u4e3b\u8981\u539f\u56e0<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">1. \u521b\u5efa\u5927\u91cf\u4e34\u65f6\u5bf9\u8c61<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nfor (let i = 0; i &amp;lt; 1e5; i++) {\n  const tmp = { i };\n}\n\n<\/pre><\/div>\n\n\n<p>\u5927\u91cf\u77ed\u751f\u547d\u5468\u671f\u5bf9\u8c61\u4f1a\u585e\u6ee1\u65b0\u751f\u4ee3 \u2192 Burst GC\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2. \u95ed\u5305\u5bfc\u81f4\u7684\u5bf9\u8c61\u957f\u671f\u5b58\u6d3b<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nfunction test() {\n  let bigData = new Array(100000).fill(1);\n  return function () {\n    console.log(bigData&#x5B;0]);\n  };\n}\n\n<\/pre><\/div>\n\n\n<p>\u95ed\u5305\u4f1a\u8ba9 <code>bigData<\/code> \u6c38\u8fdc\u65e0\u6cd5\u91ca\u653e\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3. \u957f\u94fe\u8868 \/ \u5927\u6570\u7ec4\u53cd\u590d push\/pop<\/h2>\n\n\n\n<p>\u5bfc\u81f4\u5bf9\u8c61\u9891\u7e41\u664b\u5347\u5230\u8001\u751f\u4ee3\uff0c\u589e\u52a0 Major GC \u9891\u7387\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4. \u5168\u5c40\u53d8\u91cf\u672a\u91ca\u653e<\/h2>\n\n\n\n<p>\u5168\u5c40\u5f15\u7528\u94fe\u4e0d\u65ad\u6269\u5927\uff0c\u4f7f\u5f97 GC \u65e0\u6cd5\u6e05\u7406\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5. DOM \u8282\u70b9\u5f15\u7528\u6b8b\u7559<\/h2>\n\n\n\n<p>\u5e38\u89c1\u4e8e SPA \u9879\u76ee\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst cache = &#x5B;];\ncache.push(document.getElementById(&quot;list&quot;));\n\n<\/pre><\/div>\n\n\n<p>DOM \u5220\u9664\u540e JS \u4ecd\u5f15\u7528 \u2192 \u5185\u5b58\u6cc4\u9732\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2b50 \u4e8c\u3001\u907f\u514d\u9891\u7e41 GC \u7684\u4f18\u5316\u7b56\u7565\uff08\u6838\u5fc3\uff09<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">1. <strong>\u5bf9\u8c61\u6c60\uff08Object Pool\uff09\u590d\u7528\u5bf9\u8c61<\/strong><\/h2>\n\n\n\n<p>\u9002\u7528\u4e8e\u52a8\u753b\u3001\u5927\u91cf\u7c92\u5b50\u3001\u6e38\u620f\u3001\u56fe\u8868\u7b49\u573a\u666f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u2728 \u63a8\u8350\u505a\u6cd5<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst pool = &#x5B;];\n\nfunction createObj() {\n  return pool.length ? pool.pop() : { x: 0, y: 0 };\n}\n\nfunction releaseObj(obj) {\n  pool.push(obj);\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2. <strong>\u907f\u514d\u5728\u5faa\u73af\u91cc\u521b\u5efa\u4e34\u65f6\u5bf9\u8c61<\/strong><\/h2>\n\n\n\n<p>\u274c \u9519\u8bef\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nfor (...) {\n  const t = { x, y }; \n}\n\n<\/pre><\/div>\n\n\n<p>\u2714 \u6b63\u786e\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst temp = { x: 0, y: 0 };\nfor (...) {\n  temp.x = x;\n  temp.y = y;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3. <strong>\u51cf\u5c11\u95ed\u5305\u4e2d\u5f15\u7528\u7684\u5927\u5bf9\u8c61<\/strong><\/h2>\n\n\n\n<p>\u274c \u9519\u8bef\u65b9\u5f0f\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nfunction f() {\n  let big = new Array(1e5);\n  return () =&gt; console.log(big&#x5B;0]);\n}\n\n<\/pre><\/div>\n\n\n<p>\u2714 \u6700\u4f73\u5b9e\u8df5\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nfunction f() {\n  const v0 = 123;\n  return () =&gt; console.log(v0);\n}\n\n<\/pre><\/div>\n\n\n<p>\u628a\u5927\u5bf9\u8c61\u79fb\u52a8\u5230\u5c40\u90e8\u3001\u7f13\u5b58\u3001\u6216 worker\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4. <strong>\u5c06\u5927\u91cf\u8fd0\u7b97\u653e\u5165 Web Worker<\/strong><\/h2>\n\n\n\n<p>\u907f\u514d\u5360\u7528\u4e3b\u7ebf\u7a0b\u5e76\u51cf\u5c11\u4e34\u65f6\u5bf9\u8c61\u5806\u79ef\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst worker = new Worker(&quot;worker.js&quot;);\nworker.postMessage(data);\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5. <strong>\u624b\u52a8\u65ad\u5f00\u5f15\u7528\uff08\u5c24\u5176\u662f DOM + JS\uff09<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u793a\u4f8b\uff1a<\/h3>\n\n\n\n<p>DOM \u88ab remove \u540e JS \u6570\u7ec4\u8fd8\u5f15\u7528\u5b83 \u2192 \u6c38\u8fdc\u4e0d\u91ca\u653e\u3002<\/p>\n\n\n\n<p>\u2714 \u5fc5\u987b\u6e05\u7406\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\ncache.length = 0;\ndomNode = null;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">6. <strong>\u4f7f\u7528 TypedArray \/ ArrayBuffer<\/strong><\/h2>\n\n\n\n<p>\u5b83\u4eec\u4e0d\u4f1a\u4ea7\u751f\u592a\u591a GC trace\uff0c\u5bf9\u56fe\u5f62\u8ba1\u7b97\u975e\u5e38\u53cb\u597d\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst buf = new Float32Array(1000);\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">7. <strong>\u5b9a\u957f\u6570\u7ec4\u4f18\u4e8e push\/pop<\/strong><\/h2>\n\n\n\n<p>\u56e0\u4e3a V8 \u4f1a\u628a\u5b9a\u957f\u6570\u7ec4\u4f18\u5316\u4e3a packed elements\uff0c\u51cf\u5c11 GC \u538b\u529b\u3002<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst arr = new Array(1000); \/\/ \u63a8\u8350\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">8. <strong>\u907f\u514d JSON.parse(JSON.stringify()) \u6df1\u62f7\u8d1d<\/strong><\/h2>\n\n\n\n<p>\u5b83\u4f1a\u77ac\u95f4\u521b\u5efa\u5927\u91cf\u4e34\u65f6\u5bf9\u8c61 \u2192 GC \u7206\u70b8\u3002<\/p>\n\n\n\n<p>\u2714 \u63a8\u8350\u4f7f\u7528 structuredClone()<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nconst newObj = structuredClone(oldObj);\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2b50 \u4e09\u3001\u524d\u7aef\u9879\u76ee\u4e2d\u907f\u514d\u9891\u7e41 GC \u7684\u5b9e\u8df5\uff08\u5de5\u7a0b\u5316\uff09<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">1. \u52a8\u753b\u573a\u666f\uff08FPS \u6389\u5e27\u5f88\u5e38\u89c1\uff09<\/h2>\n\n\n\n<p>\u274c \u4e0d\u8981\u5728 requestAnimationFrame \u4e2d\u521b\u5efa\u5bf9\u8c61<br>\u2714 \u5bf9\u8c61\u6c60 + TypedArray<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2. \u5217\u8868\u6e32\u67d3\uff08React\/Vue\uff09<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u907f\u514d\u6bcf\u6b21\u6e32\u67d3\u521b\u5efa\u533f\u540d\u5bf9\u8c61\uff1a <code>:style=\"{ fontSize: size + 'px' }\" \u274c style=\"font-size: 16px;\" \u2714<\/code><\/li>\n\n\n\n<li>\u907f\u514d\u521b\u5efa\u65b0\u6570\u7ec4\uff08\u5982 <code>map()<\/code>\uff09<\/li>\n\n\n\n<li>Key \u7a33\u5b9a<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3. Node.js \u670d\u52a1\u7aef<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5927\u5185\u5b58\u5bf9\u8c61\u4f7f\u7528 Buffer \/ Uint8Array<\/li>\n\n\n\n<li>\u6ce8\u610f\u95ed\u5305\u6cc4\u9732<\/li>\n\n\n\n<li>\u53ef\u4f7f\u7528 <code>--max-old-space-size=4096<\/code> \u9002\u5f53\u63d0\u5347\u5806\u7a7a\u95f4<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2b50 \u56db\u3001\u4f7f\u7528 Chrome DevTools \u5206\u6790 GC<\/h1>\n\n\n\n<p>\u8fdb\u5165 Performance \u2192 \u52fe\u9009 Memory \u2192 \u5f55\u5236<\/p>\n\n\n\n<p>\u4f60\u53ef\u4ee5\u770b\u5230\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u6307\u6807<\/th><th>\u610f\u4e49<\/th><\/tr><\/thead><tbody><tr><td>JS Heap Timeline<\/td><td>\u5185\u5b58\u662f\u5426\u6301\u7eed\u4e0a\u6da8\uff08\u6cc4\u9732\uff09<\/td><\/tr><tr><td>GC Major\/Minor \u4e8b\u4ef6<\/td><td>\u662f\u5426\u592a\u9891\u7e41<\/td><\/tr><tr><td>Detached DOM nodes<\/td><td>\u662f\u5426\u6709 DOM \u6cc4\u9732<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2b50 \u4e94\u3001GC \u4f18\u5316 Checklist\uff08\u53ef\u76f4\u63a5\u7528\u4e8e\u9879\u76ee\uff09<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 \u907f\u514d\u5faa\u73af\u4e2d\u521b\u5efa\u5bf9\u8c61<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 \u4f7f\u7528\u5bf9\u8c61\u6c60 Object Pool<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 \u6e05\u7406\u95ed\u5305\u4e2d\u5f15\u7528\u7684\u5927\u5bf9\u8c61<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 \u907f\u514d JSON \u6df1\u62f7\u8d1d<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 \u4f7f\u7528 Web Worker \u5904\u7406\u8ba1\u7b97<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 \u6e05\u7406 DOM \u5f15\u7528<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 \u4f7f\u7528 TypedArray \u5904\u7406\u5927\u91cf\u6570\u636e<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 \u907f\u514d\u9891\u7e41 push\/pop \u89e6\u53d1\u6570\u7ec4\u53d8\u5f62<\/h3>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd \u300aJavaScript \u4e2d\u9891\u7e41\u5783\u573e\u56de\u6536\uff08GC\uff09\u907f\u514d\u65b9\u6cd5\u4e0e\u5b9e\u8df5\u300b\uff08\u6700&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/06\/javascript%e4%b8%ad%e9%a2%91%e7%b9%81%e5%9e%83%e5%9c%be%e5%9b%9e%e6%94%b6gc%e7%9a%84%e9%81%bf%e5%85%8d%e6%96%b9%e6%b3%95%e4%b8%8e%e5%ae%9e%e8%b7%b5\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-545","post","type-post","status-publish","format-standard","hentry","category-javascript"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=545"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/545\/revisions"}],"predecessor-version":[{"id":546,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/545\/revisions\/546"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}