Open Bug 1424997 Opened 6 years ago Updated 1 year ago

Network panel shows requests in the order they're finished, not in the order they're done.

Categories

(DevTools :: Netmonitor, defect, P5)

Product:
DevTools
Component:
Netmonitor
Version:
57 Branch
Type:
defect

Tracking

(Not tracked)

Status:
UNCONFIRMED

People

(Reporter: kes-kes, Unassigned)

Details

Attachments

(1 file)

delete.jpg
68.14 KB, image/jpeg
Details
Attached image delete.jpg — 
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171116103757

Steps to reproduce:

I open the HTML page in FF:
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>/*<![CDATA[*/

      label.field-with-error { color: #FF4C4D }
      input.field-with-error { background-color: #FF4C4D }
      .error_msg { color: #FF4C4D }

/*]]>*/</style>    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Safe VPN</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,900"/>
    <link href="v2/css/layout.css" rel="stylesheet">
    <link href="v2/css/media.css" rel="stylesheet">
  </head>
<body>
  ....
</body>
</html>
  <link href="v2/css/header.css" rel="stylesheet">




Actual results:

Despite on the stylesheet defined first:
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,900"/>

The query to load it is last (see attached screenshot)



Expected results:

I expect required stylesheet queries are made in order they are defined
Component: Untriaged → CSS Parsing and Computation
Product: Firefox → Core
I think the network requests are only shown as they finish, the other stylesheets are local so they load faster...

Why is this an issue?
Flags: needinfo?(kes-kes)
chrome shows the request when it is made and not when it is done
chrome: http://joxi.ru/E2pL8pgiBokkO2

also time line is out of order:
FF: http://joxi.ru/Q2K4M17i9k88BA
it is not clear when the request is started and when finished, so makes the debugging of slow network request more hard.
Flags: needinfo?(kes-kes)
Component: CSS Parsing and Computation → Developer Tools: Netmonitor
Product: Core → Firefox
Summary: Out of order .css loading → Network panel shows requests in the order they're finished, not in the order they're done.
I've wanted better live updating and better representation of actual state in the netmonitor while working on service workers.  Making it accurately represent network steps as they happen would be great.
Blocks: dt-service-worker
The Network panel *is* displaying requests as they start (that's why you can see some of them being loading...)

This looks like Necko scheduling thing - loading style-sheets in different order than defined in the page? Because of the different domain?

Michal, do you have any explanation to this?

Honza
Flags: needinfo?(michal.novotny)
Product: Firefox → DevTools
(In reply to Jan Honza Odvarko [:Honza] from comment #4)
> The Network panel *is* displaying requests as they start (that's why you can
> see some of them being loading...)
> 
> This looks like Necko scheduling thing - loading style-sheets in different
> order than defined in the page? Because of the different domain?
> 
> Michal, do you have any explanation to this?
> 
> Honza

AFAIK we don't do any scheduling of stylesheets or any other subresources in necko. I'm not sure what activity notification netmonitor receives as the first one (which it probably considers as a start), but a lot of things can happen between AsyncOpen() and the first notification, so there is no reason to expect the order in netmonitor and in the document to be the same.
Flags: needinfo?(michal.novotny)
Severity: normal → S3

This bug is only loosely related to workers, I don't think it should block the meta.

No longer blocks: netmonitor-workers
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: