問題描述
在尋找 JavaScript 庫(鉚釘)中的性能問題時(shí)，我發(fā)現(xiàn)垃圾收集在一次運(yùn)行中發(fā)生了 3 到 4 次，占用了大約 15% 的執(zhí)行時(shí)間(使用 Chrome DevTools JS Profile).
While looking for performance issues in a JavaScript library (rivets), i found that garbage collection occurs three to four times in a run, taking ~15% of execution time (using Chrome DevTools JS Profile).
由于垃圾回收的原因，至少有 30 個(gè)地方創(chuàng)建了臨時(shí)函數(shù)/對(duì)象作為潛在候選對(duì)象.
There are at least 30 places where temporary functions / objects are created being potential candidates for the reason of the garbage collection.
我想知道是否有辦法找到負(fù)責(zé)分配被垃圾回收的內(nèi)存的函數(shù)，這樣我就可以專注于我的性能調(diào)整.
I'd like to know if there's a way to find what functions are responsible for the allocation of the memory being garbage collected, so i can focus my performance tuning.
我記錄了堆分配時(shí)間線，但它沒有區(qū)分被垃圾收集的內(nèi)存并且仍然持有引用(沒有像 DevTools 中指出的灰色條 doc)
I recorded Heap Allocation TimeLine but it does not differentiate memory that was garbage collected and that still holds a reference (there's no gray bar as pointed in DevTools doc)
還沒有運(yùn)氣記錄堆分配配置文件.
Also recorded Heap Allocation Profile without luck.
推薦答案
在 DevTools 的 Profiles 選項(xiàng)卡中選擇 Record Heap Allocation.包裝 javascript 應(yīng)在對(duì) setTimeout() 的調(diào)用中進(jìn)行評(píng)估，持續(xù)時(shí)間設(shè)置為足夠的時(shí)間，以便在函數(shù)傳遞給 之前單擊 被調(diào)用；例如Start>setTimeout
At Profiles tab at DevTools select Record Heap Allocation. Wrap javascript which should be evaluated within a call to setTimeout() with a duration set to enough time to click Start before function passed to setTimeout is called; for example
<!DOCTYPE html>
<html>
<head>
<script>
t = 5;
setTimeout(function() {
(function test1() {
var a = 123;
function abc() {
return a
}
abc();
}());
}, 10000)
</script>
</head>
<body></body>
</html>
當(dāng) setTimeout 被稱為藍(lán)條時(shí)，可能會(huì)在時(shí)間軸上出現(xiàn)一個(gè)灰條.單擊 Ctr+E 停止記錄堆配置文件.
When setTimeout is called a blue bar, possibly followed by a gray bar should appear at timeline. Click Ctr+E to stop recording heap profile.
在時(shí)間線圖中選擇藍(lán)色或灰色條.在默認(rèn)選項(xiàng)為 Summary 的下拉菜單中選擇 Containment.選擇
Select blue or gray bar at timeline graph. Select Containment at dropdown menu where default option is Summary. Select
[1] :: (GC roots) @n
其中 n 是一個(gè)數(shù)字.
通過單擊[1] :: (GC 根) 左側(cè)的三角形來展開選擇.選擇[1] :: (GC root)的一個(gè)元素，查看顯示的Distance、Shallow Size、Retained Size 用于選擇的列.
Expand the selection by clicking triangle to left of [1] :: (GC roots). Select an element of [1] :: (GC roots), review the displayed Distance, Shallow Size, and Retained Size columns for the selection.
要查看特定功能，請(qǐng)滾動(dòng)到
To check specific functions, scroll to
[2] :: (External strings) @n
到應(yīng)該列出全局變量和函數(shù)調(diào)用的位置；例如，"t" 和 "setTimeout" 來自 javascrip.檢查相應(yīng)的 Distance、Shallow Size 和 Retained Size 列以進(jìn)行選擇.
to where global variables and function calls should be listed; i.e.g., "t" and "setTimeout" from above javascrip. Check corresponding Distance, Shallow Size, and Retained Size columns for the selection.
這篇關(guān)于如何檢測(cè)在 JavaScript 中觸發(fā)垃圾收集的內(nèi)存分配?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！