What could be the reason that the timing of a resource loading doesn't add up?
As can be seen in the screenshot below, all steps are in the single digit ms, but total is 322.49.
The waterfall chart also shows an empty gap
This is a known issue from making queries to localhost. Related SO question here
Related
I have created a wholesale order form in the form of a large HTML table with lots of number inputs. I've noticed that switching between number inputs and typing values in the inputs are very slow in this table (ie. when I click in an input, it takes time for the cursor to show up; when I type in an input, it takes time for the character to show up). Is there any way for me to remove the lag without paginating the table rows?
You can view and play around with the table here (use guest password "braese").
A screenshot of a Chrome Dev Tools performance recording for clicking inside a single input (I'm not really sure what to make of this):
I did some more digging and testing, and it turns out the lag (update layer tree) when clicking/typing in inputs is only an issue in Chrome. This answer on another question points to issues with Chrome since version 46. It's a shame that such a popular browser has allowed an issue like this to go on for 2+ years. We will have to paginate our order form since Chrome is so popular with our client's customers.
Wow my chrome almost crashed :)
It is your styles
You are causing layer creation every time you apply translate transform
Check out the Layers menu in Chrome Dev tools;
Test if it runs better - only table :)
Also order your styles and scripts! - first styles after that scripts
Cheers!
When opening dev tools, the device mode Icon is often not available.
In trying to determine why, it appears that it's use is now limited to a single tab in the browser. It used to work on as many as you liked.
It's extremely problematic,
as I often have several responsive pages that need comparison.
Anyone know why Google is limiting that function?
I used that an average of 8 hours a day for the past year and a half,
and suddenly it's unavailable for most of the tabs I have open.
does anyone have a work around?
There are several different questions about this. However, I still have not been able to solve the problem.
When I am debugging in Google Chrome's console, I do want to see the content of objects
i.e
{a:'a'}
So I click on them to expand them. Many times (randomly), I get auto scrolled to the bottom of the console, getting me in really hard troubles to debug the object I am trying to watch.
I've read about bug with zooming in and out. But that did not help at all.
I have last google chrome version, checked with other workmates, and they do not have this problem.
What can it be? How can I fix it?
Since it happens randomly, I can not think it's a feature.
I have tried to reinstall chrome several times, did not help at all. Also sent them a report, but never received an answer.
I'm not sure what version you were having issues with, but I just upgraded from chrome 56 to 57 and that fixed this issue for me.
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
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.
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)
Most important - chrome devtools cost a lot. A mean A LOT, even if it says nothing about it. For example:
"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)
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!
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.
Some extensions may cause random effects on timeline. It better to disable it too.
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
I'm running a simple viewbox animation in raphael using requestAnimationFrame in chrome. I'm noticing all scripting and rendering tasks are completed yet I still see anywhere between 30 and 60ms of "dead space" where it looks like the browser is sitting there doing nothing. Any insight into this?
I went on this question looking for the same answer and as it seems nobody provided a response, here is what I found.
According to the Chrome DevTools documentation about the Clear and Light Grey Frame, the blank space is the time your browser was idle.
Why is it idle?
The short version is that a hollow frame means one of two things: your javascript main thread was busy doing other stuff that the Chrome Dev Team forgot to show in DevTools or you were bottlenecked on your GPU.
To tell the difference, you can enable "Timeline: Show CPU Activity on the Ruler" inside DevTools' settings (you know, the cog in the bottom right hand corner).
You will end with something like this:
See the little dark grey blocks on the "Records" row? Those are dark when the renderer thread was busy. If the renderer thread is mostly idle, e.g. no dark block, as is the case the screenshot I yanked for this post, it is a very good signal that you are GPU bound.
Here's the full explanation from Chrome Engineer Nat Duca.
https://plus.google.com/+NatDuca/posts/BvMgvdnBvaQ