This document discusses memory leaks in JavaScript applications and provides best practices to avoid them. It begins by noting that leaks are easy to create unintentionally through timers, closures, and event listeners but difficult to find in long-running apps. It then provides examples of leak patterns to avoid, such as retaining references to DOM nodes or large objects. The document recommends tools for profiling memory usage and traces garbage collection. It concludes by emphasizing that leaks can be critical in long-lived apps and provides tips like naming functions, clearing variables, and using database timeouts.

1. Work with leaks
Roman Krivtsov

2. Leaks in js:
Easy to create
(timers, closures,
listeners)
Difficult to find out
Critical in long-live apps
—
—
—
2

3. 3
Gmail
with leaks

4. 3:00
4
Server
programmer’s
life

5. V8 GARBAGE COLLECTOR
5

6. — Concept of reachability
— Blocked event-loop
— Totally optimising
(partions, dynamic intervals)
— New space (1-8Mb)
& Old space (512Mb-1.7Gb)
6
GC

7. — max-old-space-size
limit for old-space GC
— nouse-idle-notification
prevent running GC constantly
— expose-gc
global.gc()
— trace-gc
logging
— trace-gc-verbose
extended logging
Flags
7

8. 8
PATTERNS
AND ANTIPATTERNS

9. var latestNews = function (html) {
var container = document.getElementById("news");
container.innerHTML = html;
container.addEventListener("click", function click() {
showFullItem();
});
}
setInterval(XHR.bind(null, "/get_news", latestNews), 1000);
9
Latest news

10. 10

11. container
DOM
Window
click listener click listener
click listener
click listener
click listener

12. 12
var latestNews = function (html) {
var container = document.getElementById("news");
container.innerHTML = html;
container.addEventListener("click", function click() {
showFullItem(html);
});
}
setInterval(XHR.bind(null, "/get_news", latestNews), 1000);
Variable usage

13. 13

14. 14
Scopes
clickhtml
latestNews html
clickhtml
clickhtml
clickhtml

15. 15
var latestNews = function (html) {
var container = document.getElementById("news");
container.innerHTML = html;
container.addEventListener("click", function click() {
showFullItem();
});
var unused = function () {
if (html) console.log("never");
}
}
setInterval(XHR.bind(null, "/get_news", latestNews), 1000);
Deeper down the rabbit hole

16. 16

17. 17
Scopes
click
latestNews html
unusedhtmlhtml =

18. 18
var latestNews = function (html) {
var container = document.getElementById("news");
container.innerHTML = html;
html = null;
container.addEventListener("click", function click() {
showFullItem(html);
});
}
setInterval(XHR.bind(null, "/get_news", latestNews), 1000);

19. var job = function () {
mysql.query("select * from tasks order by ts desc",
function (err, res) {
use(res);
});
}
setInterval(job, 1000);
19
Long responses
mysql.query({
sql: 'select * from tasks order by ts',
timeout: 1000
});

20. TOOLS
20

21. Events CPU
Memory
Force GC
Timeline

22. Rule of 3 snapshots
Profiling
Retained sizeShallow sizeDistance

23. — node-heapdump
— node-memwatch
— REPL
— dynamic tracing frameworks
23
Node.js

24. --abort-on-uncaught-exception
24
— production
MDB and DTrace
(dynamic tracing frameworks)

25. — Timers
— Frequent events
— Listeners
— Parent scope
— Give names
— Clear big variables
— Databases
Conclusions
25

26. Good luck
and don’t leak!
26

27. 27
Code and links