溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何使用Chrome開發者工具研究JavaScript的垃圾回收機制

發布時間:2021-09-30 15:42:59 來源:億速云 閱讀:186 作者:柒染 欄目:web開發

如何使用Chrome開發者工具研究JavaScript的垃圾回收機制,相信很多沒有經驗的人對此束手無策,為此本文總結了問題出現的原因和解決方法,通過這篇文章希望你能解決這個問題。

I use the following simple JavaScript code to illustrate:

var JerryTestArray = [];(function(){
      for( var i = 0; i < 100; i++){
        JerryTestArray[i] = document.createElement("div");
       }})();

Create a new empty tab in your Chrome, and first create a snapshot with empty heap status by click “Take Snapshot” button:

如何使用Chrome開發者工具研究JavaScript的垃圾回收機制

The Snapshot1 is generated.

如何使用Chrome開發者工具研究JavaScript的垃圾回收機制

Now switch to tab Console, paste the JavaScript code and execute it in console.

如何使用Chrome開發者工具研究JavaScript的垃圾回收機制

And switch to Profiles tab again to make the second snapshot:

如何使用Chrome開發者工具研究JavaScript的垃圾回收機制

Once done, select the second snapshot, choose “Comparison” and “Snapshot1” as filter:

如何使用Chrome開發者工具研究JavaScript的垃圾回收機制

We can find out from column “New” that 100 div nodes are created as we expect.

如何使用Chrome開發者工具研究JavaScript的垃圾回收機制

Since these nodes are not appended to document node so they are invisible to end user, so displayed as “Detached DOM”. The JerryTestArray still holds the reference to each div node so Garbage collector will not touch these nodes.

In order to make Garbage collector recycle the memory occupied by these nodes, just assign another value to JerryTestArray in console:

如何使用Chrome開發者工具研究JavaScript的垃圾回收機制

Once done, make the third snapshot and compare it with the second. Now we can find that the re-assignment to JerryTestArray will trigger the destruction of those 100 div nodes by Garbage collector:

如何使用Chrome開發者工具研究JavaScript的垃圾回收機制

Meanwhile, the string we use in assignment could also be inspected via the combination of filters below:

如何使用Chrome開發者工具研究JavaScript的垃圾回收機制

There is another kind of profile in Chrome development tool which can give you an overview about timeline of memory allocation:

如何使用Chrome開發者工具研究JavaScript的垃圾回收機制

Click Start button in above screenshot, and paste the following code in console and executed:

var JerryTestArray = [];(function(){
      for( var i = 0; i < 98; i++){
        JerryTestArray[i] = document.createElement("span");
        JerryTestArray[i].className = "JerryClassName" + i;
       }})();

After the code is executed, paste the following code and execute:

JerryTestArray[30] = "this is a long test............................end";

Now stop the profile. The profile is displayed as below. The highlighted vertical blue line indicates the timeslot when the 97 Span elements are created. Note that the number of Span elements displayed here is not 98 but 97 since Chrome development tool displays the final status of objects after “stop profile” button is clicked ( the reference to 30th Span element is replaced by String, so it is recycled by GC ).

如何使用Chrome開發者工具研究JavaScript的垃圾回收機制

You can drag the two vertical bars to define the time range between which you would like to inspect. For example the time range below contains the timeslot when the below assignment occurs:

JerryTestArray[30] = "this is a long test............................end";

如何使用Chrome開發者工具研究JavaScript的垃圾回收機制

With this gained knowledge now we can check the memory allocation and destruction in some real application. For example click tile “My Tasks” to enter this application, make the first snapshot and click back button within application to return to launchpad, and make the second snapshot and review the comparison result.

如何使用Chrome開發者工具研究JavaScript的垃圾回收機制

From the result we find out lots of stuff are deleted after we return to launchpad:

如何使用Chrome開發者工具研究JavaScript的垃圾回收機制

Hover your mouse to a given destructed object and you can review its detail:

如何使用Chrome開發者工具研究JavaScript的垃圾回收機制

For more tips How I use Chrome development tool in my daily work, please refer to this blog  Chrome Development Tool tips used in my daily work

看完上述內容,你們掌握如何使用Chrome開發者工具研究JavaScript的垃圾回收機制的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女