I've a following network log in chrome:
I don't understand one thing in it: what's the difference between filled gray bars and transparent gray bars.
Google gives a breakdown of these fields in the Network Panel section of their DevTools documentation.
Queueing. The browser queues requests before connection start and when:
There are higher priority requests. Request priority is determined by factors such as the type of a resource, as well as its location within the document. For more information, read the resource priority section of the
fetchpriority
guide.There are already six TCP connections open for this origin, which is the limit. (Applies to HTTP/1.0 and HTTP/1.1 only.)
The browser is briefly allocating space in the disk cache.
Stalled. The request could be stalled after connection start for any of the reasons described in Queueing.
(If you forget, Chrome has an "Explanation" link in the hover tooltip and under the "Timing" panel.)
Basically, the primary reason you will see this is because Chrome will only download 6 files per-server at a time and other requests will be stalled until a connection slot becomes available.
This isn't necessarily something that needs fixing, but one way to avoid the stalled state would be to distribute the files across multiple domain names and/or servers, keeping CORS in mind if applicable to your needs, however HTTP2 is probably a better option going forward. Resource bundling (like JS and CSS concatenation) can also help to reduce amount of stalled connections.