devtools-docs
devtools-docs copied to clipboard
GoogleChrome
Document hollow green bars in Timeline
Hollow green bars mean the compositor spawned a worker to rasterize (actually paint pixels) to your page whereas solid paint blocks are Chrome recording the draw calls needed beforehand. So solid blocks = recording draw calls, hollow ones are them being played to fill pixels.
We should document this in the Timeline docs as they aren't currently covered (afaik).
h/t to @paullewis for clarifying.
we have this: https://developer.chrome.com/devtools/docs/timeline#about-clear-or-light-gray-frames
which has something. and punts to a Nat G+ article on the rest.
i wouldn't say the answer above is totally right either. but I can probably come up with the text that we'd agree on.
I've referred back to the Nat G+ article a few times (re-read it today) but it seems to focus on the light gray frames vs. green hollow bars (which afaik, are different). Clarifications in the docs either way would be mucho appreciated <3
Yeah gray bars are uninstrumented time AFAIK (guess that's up for grabs), whereas these hollow green blocks are compositor rasters.
Are the hollow green bars only for rasterizing tiles during native scrolling or can they caused by other things?
We should explain in plain English what "un-instrumented" is. Reading over the current content it just assumes you know or hopes you will follow the link to Nat's post. From what I can tell this is pretty much it:
The light-gray bars are activity that is un-instrumented by the DevTools. This means the processing occured, but the tools didn't capture it for some reason. The clear bars indicates time that was spent waiting on the GPU to process data.
However, can we find another word for un-instrumented? It sounds odd.
Are the hollow green bars only for rasterizing tiles during native scrolling or can they caused by other things?
@xcoderzach The old rendering model would paint and rasterize immediately on main thread (Chrome stable still works like this). All you would see is solid green blocks in Timeline. On Android and Chrome Canary you'll see the hollow green blocks, since we no longer rasterize immediately but rather send the recorded paint calls to the compositor for it to spawn a worker that that does the rasterization. To answer your question, anything that paints, whether it's triggered by scrolling, CSS animations or JS. If you change the right property you'll trigger paint, and see hollow green blocks.
However, can we find another word for un-instrumented? It sounds odd.
@Garbee It really does. It's essentially the catch-all name for "we did a bunch of work but we don't have detail on how it breaks down ... yet". I'm searching for a good name for that, but I can't beat uninstrumented!
Adding link to what @paullewis posted about this on SO. We can use that in the docs http://stackoverflow.com/a/27426601/297765
(Sorry before i got mixed up with gray frame bars. whoops)
@jaredwilli definitely. can you add this in?