Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Memory leaks in JS

No description
by

Yevhenii Kravchenko

on 14 May 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Memory leaks in JS

Memory leaks. Why we should care?
Core Concepts
Memory Management Basics
Brief Terminology

Agenda
Who is presenting?
What is a Memory Leak in JavaScript?
Types in JavaScript
How memory organized?
All values in JavaScript are part of the object graph.


The graph begins with roots, for example, the
window
object.


Root element could be brower
window
property or
global
object in Node .
Memory leaks. Why we should care?
When Does a Value Become Garbage?
Memory leaks in JS
Yevhenii Kravchenko
Generational Collection
Young Generation
Old Generation
Useful links
http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection
https://github.com/thlorenz/v8-perf/blob/master/gc.md#old-generation
https://developer.chrome.com/devtools/docs/javascript-memory-profiling
http://www.html5rocks.com/en/tutorials/memory/effectivemanagement/
http://en.wikipedia.org/wiki/Mark-compact_algorithm
https://developer.chrome.com/devtools
What you have to know about young generation:
Fast allocation
Generational Collection
Google Chrome. Dev Tools
Tips
Demo

Every allocation returned from "From Space" to "To Space" is potentially memory leak!
Every
GC event makes freeze
on your page
Collections performed frequently
via "two-space collector"
Google Chrome.
Timeline
Google Chrome.
Heap Allocation Recorder
Questions
?
Objects which have survived two minor garbage
collections are promoted to old-space
Fast allocation
Collection performed infrequently
Collection occurs in parallel
with your page's execution.
~20% of objects survive into Old Generation
Demo Time
at SoftServe for
1.56164000001 years
Boolean (
true
or
false
)
String (“
Hello World
”)
Primitive Types
Composite Types
Object({
foo
: "
bar
"})
Array(["
foo
", "
bar
"])
Number (e.g.
2
,
3
,
5.5
)
div
#r1
body
div
ul
li
li
a
a
#r2
var
r2

=

document.getElementById
(
"r2"
);
div
#r1
body
div
ul
li
li
a
a
#r2
a
document.body.removeChild
(
r1
);
var
r1
=

document.getElementById
(
"r1"
);
div
#r1
body
div
ul
li
li
a
a
#r2
a
r1

=

null
;
r2

=

null
;
div
#r1
body
div
ul
li
li
a
a
#r2
a
What is
retaining path(s)
?
What is garbage collection ?
1. Find all live values.
2. Return memory used by unreachable values to system.
Force GC
Force GC
GC
What is the cost of memory allocations?
Do I have a leak ?
Good rules
Avoid long-time refs to
DOM elements
Avoid
circular
object references
Unbind
event listeners
you don't need anymore
Manage
local cache
of data
Clean all
objects you created when you leave module/page
1. Check Chrome Task Manager to see if the tab's memory usage is growing
2. Identify sequence of actions which might be leaking
3. Do a timeline recording and perform those actions
4. Force trigger GC event - trash icon
5. Do defined case several times and after each call GC
6. Use allocation tracker to find out where is problem
Every call to
new
or implicit memory allocation
Reserves memory for object
And it's cheap until...
Memory pool
exhausted
Runtime forced to perform
garbage

collection
Takes milliseconds freeze of your app
Chrome Task Manager
Google Chrome.
Heap Snapshot
Object has a JS referrence on it
Detached node. Referrenced from one yellow node
Memory allocations.
Deallocated memory
Higher - more allocated memory
Be carefully with
delete
var

fast
=
new

FastPurshase
(2, 34);
function

FastPurshase
(units, price)
=

{
this.units

=

units;
this.price

=

price;
this.x

=

1
;
};
fast.
x

=

null
;
function

SlowPurshase
(units, price)
=

{
this.units

=

units;
this.price

=

price;
this.x

=

1
;
};
Slow objects
var

slow
=
new

SlowPurshase
(2, 34);
delete
slow.
x;
slow.
x
; // undefined
Reality: "Slow" objects uses
15 times
more memory.
Young generation vs Old generation
What is
shallow size
?
Value of
retaining size
?
This is the size of memory that is held by the object itself.
Note:
When profiling memory issues in Chrome, it is a good idea to setup a clean-room testing environment.
Retaining memory
- memory used by objects and the objects they are referrencing
Closures
Tip: it helps to name functions so you can easily find them in the snapshot
Performance
Web developer
App life cycle
Chrome performance memory API
performance.memory
jsHeapSizeLimit
usedJSHeapSize
totalJSHeapSize
Limit of memory
Used memory
Allocated memory
(with free space)
Core Concepts
When value becomes garbage ?
What is memory leak ?
What types of values are there ?
How are values organized in memory ?
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --enable-memory-info --js-flags="--expose-gc --stack_trace_limit=-1" --user-data-dir=test/t
Fast objects
var func = function () {
...
return function
CL
() {
...
}
}
Full transcript