memory_in_javascript.pdf

Transcript

1. Memory
   in
   javascript
   

   View Slide

2. Name
   !CSO 5BLFUPTIJ"POP੨໺݈ར
   
   Occupation
   'SPOUFOE%FWFMPQFS1SPEVDU0XOFS
   Company
   $ZCFSBHFOU"EUFDI4UVEJP"*.FTTFOHFS
   OSS
   $POUSJCVUPSPG7
   About
   IUUQJOGPCODI
   

   View Slide

3. How javascript treat memory
   

   View Slide

4. Allocation
   HEAP
   { a: 1, b: 2 }
   I wanna create object!!
   

   View Slide

5. If space is not exists
   HEAP
   { a: 1, b: 2 }
   I wanna create an object!!
   I can’t allocate no more!
   

   View Slide

6. Search spaces
   HEAP
   { a: 1, b: 2 }
   I wanna create an object!!
   I found unused space
   

   View Slide

7. Garbage Collection
   

   View Slide

8. Marking Phase
   HEAP
   1
   2
   3
   4
   5
   This object is not referenced
   from anywhere
   

   View Slide

9. Sweeping Phase
   HEAP
   1
   2
   3
   4
   Object not referenced will be deleted.
   

   View Slide

10. Heap
    

    View Slide

11. Heap structure
    Young generation Old generation
    "UpSTU PCKFDUBMMPDBUFEBUZPVOHHFOFSBUJPO
    *GPCKFDUTVSWJWFEGSPN($TFSWFSBMUJNFT
    XJMMCFNPWFEUP0MEHFO
    

    View Slide

12. Generational GC
    Allocated objects are managed by separete generation, to more efficient
    sweeping.
    If VM can’t keep enough memory space, VM starting sweeping Young
    Generation,
    so Young Generation may be held many Short-lived objects and possibility
    that is found empty space is higher.
    This called Minor GC.
    If empty spaces are not found in Young Generation, VM start sweeping
    Old Generation.
    This called Major GC.
    

    View Slide

13. Memory leak
    In many case, Javascript will not leak memory today.
    MarkSweep GC has solve cyclic reference.
    But MarkSweep is not a silver bullet, if you holding many large object, that
    will still cause memory exhaustion.
    

    View Slide

14. Preventing useless reference
    •Cleanup object
    •WeakMap
    •WeakRef NEW!
    

    View Slide

15. Cleanup object
    const indices = {};
    indices['testA'] = new SomeClass();
    indices['testB'] = new SomeClass();
    delete indices['testA'];
    delete indices['testB'];
    

    View Slide

16. Cleanup object but …
    const indices = {};
    indices['testA'] = new SomeClass();
    indices['testB'] = new SomeClass();
    delete indices['testA'];
    delete indices['testB'];
    When can we delete these objects?
    

    View Slide

17. Finalizer
    We want to delete these, when SomeClass will be swept.
    HEAP
    4PNF
    $MBTT
    1
    2
    3
    4
    This time
    

    View Slide

18. WeakMap
    const indices = new WeakMap();
    const a = new SomeClass();
    const b = new SomeClass();
    indices.set(a, someValue);
    indices.set(b, someValue);
    

    View Slide

19. WeakMap hooks
    When an object whose registered as the key of a WeakMap deleted,
    the bound value will be deleted too.
    HEAP
    4PNF
    $MBTT
    1
    2
    3
    4
    WeakMap
    WeakMap delete a bound value of SomeClass.
    

    View Slide

20. But WeakMap not match some situations…
    const cache = {};
    function cache(factory) {
    return key => {
    const ret = cache[key];
    if (ret) {
    return ret;
    }
    return cache[key] = factory();
    }
    }
    

    View Slide

21. WeakRef
    

    View Slide

22. What is WeakRef?
    WeakRef is now proposed ecamscript functionality that enable user to be
    concerned to Object lifetime and GarbageCollection.
    WeakRef is now stage-2
    

    View Slide

23. WeakRef
    function makeWeakCached(f) {
    const cache = new Map();
    return key => {
    const ref = cache.get(key);
    if (ref) {
    const cached = ref.deref();
    if (cached !== undefined) return cached;
    }
    const fresh = f(key);
    cache.set(key, new WeakRef(fresh));
    return fresh;
    };
    }
    

    View Slide

24. How WeakRef works?
    WeakRef will holds a value without references.
    So, Garbage Collector will not traverse object whose held by WeakRef.
    

    View Slide

25. Hooks for Garbage Collector
    WeakRef provides finalizer functionality for GC.
    If finalizer callback is registered, that callback will be called when object is
    swept.
    

    View Slide

26. WeakRef finalizer
    const object = {};
    const finalizer = new
    FinalizationGroup((holdings) => {});
    finalizer.register(
    object, holdings, token);
    finalizer.unregister(token);
    

    View Slide

27. WeakRef finalizer
    function makeWeakCached(f) {
    const cache = new Map();
    const cleanup = new FinalizationGroup(iterator => {
    for (const key of iterator) {
    // See note below on concurrency considerations.
    const ref = cache.get(key);
    if (ref && !ref.deref()) cache.delete(key);
    }
    });
    return key => {
    const ref = cache.get(key);
    if (ref) {
    const cached = ref.deref();
    // See note below on concurrency considerations.
    if (cached !== undefined) return cached;
    }
    const fresh = f(key);
    cache.set(key, new WeakRef(fresh));
    cleanup.register(fresh, key, key);
    return fresh;
    };
    }
    

    View Slide

28. WeakRef
    HEAP
    1
    2
    3
    4
    5
    The object referenced by WeakRef
    is not treat as referenced object
    

    View Slide

29. WeakRef hooks
    When an object whose registered to FinalizerGroup is deleted,
    Finalizer callback will be invoked.
    HEAP
    
    1
    2
    3
    4
    FinalizerGroup
    FinalizerGroup callback will be called
    

    View Slide

30. Warnings
    Finalizer might not be called, because implementations of GC are different
    from each engines and sweep timing is different from each object or may
    not be deleted until end of process.
    So above reasons, you should not use Finalizer as a resource cleanup
    process.
    

    View Slide

31. References/Resources
    • https://www.freepik.com/?
    __hstc=57440181.4254316b754c2c3a441d625d6c5b46d3.1559749420254.1559749420254.1559749420254.1&__hssc=574
    40181.4.1559749420255&__hsfp=2297408259
    • https://github.com/tc39/proposal-weakrefs
    

    View Slide

32. Thank you for your time.
    

    View Slide