1.メモリリークとメモリオーバーフロー

メモリリーク (メモリリーク):使用されなくなったメモリは時間内に解放されません。
メモリ不足:再利用できないメモリがあるか、アプリケーションシステムで使用されているメモリが多すぎます。これにより、実行中のプログラムが使用するメモリが、提供できる最大メモリよりも大きくなります。

2.漏れの理由

jsメソッドの書き込み (クロージャ、グローバル変数など)、domイベント監視、サイクルタイマーなどによるリーク。
コンポーネントのリーク (DOMリークとは、コンポーネントDOMを破棄できないことを意味します) は、DOMアップロードされたイベントやオブジェクト配列などのデータを解放できなくなります。

3.`chrome Memory`はじめに

コンソールのパネルを開くMemoryか、長押ししてF12開きます。
ヒープスナップショットの種類を選択します。私は通常、最初の 2 つを使用します:Heap snapshot(JS堆快照)とAllocation instrumentation on timeline(JS堆分配时间线).
記録を開始する前に、[ガベージコレクション] をクリックし、[記録の開始] をクリックします。ヒープメモリがタイムラインに動的に割り当てられている場合はJS、記録が終了する前にガベージコレクションをもう一度クリックしてから、記録を終了します。
ここに画像の説明を挿入

4. ソリューション

4.1、JS ヒープのスナップショット

Summary概要ビュー:コンストラクターごとにグループ化。オブジェクトとそれらが使用するメモリをキャプチャするために使用されます。DOM のメモリリークを特定するのに特に役立ちます。
Comparison比較ビュー: 2 つのスナップショットを比較します。さまざまな操作後のヒープスナップショットを比較し、メモリの解放と参照カウントを確認し、メモリリークが発生しているかどうかとその原因を分析するために使用されます。
Containmentコンテンツビュー:ヒープの内容を表示します。オブジェクト構造を表示するのに適し、オブジェクトの参照状況を分析するのに役立ちます。クロージャーの分析やオブジェクトの詳細な分析に役立ちます。
Statistics統計ビュー:ヒープ統計の概要。

`Summary`概要図

ここに画像の説明を挿入
説明:
Constructor：ノードの下のコンストラクターとオブジェクトはすべて、コンストラクターを変更することによって作成されます。
Distance：ルートノードからの距離。
Objects Count：オブジェクトの数とパーセンテージ。
Shallow size：オブジェクトの直接メモリーの合計量。直接メモリーとは、オブジェクト自体が占有するメモリー・サイズを指します。
Retained size：オブジェクトの最大予約メモリ。予約メモリとは、オブジェクトの削除後に解放できるメモリの部分を指します。
Click to expand the constructor, and you can see all object instances related to the constructor. @ の後の数字は、オブジェクトインスタンスの一意の識別子です。

一般的な最上位コンストラクター:

(global property)：グローバルオブジェクトと通常オブジェクトの中間オブジェクトは、従来の考え方とは異なります。たとえば、Person オブジェクトが Window で定義されている場合、それらの間の関係はです[global] => (global property) => Person。中間オブジェクトを使用する理由は、パフォーマンスを考慮するためです。
(closure)：関数クロージャーを使用するオブジェクト。
(array, string, number, regexp)：プロパティが指すオブジェクト型の配列Array/String/Number/Regexp。
HTMLDivElement/HTMLAnchorElement/DocumentFragment：コードによって参照される要素または特定のドキュメントオブジェクトへの参照。
黄色のオブジェクトインスタンスは、JS コードによって参照されることを意味し、赤色のオブジェクトインスタンスは、黄色のノードによって参照されるフリーノードを意味することに注意してください。新しいバージョン (テスト済み 69) にはカラーコードがないようです。

JS ヒープスナップショットを使用して、DOM リークを見つけることができます。クラスフィルター (クラスフィルター) テキストボックスに Detached と入力して、デタッチされた DOM ツリーを検索します。分離されたノードが JS によって参照されている場合は、リークポイントである可能性があります。例として、次のコードを取り上げます。

<html>

<head>
</head>

<body>
    <button id="createBtn">增加节点</button>
    <script>
        function create() {
      
      
            var ul = document.createElement('ul');
            for (var i = 0; i < 10; i++) {
      
      
                var li = document.createElement('li');
                ul.appendChild(li);
            }
            detachedNodes = ul;
        }
        document.getElementById('createBtn').addEventListener('click', create);
    </script>
</body>

</html>

スナップショットをクリックする前にガベージコレクションをクリックします。
ここに画像の説明を挿入

[ノードの追加] ボタンを 1 回クリックすると、記録スナップショットは次のようになります。
ここに画像の説明を挿入

参照されている < ul > 分離ノードがあることがわかりましたwindow.detachedNodes。コードを見ると、var 宣言がないため、グローバル変数になっています。したがって、DOM を解放することはできません。

`Comparasion`比較ビュー

特定の操作がメモリリークを引き起こすかどうかを確認するために、スナップショットを比較する手順は次のとおりです。 1. 何も操作せず、
最初のヒープスナップショットを取得
します。操作
3. 2 番目のヒープスナップショットを取得し、比較ビューに切り替えて、最初のヒープスナップショットとの比較を指定します

たとえば、ログインページのメモリがリークしていると感じた場合は、最初にホームページにログインして、最初のヒープスナップショットを取得できます。次に、ログインインターフェイスを終了し、再度ホームページにログインして、2 番目のスナップショットを記録します。2 つのスナップショットのサイズを比較する、成長が漏れの可能性がある場合は、操作を数回繰り返すことができます。各録音の前にクリックすることを忘れないでくださいガベージコレクション。

比較を使用して、最初と 2 番目のスナップショットの違いを確認します
ここに画像の説明を挿入
知らせ：
Chrome開発者ツールで関数を確認Memoryすると、各コンポーネントでメモリリークが発生して起動できなくなっている原因がわかります.
このときは、消去法を使用してリークポイントを見つける必要があります.メインメニューの切り替え時にメモリリークが発生する.まず,各メニューページの内容にフルアノテーションを付けてから,メインメニューを切り替える.テストの結果,メモリリークは発生していません.

`Containment view`スナップショットコンテンツビューの表示

コンテンツビューは、実際にはアプリケーションのオブジェクト構造の鳥瞰図です。これにより、関数クロージャーにドリルダウンし、VM 内部オブジェクトを観察し、アプリケーションの基礎となるメモリ使用量を確認できます。
ここに画像の説明を挿入
このビューには、いくつかの一般的なエントリが表示されます。

DOMWindow objects:JavaScriptコードのグローバルオブジェクト
Native objects：ブラウザーのネイティブオブジェクトは、DOMノードやCSSルールなどの簡単な操作のために JS 仮想マシンに統合されます。

クロージャーに関する小さな提案: 名前付き関数のクロージャーは、無名関数のクロージャーよりも分析とデバッグが容易です。

// 匿名闭包
function createLargeClosure() {
    
    
    var largeStr = new Array(1000000).join('x');

    var lC = function() {
    
    
        return largeStr;
    };

    return lC;
}


// 命名闭包
function createLargeClosure() {
    
    
    var largeStr = new Array(1000000).join('x');

    var lC = function lC() {
    
    
        return largeStr;
    };

    return lC;
}

ここに画像の説明を挿入

スナップショット統計の統計ビューを表示する

スタック統計の概要。ヒープスナップショットの分布を明確に確認できます。
ここに画像の説明を挿入

4.2、JS ヒープ割り当てタイムライン

ヒープ割り当てを継続的に記録することでAllocation instrumentation on timeline、オブジェクトが作成されたとき、メモリリークが発生したときなどを示します。

ここに画像の説明を挿入

上のバーは、ヒープに作成された新しいオブジェクトを表します。高さはオブジェクトのサイズを示し、色はオブジェクトのメモリリリースを示します。青色の列は、オブジェクトがtimelineで生成され、終了前にまだ存在していることを示します。灰色の列は、オブジェクトがtimelineで生成されたが、終了前にリサイクルされています。
アクションを繰り返し実行できますが、最後に保持される青色の列が多数ある場合、これらの青色の列はメモリリークの可能性があります。
左側に予期しない青いバーがある場合は、メモリリークの可能性が高いです。

上記は、Vue2 つの記録間で繰り返し切り替えられるプロジェクトのヒープ割り当て動作です. 特定のヒープ割り当てに焦点を当て、特定のオブジェクト情報を表示できます. ヒストグラムでマウスホイールをスライドすると、一定期間のヒープ割り当てを表示できます。たとえば、そのうちの 3 つはVueComponentリサイクルされていないことがわかりました。クリックして拡大すると詳細が表示されます。これら 3 つのコンポーネントの情報は同じであることがわかります。つまり、コンポーネントはリリースされていません。まず、コンポーネントが破壊されているかどうかを確認します。破棄されている場合は、イベントがアンバインドされ、タイマーがキャンセルされているかどうかを確認します.イベントバスにバインドされたイベントのアンバインドには特に注意してください. オブジェクト、データ、イベントがマウントされるため、値のリークも発生する可能性があるため、値のリークに
ここに画像の説明を挿入
注意してください。したがって、リークに対処するときは、最初にリーク値が 0 であることを確認し、次に js クロージャ、ループタイマー、およびイベントリスナーに移動して確認するのが最善です。VueComponentVueComponentObject ArrayVueComponentVueComponent

メモリ使用量を調べる方法、Vue はタブページを繰り返し更新するため、サーフェスメモリが増加し続け、システムの応答がますます遅くなり、メモリ使用量は 4 g です。

1.メモリリークとメモリオーバーフロー

2.漏れの理由

3.`chrome Memory`はじめに

4. ソリューション