Don't block first contentful paint for sync async scripts |
||||||
Issue descriptionCurrently referencing async scripts in the document head that reside in memory cache block the first (contentful) paint of the page. It should be considered to make every async script behave in a way where they are delayed ever so slightly to allow a paint to occur before they execute. Ideally the browser would check just before execution as to whether it would otherwise be ready to paint, and then schedule script execution to happen just after. Such async scripts might often execute for 100+ ms, so slightly delaying execution will have a noticeable impact on perceived performance. On a related note: The behavior is the same when adding a defer attribute. Repro URL: http://output.jsbin.com/suzakon/quiet Example code. This uses a data-URI, but the behavior with a memory cached script is the same. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script async src="data:text/javascript;charset=utf-8;base64,KGZ1bmN0aW9uKCkgew0KICB2YXIgc3RhcnQgPSBuZXcgRGF0ZSgpLmdldFRpbWUoKTsNCiAgY29uc29sZS5sb2coZG9jdW1lbnQuYm9keSkNCiAgd2hpbGUgKG5ldyBEYXRlKCkuZ2V0VGltZSgpIC0gc3RhcnQgPCAyMDAwKSB7fQ0KICBjb25zb2xlLmxvZyhkb2N1bWVudC5ib2R5KQ0KICBzZXRUaW1lb3V0KGZ1bmN0aW9uKCkgew0KICAgIGNvbnNvbGUubG9nKGRvY3VtZW50LmJvZHkpDQogICAgd2hpbGUgKG5ldyBEYXRlKCkuZ2V0VGltZSgpIC0gc3RhcnQgPCAzMDAwKSB7fQ0KICB9KQ0KfSkoKTs="> </script> <title>JS Bin</title> </head> <body> <h1>Do I render immediately?</h1> </body> </html>
,
Oct 12 2017
I definitely care about FCP. I think other paints are different in that it becomes much harder to judge whether delaying them VS. possibly delaying a future frame is better or worse.
,
Oct 12 2017
It doesn't sound to me like this is about performance APIs, it's just about scheduling. Sounds like what we'd need to accomplish this is a notion of whether or not there's a "contentful object" waiting to be painted. +Chris, Emil: we define objects to be contentful is they're text, image, svg, etc. Would it be easy to determine if there are any new contentful objects waiting to be painted?
,
Oct 12 2017
One experiment we could do here is prioritizing rendering (i.e., BeginMainFrame) until we reach FCP.
,
Oct 12 2017
> Would it be easy to determine if there are any new contentful objects waiting to be painted? It wouldn't be easy, but is possible. But I'm not sure if it is necessary to detect such things. The style, layout and paint systems already have dirty bits to determine if there is new content to be painted, and reuse existing display lists otherwise. So it may not be any significant cost to just go ahead and paint.
,
Oct 13 2017
Based on the last two comments, it seems reasonable to try an experiment to prioritize rendering (i.e., BeginMainFrame) until we reach FCP. (I would caution against doing this until FMP though, as it will cause bad experience on sites with slow TTI)
,
Nov 17 2017
,
May 8 2018
,
Aug 16
,
Yesterday
(40 hours ago)
This also impacts airbnb.com, all our scripts are async and it seems we'll often see a bunch of script before the paint. See issue #921335. I think ideally the browser should prioritize painting after all long tasks, ex. after an accumulated 150ms of script always do BeginMainFrame if one is pending. |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by panicker@chromium.org
, Oct 12 2017Components: Blink>Scheduling Blink>PerformanceAPIs