22

Sometimes when I Inspect Element in Google Chrome I find that I have some large frames, but they are filled with white space. Anyone know what often causes such large amounts of empty space? I have seen timers cause issues with extending the frames length but in the example below I am unsure why a frame would be so large.

Would love some help minimizing these

Empty Spce

Cai
  • 441
  • 4
  • 15
afreeland
  • 3,889
  • 3
  • 31
  • 42

2 Answers2

17

This is documented here, see the 'About clear or light-gray frames' section. 'Clear frames' in question are described there as

Idle time between display refresh cycles.

According to this video, clear bar indicates browser waiting for a CPU or a GPU. There is nothing that developers can do to fix this when working on a 'standard' website.

elif
  • 5,427
  • 3
  • 28
  • 28
Konrad Dzwinel
  • 36,825
  • 12
  • 98
  • 105
1

I found some interesting relations and i hope it will save time for someone (I spent lot of time before figure out all of this)

  1. Most important - chrome devtools cost a lot. A mean A LOT, even if it says nothing about it. For example:
  2. "Screenshots" in performance monitor increases frametime from 16ms to 66ms in my case and just fills it with empty space in timeline - without screenshots and with screenshots. (Now i see long operations on GPU with screenshots, but there's no any info about what exactly particular operation did)
  3. Things in "rendering" tools like "paint flashing" or "fps meter" greatly increase painting operations time. Just be sure that you disabled all of this before analyze performance!
  4. Very strange things happens with "other" segment(Grey color on timeline). It suppose to be devtools cost itself, but sometimes it can randomly be around zero with lot of calculations or be on 100% wile idle. My advice - there's new "performance monitor" tool in new chrome versions (Not simple "performance"). It is better to toggle it on and keep an eye on "CPU usage" timeline. If you see unexpected behavior of gray curve just reload page or whole chrome - it may save lot of time for you.
  5. Some extensions may cause random effects on timeline. It better to disable it too.
  6. Actually any thing in tools or extensions may ruin your measuring. Toggle all of it off before start search out issues in you code, dom, or styles
tynrare
  • 96
  • 3