JavaScript Memory Management Masterclass のメモ

JavaScript Memory Management Masterclass // Speaker Deckのメモです。

Q. メモリリークはどうやってチェックするの?
A. DevToolsでSnapshotsを取って比較

Hidden Classes

V8にはHidden Classesがあるので、deleteするのは最適化を逆に妨げる。

Closures

循環参照によるリーク

DOM Leak

DOMツリーは親を消しても、子のどれかを保持してる場合は、
そのツリーはGCによって回収されないので、
子もちゃんとnullなどして回収されるようにしないといけない。

Timers

ES6 WeakMaps

WeakMapsはメモリリークを避けるために必要。
普通にオブジェクトを使うと強参照になるので、GCで回収されない。

Memory Checklist

  • 不必要なDOM elementへの強参照を避ける
  • 循環参照を避ける
  • 適切なスコープを使う
  • 必要なくなったevent listenersは解除する
  • ローカルキャッシュを管理する
    • 管理する事で古いオブジェクトを捨てる

メモリ管理の基礎

Core Concepts

  • 値の型は何?
  • メモリ上で値はどうやって管理されてる?
  • garbadgeって何?
  • leakって何?

garbadgeって何?

Garbageとはroot nodeから辿りつけない値達の事

garbage collection はそれらのgarbageをシステムに伝える事

memory leakって何?

JavaScript DOM node

JavaScriptからDOM nodeへの参照を持っていると、
そのnodeをDOMから消しても、JavaScriptの参照があるためリークする
(JavaScript側からの参照を消せば回収される)

V8 memory management

  • newや暗黙的にメモリをallocationする
  • Memory poolを使い切るとGCが走る
    • GCにはmillisecondsかかる
  • メモリのallocation気をつけないとGCによるフリーズが起きる

V8は世代別GC

  • Young valueとOld Valueに値は分けられる
  • 一定時間経つとyoung valueはoldに送られる

young generation

  • fast allocation
  • fast collection
  • よくcollect(GC?)される

old generation

  • fast allocation
  • solower collection
  • たまにcollectされる

なぜ、young generationは fast collection なのかというのは、
GCのコストはlive objectsの数に比例するため、
live obejctsが多いyoungのcollectionは早くないといけない。

Performance Tools

performance.memory

  • jsHeapSizeLimit : heap sizeのlimit
  • totalJSHeapSize : 今使ってるheap size
  • usedJSHeapSize : allocated,free spaceを含んだsize

DevToolsの解説

Closures には名前付き関数式を使ったほうが見やすい

どうやってメモリリークを見つけるか

  • Open DevTools
  • Snapshot #1
  • 操作
  • Snapshot #2
  • 操作
  • Snapshot #2
  • #1と#2のallocatedを比較する

Object Allocation Tracker

Allocation Stack Traces

JavaScriptの処理のビジュアライズ

ProfileをChartで見るとFlame Chart Viewで見られる

リソース紹介

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中