1 מתוך 32

Lessons Learned from the �Memory Roadshow

Michael Hablich, hablich@chromium.org

Hannes Payer, hpayer@chromium.org

V8

2 מתוך 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 מתוך 32

What’s the reason for all these OOM crashes?

Is it Chrome?

Is it the Web?

4 מתוך 32

Hypothesis

The majority of OOMs are caused by webpages?*

*proof pending :-P

5 מתוך 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 מתוך 32

7 מתוך 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 מתוך 32

Where do I start?

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

9 מתוך 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 מתוך 32

Memory

How much memory does this page use on different device classes

11 מתוך 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 מתוך 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 מתוך 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 מתוך 32

How much memory do I really use?

15 מתוך 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 מתוך 32

performance.memory

Today:

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

17 מתוך 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 מתוך 32

Why do I use so much memory?

  • DevTools profiling only shows you the JavaScript related memory

19 מתוך 32

Fix the retaining path in DevTools

20 מתוך 32

Fix the retaining path in DevTools

M65

21 מתוך 32

We fixed the glitch.

22 מתוך 32

Fix the retaining path in DevTools

M66

23 מתוך 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 מתוך 32

PageSpeed+Memory Insights

25 מתוך 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 מתוך 32

Memory Pressure & OOM Handling

  • NearOOM interventions
  • Tab discarding & LifeCycle API
  • prOOMpt

27 מתוך 32

prOOMpt

28 מתוך 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 מתוך 32

Hypothesis: The majority of OOMs are caused by webpages?

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

30 מתוך 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 מתוך 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 מתוך 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