大前端— 可視化方式的內存管理

內存問題的外在表現:

  1. 頁面出現延遲加載,或經常性暫停,不斷地內存溢出,然後回收,頻繁垃圾回收
  2. 頁面持續性出現糟糕的性能, 不斷地申請新的內存,內存膨脹
  3. 頁面的性能隨時間延長越來越差,內存泄漏

如果出現以上的表現的話,就可以看一看是否是內存出現問題了

如何可視化內存的情況呢?

1、任務管理器

   

這裏的 實際大小 就是之前 js 內存 裏面寫的 可達內存

2、timeline時序圖記錄

點擊開始錄製,然後開始一波操作,就是有一個用戶來使用則一個網頁

然後點擊 停止,就可以看到 生成了一堆的 快照

這裏的js 呈現很典型的 城牆一樣的形狀,就是出現了上文所說的頻繁回收垃圾

這裏還可以專門看 dom 節點 的內存情況,沒錯了,dom 的內存一直在上升

3、堆快照查找分離dom

   分離 dom,不在界面上,但是 存在內存中,

很典型的就是 vue 中的 keep-alive 組件了,就是將當前 頁面的 vue 實例 存儲到一個對象之中,然後使用 頁面的 name 等屬性作爲key。然後等到 需要複用了,就用 key 去重新拿出來就好了

而 vue 實例之中的 el ,就是 一個 真實的dom 節點

 

4、判斷是否存在頻繁的垃圾回收

  1.    timeline 是否頻繁的 上升降低
  2.   任務管理器裏面是否 頻繁的 增大減小
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章