[Webkit-unassigned] [Bug 193908] New: "Non-blocking" JavaScript is preventing DOM from rendering

Mon Jan 28 07:40:07 PST 2019

https://bugs.webkit.org/show_bug.cgi?id=193908

            Bug ID: 193908
           Summary: "Non-blocking" JavaScript is preventing DOM from
                    rendering
           Product: WebKit
           Version: Safari 12
          Hardware: iPhone / iPad
                OS: iOS 12
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: darren.hebner at shopify.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 360341

  --> https://bugs.webkit.org/attachment.cgi?id=360341&action=review

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!

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20190128/71a79034/attachment.html>