2014年8月26日、Google WebPerf(London WebPerf Group)に投稿されました。
効率的なJavaScript Webアプリケーションは、スムーズで高速でなければなりません。ユーザーと対話するアプリケーションは、メモリが効率的に使用されることを保証する方法を検討する必要があります。これは、消費されすぎるとページがクラッシュし、ユーザーにリロードを強制するためです。そして、あなたは隅に隠れて泣くことができます。
自動ゴミ収集は、特に大規模で長期にわたるWebアプリケーションで、効果的なメモリ管理の代わりではありません。この講義では、ChromeのDevtoolsを介してメモリを効果的に管理する方法を示します。
また、メモリリーク、頻繁なゴミ収集の一時停止、メモリ全体の膨満感などのパフォーマンスの問題を解決する方法を学びます。
Addy Osmaniは、彼のPPTに多くの例を示しており、Chrome V8でメモリリークを引き起こします。
1)オブジェクトプロパティを削除してこのオブジェクトを遅くする(15倍のメモリを消費する)
コードコピーは次のとおりです。
var o = {x: 'y'};
OXを削除します。 //この時点でoは遅いオブジェクトになります
牛; //
var o = {x: 'y'};
o = null; //このようなものでなければなりません
2)閉鎖
閉鎖外の変数を閉鎖に導入する場合、このオブジェクトは、閉鎖が終了したときにガベージを収集する(GC)にすることはできません。
コードコピーは次のとおりです。
var a = function(){
var ragastR = new Array(1000000).Join( 'x');
return function(){
Return areagestr;
}
}();
3)DOMリーク
元のCOMが削除されると、削除されていない場合、サブノード参照をリサイクルできません。
コードコピーは次のとおりです。
var select = document.queryselector;
var treeref = select( '#tree');
// comツリーでは、leafrefはtreefreの子ノードです
var leafref = select( '#leaf');
var body = select( 'body');
Body.RemoveChild(Treeref);
// #Treerefがまだそこにあるため、ツリーを返済できません
//解決:
treeref = null;
//葉がまだそこにあるので、ツリーはまだリサイクルできません
leafref = null;
// #treeをリリースできます。
4)タイマーカウント(決定)タイマーリーク
タイマーは、メモリリークが発生する一般的な場所でもあります。
コードコピーは次のとおりです。
for(var i = 0; i <90000; i ++){
var buggyobject = {
callagain:function(){
var ref = this;
var val = setimeout(function(){
ref.callagain();
}、90000);
}
}
buggyobject.callagain();
//リサイクルしたいのですが、タイマーはまだそこにあります
buggyobject = null;
}
5)メモリのデバッグ
Chrome独自のメモリデバッグツールは、メモリの使用状況とメモリの漏れを簡単に表示できます。
タイムラインの[録音] - >メモリをクリックします:
その他のコンテンツについては、元のPPTを確認してください。