Bug 241704 - Preparser does not download stylesheets before running inline scripts
Summary: Preparser does not download stylesheets before running inline scripts
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebKit Misc. (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-06-16 15:31 PDT by Nolan Lawson
Modified: 2022-06-23 15:32 PDT (History)
5 users (show)

See Also:


Attachments
Screenshot showing behavior in Chrome, Firefox, and Safari (217.03 KB, image/png)
2022-06-16 15:31 PDT, Nolan Lawson
no flags Details
Repro as static HTML/CSS files (2.49 KB, application/zip)
2022-06-16 15:32 PDT, Nolan Lawson
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Nolan Lawson 2022-06-16 15:31:12 PDT
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.
Comment 1 Nolan Lawson 2022-06-16 15:32:22 PDT
Created attachment 460278 [details]
Repro as static HTML/CSS files
Comment 2 Radar WebKit Bug Importer 2022-06-23 15:32:14 PDT
<rdar://problem/95812007>