1 av 32

Lessons Learned from the �Memory Roadshow

Michael Hablich, hablich@chromium.org

Hannes Payer, hpayer@chromium.org

V8

2 av 32

Why memory matters to Chrome ...

30 % of all renderer crashes on Windows are because of out of memory situations

… so, we can make Chrome crash 30 % less often? Sweet!

3 av 32

What’s the reason for all these OOM crashes?

Is it Chrome?

Is it the Web?

4 av 32

Hypothesis

The majority of OOMs are caused by webpages?*

*proof pending :-P

5 av 32

How are we going to do it?

Let's ask the web developers!

  • Why do web pages use so much memory?
  • How do web developers reason about memory?
  • How can Chromium improve?
  • Where are all the leaks?

Conduct a roadshow with �popular web applications.

6 av 32

7 av 32

How much memory do I really use?

Where do I start?

Why do I use so much memory?

How slim should a webpage be?

How do I convince my manager to work on memory reduction?

8 av 32

Where do I start?

  • DevTools is the start
  • There is no clear goal for the web developer to accomplish

9 av 32

Where do I start?

  • DevTools is the start
  • There is no clear goal for the web developer to accomplish

What we can do:

  • Engage and provide guidance to web developers earlier in the process
  • Apply methodology used in loading project:
    • Surface memory consumption in Lighthouse

10 av 32

Memory

How much memory does this page use on different device classes

11 av 32

Memory

These encapsulate your we app's current memory consumption and opportunities to improve it.

Metrics

These metrics encapsulate your we app's current memory consumption across a number of dimensions.

30 MB

120 MB

60 MB

Reduce the code cached or loaded just in case

35 % of your shipped code on startup is not executed 35 % less code size

Investigate potential leaky objects

A few objects were found that are potentially thus never free memory 7 objects to investigate

Loading the web site would fail on some devices

Android devices with <= 1024 MB RAM would likely fail loading your page.

12 av 32

Where do I start?

  • DevTools is the start
  • There is no clear goal for the web developer to accomplish

What we can do:

  • Engage and provide guidance to web developers earlier in the process
  • Apply methodology used in loading speed project:
    • Surface memory consumption in Lighthouse

13 av 32

Where do I start?

  • DevTools is the start
  • There is no clear goal for the web developer to accomplish

What we can do:

  • Engage and provide guidance to web developers earlier in the process
  • Apply methodology used in loading speed project:
    • Surface memory consumption in Lighthouse
    • Add memory consumption to Chrome UX report

14 av 32

How much memory do I really use?

15 av 32

How much memory do I really use?

  • performance.memory API only shows blurred V8 heap sizes (blue)
  • DevTools profiling only shows you the JavaScript related memory (blue+purple)
  • about:tracing (+some magic) has the full picture

What we can do:

  • Make performance.memory recognize the whole memory
  • Surface full memory consumption in DevTools

16 av 32

performance.memory

Today:

  • Displays only memory allocated on the V8 heap
  • Updates every 20 minutes
  • Only for the main thread

17 av 32

performance.memory

Today:

  • Displays only memory allocated on the V8 heap
  • Updates every 20 minutes
  • Only for the main thread

The (maybe) future:

  • Precise
  • Process-wide private memory
  • Information about shared tabs and workers
  • Expose all mem-infra memory metrics
  • Allow it to be called from main thread and workers

https://github.com/erikchen/performance-memory

18 av 32

Why do I use so much memory?

  • DevTools profiling only shows you the JavaScript related memory

19 av 32

Fix the retaining path in DevTools

20 av 32

Fix the retaining path in DevTools

M65

21 av 32

We fixed the glitch.

22 av 32

Fix the retaining path in DevTools

M66

23 av 32

How slim should a web page be?

  • There is no accessible way to find out what is slim enough
  • There is no "standard"

What we can do:

  • Apply methodology used in loading speed project:
    • Publish case studies on memory consumption
    • Get memory data being used in PageSpeed Insights

24 av 32

PageSpeed+Memory Insights

25 av 32

How do I convince my manager …?

  • It is mostly unknown how memory consumption affects business metrics
  • OOMs result in breaking a web application's use cases

26 av 32

Memory Pressure & OOM Handling

  • NearOOM interventions
  • Tab discarding & LifeCycle API
  • prOOMpt

27 av 32

prOOMpt

28 av 32

How do I convince my manager …?

  • It is mostly unknown how memory consumption affects business metrics
  • OOMs result in breaking a web application's use cases

What we can do:

  • Surface OOMs happening to web applications�(e.g. LifeCycle API, Reporting API, performance.memory)
    • Surface discarding metric
    • Surface proompt metric
  • Tie memory consumption to performance and business metrics�

29 av 32

Hypothesis: The majority of OOMs are caused by webpages?

We found memory leaks in all web pages �of the memory roadshow attendees.

30 av 32

Hypothesis: The majority of OOMs are caused by webpages?

That is not a proof...

We found memory leaks in all web pages �of the memory roadshow attendees.

31 av 32

Want to get involved? Have an opinion? Think we are wrong? Good! Participate in the relevant unconference sessions and talks this BlinkOn:

  • The Future of Real World Benchmarks
  • Providing developers with a well-lit path
  • Update: Unified JavaScript and Blink Heap

… or simply talk to us!

32 av 32

The Wrap a.k.a. Key Takeaways

We need to incentivise web developers to care more about memory

We need to provide them with the means to reliably measure and benchmark memory consumption

We need to give them the right tools to fix the problems on their own