[DevTools Bug]: confused on prerender pages and resulting in high-cpu usage loop

[toyoshim]

Website or app

example; https://yuri.twintail.org/chrome/prerendering/specrules.html

Repro steps

Hello, I'm Takashi from Google Chrome team.

I've investigated high-cpu usage issue on prerendering, and noticed that the React Developer Tools seems to be a root cause.
The original report for the chromium project is here; https://crbug.com/478909972

Steps:

1. Install React Developer Tools Extension (from the Chrome Web Store)
2. Visit a page that uses specupationrules
3. Open Chrome's Task manager from ... > More tools >, and see CPU usages
4. Usage for the prerender pages shows higher CPU usages
5. Open DevTools
6. Prerender pages' CPU usages get much higher, and frame of the React Developer Tools spends almost 100%

This needs that the current page is accessible from the Extensions. e.g., they would not have a permission to touch the New Tab Page, and this doesn't happen there.

Also, this happens with Chrome UI triggered pretenders too. So, even if the page doesn't use the speculationrules, the problem could happen when users type something in the Omnibox, and Chrome has confidence on the next navigating page.

I suspect this is because the extension doesn't expect the Chrome's recent MPArch: Multi-Page Architecture, and is confused on multiple page navigations.
Here is a resource for the prerender and link for its impact on the Extension system.
Prerender pages in Chrome for instant page navigations > Impact on extensions

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

Error component stack (automated)

GitHub query string (automated)

[eps1lon]

I was able to confirm at first but it stopped now and I'm no longer able to reproduce. Do you know of additional steps to reliably reproduce this?

[eps1lon]

Seems like I need a fresh profile that visits the site or something like that.

The service worker is constantly receiving onConnect events in

react/packages/react-devtools-extensions/src/background/index.js

Line 65 in e0cc720

chrome.runtime.onConnect.addListener(port => {

I'll keep digging why that is.

[eps1lon]

The issue is that Chrome fires a pageshow event while the page is prerendering so we're trying to connect to the service worker from two different documents for the same tab. Every time we the service worker gets a tab connection, it disconnects the previous one. This leads us into a loop where the service worker goes back and forth between each document.

I'm not sure why Chrome fires pageshow for a prerendering document but that's easy enough for us to fix I believe.

[tunetheweb]

pageshow is badly named IMHO. It's basically "page has been navigated to" rather than "page has been shown to a user", as it's name implies. If you want the latter, it's the visibilitychange event.

For prerender, the page has technically been navigated to. So it should emit the pageshow event. And there's an extra prerenderingchange event emitted when the page is first activated (as well as a visibilitychange event to show its now visible to the user).

[eps1lon]

Yeah I can see why that's intended behavior. We're only listening to pageshow as a workaround for browsers without pagereveal. We'll just ignore pageshow while prerendering and only listen for pagereveal or prerenderingchange: https://github.com/facebook/react/pull/35958/changes

[toyoshim]

thank you for your quick handling!