Slide 1
Slide 1 text
Memory
in
javascript
Slide 2
Slide 2 text
Name
!CSO 5BLFUPTIJ"POP੨݈ར
Occupation
'SPOUFOE%FWFMPQFS1SPEVDU0XOFS
Company
$ZCFSBHFOU"EUFDI4UVEJP"*.FTTFOHFS
OSS
$POUSJCVUPSPG7
About
IUUQJOGPCODI
Slide 3
Slide 3 text
How javascript treat memory
Slide 4
Slide 4 text
Allocation
HEAP
{ a: 1, b: 2 }
I wanna create object!!
Slide 5
Slide 5 text
If space is not exists
HEAP
{ a: 1, b: 2 }
I wanna create an object!!
I can’t allocate no more!
Slide 6
Slide 6 text
Search spaces
HEAP
{ a: 1, b: 2 }
I wanna create an object!!
I found unused space
Slide 7
Slide 7 text
Garbage Collection
Slide 8
Slide 8 text
Marking Phase
HEAP
1
2
3
4
5
This object is not referenced
from anywhere
Slide 9
Slide 9 text
Sweeping Phase
HEAP
1
2
3
4
Object not referenced will be deleted.
Slide 10
Slide 10 text
Heap
Slide 11
Slide 11 text
Heap structure
Young generation Old generation
"UpSTU
PCKFDUBMMPDBUFEBUZPVOHHFOFSBUJPO
*GPCKFDUTVSWJWFEGSPN($TFSWFSBMUJNFT
XJMMCFNPWFEUP0MEHFO
Slide 12
Slide 12 text
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.
Slide 13
Slide 13 text
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.
Slide 14
Slide 14 text
Preventing useless reference
•Cleanup object
•WeakMap
•WeakRef NEW!
Slide 15
Slide 15 text
Cleanup object
const indices = {};
indices['testA'] = new SomeClass();
indices['testB'] = new SomeClass();
delete indices['testA'];
delete indices['testB'];
Slide 16
Slide 16 text
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?
Slide 17
Slide 17 text
Finalizer
We want to delete these, when SomeClass will be swept.
HEAP
4PNF
$MBTT
1
2
3
4
This time
Slide 18
Slide 18 text
WeakMap
const indices = new WeakMap();
const a = new SomeClass();
const b = new SomeClass();
indices.set(a, someValue);
indices.set(b, someValue);
Slide 19
Slide 19 text
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.
Slide 20
Slide 20 text
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();
}
}
Slide 21
Slide 21 text
WeakRef
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
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;
};
}
Slide 24
Slide 24 text
How WeakRef works?
WeakRef will holds a value without references.
So, Garbage Collector will not traverse object whose held by WeakRef.
Slide 25
Slide 25 text
Hooks for Garbage Collector
WeakRef provides finalizer functionality for GC.
If finalizer callback is registered, that callback will be called when object is
swept.
Slide 26
Slide 26 text
WeakRef finalizer
const object = {};
const finalizer = new
FinalizationGroup((holdings) => {});
finalizer.register(
object, holdings, token);
finalizer.unregister(token);
Slide 27
Slide 27 text
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;
};
}
Slide 28
Slide 28 text
WeakRef
HEAP
1
2
3
4
5
The object referenced by WeakRef
is not treat as referenced object
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
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.
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
Thank you for your time.