1616139 - Performance issue with beautifying heavy srcdoc in iframe

Status: NEW

(DevTools :: Inspector, defect, P2)

Description

[Karl Dubost💡 :karlcow]

What were you doing?

1. go to https://blog.cloudflare.com/serverlist-8th-edition/
2. inspect an element
3. try to copy outer html of the iframe element.

What happened?

CPU is spiking

What should have happened?

not sure. but it has a big perf impact.

Anything else we should know?

In Firefox nightly 75 macos

Note: the rendering of the document is a lot better in firefox than Chrome for example.

detected during https://github.com/webcompat/web-bugs/issues/48332#issuecomment-587178352

Comment 1

[Patrick Brosset <:pbro>]

Copying the outer html of the iframe element worked fine and seemed fast for me. I was also testing on macOS, both on Firefox 74 and 75.
I did not notice the CPU spiking at all.
Would you be able to record a profile by any chance (using the new Performance panel in DevTools)?

Comment 2

[Karl Dubost💡 :karlcow]

This is the profile
https://perfht.ml/2uW7yNJ

Hope it helps.
And indeed the memory spikes, it takes ~44s to copy.

Ah I think it's because it tries to beautify the code. So it's not that much the copy outer html which fails but just beautifying a huge document takes time.
I wonder if there would be way to improve the performance C++ beautifiers?

Comment 3

[Patrick Brosset <:pbro>]

Ah ok, that makes sense to me now. Flipping devtools.markup.beautifyOnCopy to true does make it reproduce for me now.
This pref makes the copy HTML features of the inspector beautify the code too. I initially had it off so didn't see a problem.
Thanks for the profile, that's very helpful.
Would you be so kind and edit comment 0 to say that this pref needs to be set to true?