Bug 193908 - "async" and "defer" script elements delay painting
Summary: "async" and "defer" script elements delay painting
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 12
Hardware: iPhone / iPad iOS 12
: P2 Normal
Assignee: zalan
URL:
Keywords: InRadar
Depends on: 194168
Blocks:
  Show dependency treegraph
 
Reported: 2019-01-28 07:40 PST by darren.hebner
Modified: 2019-02-04 20:55 PST (History)
4 users (show)

See Also:


Attachments
GIF showing the expected behaviour and the current behaviour in Safari (6.26 MB, image/gif)
2019-01-28 07:40 PST, darren.hebner
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description darren.hebner 2019-01-28 07:40:07 PST
Created attachment 360341 [details]
GIF showing the expected behaviour and the current behaviour in Safari

I'm noticing that Safari does not render anything until all JavaScript has been downloaded and executed. This includes deferred and async scripts as well as scripts that appear just before the closing body tag.

I've created a small site to demonstrate this behaviour: https://wkwebviewtest.surge.sh/

This demo site features a script tag with the "defer" attribute in the <head> of the document. This script is intentionally slow and takes ~5s to execute. When the script is finished, it appends a message to the page.

The expected behaviour is for the HTML to render immediately since the pages JavaScript is deferred. To reproduce, visit the demo site in new window or tab. You will see that the browser waits until the script has finished executing (~5s) before it renders anything. 

It's worth noting that I'm seeing the same behaviour in all of these scenarios:
- The script is in the <head> with the "defer" attribute
- The script is in the <head> with the "async" attribute
- The script is just before the closing </body> tag.

This behaviour is detrimental to performance and goes against the benefits of using the defer attribute.

Thank you in advance for your help!
Comment 1 Simon Fraser (smfr) 2019-01-28 11:00:44 PST
Zalan, does your new first paint stuff improve this?
Comment 2 Radar WebKit Bug Importer 2019-01-28 11:00:49 PST
<rdar://problem/47602939>
Comment 3 zalan 2019-02-04 20:54:55 PST
first part of the fix: bug 194168