Preparser does not download stylesheets before running inline scripts

• Component: WebKit Misc.
• Status: NEW ---

[Nolan Lawson]

Created attachment 460277 [details]
Screenshot showing behavior in Chrome, Firefox, and Safari

The speculative HTML preparser in WebKit does not seem to eagerly download stylesheets in the HTML that follow an inline script, whereas Firefox and Chrome do.

A simple test:

<script>
  const start = Date.now()
  while (Date.now() - start < 2000) {
    // block rendering
  }
</script>
<link rel="stylesheet" href="./one.css">
<link rel="stylesheet" href="./two.css">

In this case, Safari (and WebKit Nightly 25167) will not start downloading the CSS until the 2000ms render-blocking script is run. Whereas Firefox and Chrome start eagerly downloading both CSS files before the script finishes.

Incidentally, the same behavior can be seen for inline @imports:

<style>
    @import './one.css';
    @import './two.css';
</style>

(I.e. imports behave the same as links in all three browsers.)

Here are live repros to demonstrate:

- Links: https://bl.ocks.org/nolanlawson/raw/871eced59d144dbe4bec242c1e45c8f1/links.html
- Imports: https://bl.ocks.org/nolanlawson/raw/871eced59d144dbe4bec242c1e45c8f1/imports.html

Note that Safari takes >2000ms to start downloading the CSS files, as reported by the performance resource timings, whereas Firefox and Chrome take much less than 2000ms.

[Nolan Lawson]

Created attachment 460278 [details]
Repro as static HTML/CSS files

[Radar WebKit Bug Importer]

<rdar://problem/95812007>