efcl’s blog

GitHub英語のメモや引用が中心です。

JavaScript Memory Management Masterclass のメモ

JavaScript

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で見られる

リソース紹介