204031 2019-11-08 16:34:45 -0800 First layout and paint blocks sometimes blocks until document finishes parsing 2020-02-27 09:51:29 -0800 1 1 1 Unclassified WebKit Layout and Rendering WebKit Local Build All All RESOLVED DUPLICATE 208285 InRadar P2 Normal --- 1 nham nham bfulgham koivisto nham simon.fraser webkit-bug-importer zalan oldest_to_newest 1588886 0 383178 nham 2019-11-08 16:34:45 -0800 Created attachment 383178 first paint blocked test case In some cases, the first layout and paint is throttled until the main document is finished parsing. The most common way this can happen is if someone creates a document with a large <script> (without defer or async) at the end of the document. Since the script can modify the document, the document won't finish parsing until the script has downloaded and then executed. I've attached a test case that illustrates this. Run it with `server.py 8081` and then load http://localhost:8081/index.html. Firefox and Chrome render the page instantly, while Safari blocks for 10 seconds until the script finishes downloading and executing before rendering. It looks like what happens here is that Document::shouldScheduleLayout only schedules an async layout if the FrameView::isVisuallyNonEmpty() returns true: ``` bool Document::shouldScheduleLayout() { ... if (page() && page()->chrome().client().layerFlushThrottlingIsActive() && view() && view()->isVisuallyNonEmpty()) return false; ``` FrameView::isVisuallyNonEmpty() returns a cached flag: ``` bool isVisuallyNonEmpty() const { return m_isVisuallyNonEmpty; } ``` This cached flag is updated from `FrameView::fireLayoutRelatedMilestonesIfNeeded`. We call `fireLayoutRelatedMilestonesIfNeeded` in three cases: 1. When the document finishes parsing (`Document::setParsing(false)`) 2. Periodically from the progress timer (`FrameView::loadProgressingStatusChanged()`). However there is a gate here which causes us to only fire the layout milestone if the frame is *completely* loaded (main resource and all subresources), so this actually does nothing in this test case. 3. After a layout in `FrameView::performPostLayoutTasks`. However, this will only fire if style recalc goes down the sync layout path, which it doesn't in this case. I talked to @zalan about this and thinks it would probably be pretty easy to fix by updating the flag when the main runloop goes idle after a style recalc, as long as we agree that this is the correct behavior. 1588887 1 webkit-bug-importer 2019-11-08 16:35:41 -0800 <rdar://problem/57039427> 1588898 2 simon.fraser 2019-11-08 16:56:49 -0800 > when the main runloop goes idle after a style recalc Please think about this in terms of HTML Event Loop, which might delay style recal until "update the rendering" time. 1588959 3 nham 2019-11-08 19:31:00 -0800 I don't think my original test case was quite right, as this behavior doesn't seem to reproduce easily. I think some of the blocking I saw was simply the *server* being blocked handling a previous delayed request, since my original test case was a single-threaded server. So I'll have to take a closer look at this on Monday. 1623532 4 nham 2020-02-27 09:51:29 -0800 The layout of the test case is unnecessarily delayed by 250 ms, which should be fixed by https://bugs.webkit.org/show_bug.cgi?id=208285. Duping to that. *** This bug has been marked as a duplicate of bug 208285 *** 383178 2019-11-08 16:34:45 -0800 2019-11-08 16:34:45 -0800 first paint blocked test case sync-script.zip application/zip 2870 nham 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 BQYAAAAABQAFAOcBAAA5CQAAAAA=