Summary: | Implement link rel=modulepreload | ||
---|---|---|---|
Product: | WebKit | Reporter: | Yusuke Suzuki <ysuzuki> |
Component: | DOM | Assignee: | Ryosuke Niwa <rniwa> |
Status: | RESOLVED FIXED | ||
Severity: | Enhancement | CC: | bfulgham, cdumez, d, dpaddock, guybedford, mike, nimajneb0905, noam, richardconnamacher, rniwa, sebastianzartner, steven, tomac, vincentriemer, webkit-bug-importer |
Priority: | P2 | Keywords: | InRadar |
Version: | WebKit Nightly Build | ||
Hardware: | Unspecified | ||
OS: | Unspecified | ||
See Also: | https://bugs.webkit.org/show_bug.cgi?id=252800 | ||
Bug Depends on: | 252639, 252734 | ||
Bug Blocks: |
Description
Yusuke Suzuki
2017-12-08 00:16:10 PST
Spec got merged: https://html.spec.whatwg.org/multipage/links.html#link-type-modulepreload Tests: https://github.com/w3c/web-platform-tests/blob/master/preload/modulepreload.html I think <link rel="modulepreload"> is currently one of the most important features to be implemented in WebKit, as pages load a lot slower without this. Without modulepreload, the user agent must first download the primary JavaScript file before it can download its dependencies specified in an ES6 import. These imported JavaScript modules can import other modules as well, and so on. Because of this, the user agent has to make several network requests successively instead of making them all at once in parallel. This results in a noticeably slower page loading speed. To better illustrate this, here is a screenshot of Chromium's waterfall of JavaScript files of some website of mine: https://user-images.githubusercontent.com/63414473/169042583-ef139e85-d6e3-41b3-afe0-76c65584fc49.png and here is the same website's JavaScript files download timeline in Firefox, which does not support modulepreload either: https://user-images.githubusercontent.com/63414473/169042316-39ff34cf-1121-4b93-922e-84ef15e57088.png. Notice how without modulepreload support, the user agent has to wait for the first file to be downloaded before it can download the other files imported by it. These files themselves import other files which then also import yet another set of files. Blink however can download all JavaScript files in parallel, which results in a ~4 times better loading speed. Blink is currently the only browser engine that supports this, which is a shame because preloading JavaScript modules is an essential thing that modern browsers are supposed to support. This has been specified for over four years now in the official HTML specification, which is another reason to implement this. Also, there is no way to polyfill this feature with things like <link rel="preload">. Note that modulepreload should also be supported in link headers. (In reply to Noam Rosenthal from comment #4) > Note that modulepreload should also be supported in link headers. Indeed it should! But modulepreload is probably a lot less commonly used in link headers, so it isn't really of very high priority. Is the WebKit team interested in implementing this? As already mentioned, this would significantly improve page loading speeds in WebKit, which I guess should be very important to Apple if they want to increase Safari's market share. Because why would anyone want to use Safari if they know that sites load faster in Chrome because WebKit doesn't support an important web standard? Pull request: https://github.com/WebKit/WebKit/pull/10566 Committed 260761@main (41bb68d54e7a): <https://commits.webkit.org/260761@main> Reviewed commits have been landed. Closing PR #10566 and removing active labels. |