[prev in list] [next in list] [prev in thread] [next in thread]
List: webkit-dev
Subject: Re: [webkit-dev] WebKit position on Paint Timing / (first paint, first contentful paint)
From: Maciej Stachowiak <mjs () apple ! com>
Date: 2020-02-27 17:31:19
Message-ID: 27B9B181-0A76-4051-871F-31ADF52C3BE3 () apple ! com
[Download RAW message or body]
[Attachment #2 (multipart/alternative)]
> On Feb 27, 2020, at 3:41 AM, Noam Rosenthal <noam@webkit.org> wrote:
>
>
>
> On Thu, Feb 27, 2020 at 12:46 PM Noam Rosenthal <noam@webkit.org \
> <mailto:noam@webkit.org>> wrote:
>
> On Thu, Feb 27, 2020 at 12:17 PM Yoav Weiss <yoav@yoav.ws <mailto:yoav@yoav.ws>> \
> wrote:
>
> On Wed, Feb 26, 2020 at 11:33 PM Ryosuke Niwa <rniwa@webkit.org \
> <mailto:rniwa@webkit.org>> wrote:
> I don't think we should do that. For starters, Chrome's painting strategy while \
> loading a web page is very different from that of Safari / WebKit. We would freeze \
> the painting of the previous page at the moment a new navigation is committed, and \
> we wouldn't update the painting until the destination page has a meaningful content \
> in it. This is a very much different from Chrome's model where the moment a new \
> navigation is committed, Chrome will show a blank page then start incrementally \
> painting the page throughout the navigation. Body background color is still painted \
> before any contentful paint... Is this a bug? Also, a web page might not have \
> content at all (e.g. a bunch of divs with bgcolors). Would webkit not render that \
> web page at all?
> It seems like the code in FrameView does this:
> // Ensure that we always fire visually non-empty milestone eventually.
> if (finishedParsingMainDocument && frame().loader().isComplete())
> return true;
>
> I suggest splitting this to two milestones - the current one, that triggers when \
> the main document finished loading, and another one that only triggers when content \
> has actually been painted (which may never happen). I think this would be a good \
> split for first-paint/first-contentful-paint in WebKit.
The first visually non-empty milestone almost always happens way before this point. \
The above is just a fallback to make sure we eventually hit this milestone. For \
example, if a document is totally blank even after loading the document and all \
subresources, we want to paint it instead of waiting forever.
The visually non-empty heuristic is elsewhere.
Note that WebKit would consider the paint triggered by the above fallback code to be \
both a first paint and "first visually non-empty paint" or "first meaningful paint", \
which somewhat corresponds to Chrome's notion of "first contentful paint".
First paint can only happen earlier under even more unusual circumstances, I believe \
there is a timeout after which we will paint even if all we can paint is blank white \
or background color.
>
> But let's take the specifics to Slack/bugzilla?
I think it would be good for you to talk to people who understand WebKit's \
layout/paint milestones in detail before taking things to bugzilla. Ask on Slack, and \
I'll point you to the right people.
>
> _______________________________________________
> webkit-dev mailing list
> webkit-dev@lists.webkit.org <mailto:webkit-dev@lists.webkit.org>
> https://lists.webkit.org/mailman/listinfo/webkit-dev \
> <https://lists.webkit.org/mailman/listinfo/webkit-dev>
[Attachment #5 (unknown)]
<html><head><meta http-equiv="Content-Type" content="text/html; \
charset=utf-8"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; \
line-break: after-white-space;" class=""><br class=""><div><br class=""><blockquote \
type="cite" class=""><div class="">On Feb 27, 2020, at 3:41 AM, Noam Rosenthal <<a \
href="mailto:noam@webkit.org" class="">noam@webkit.org</a>> wrote:</div><br \
class="Apple-interchange-newline"><div class=""><div dir="ltr" style="caret-color: \
rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; \
font-variant-caps: normal; font-weight: normal; letter-spacing: normal; text-align: \
start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: \
0px; -webkit-text-stroke-width: 0px; text-decoration: none;" class=""><br \
class="Apple-interchange-newline"><br class=""><div class="gmail_quote"><div \
dir="ltr" class="gmail_attr">On Thu, Feb 27, 2020 at 12:46 PM Noam Rosenthal <<a \
href="mailto:noam@webkit.org" class="">noam@webkit.org</a>> wrote:<br \
class=""></div><blockquote class="gmail_quote" style="margin: 0px 0px 0px 0.8ex; \
border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, \
204); padding-left: 1ex;"><div dir="ltr" class=""><div dir="ltr" class=""><br \
class=""></div><br class=""><div class="gmail_quote"><div dir="ltr" \
class="gmail_attr">On Thu, Feb 27, 2020 at 12:17 PM Yoav Weiss <<a \
href="mailto:yoav@yoav.ws" target="_blank" class="">yoav@yoav.ws</a>> wrote:<br \
class=""></div><blockquote class="gmail_quote" style="margin: 0px 0px 0px 0.8ex; \
border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, \
204); padding-left: 1ex;"><div dir="ltr" class=""><div dir="ltr" class=""><br \
class=""></div><br class=""><div class="gmail_quote"><div dir="ltr" \
class="gmail_attr">On Wed, Feb 26, 2020 at 11:33 PM Ryosuke Niwa <<a \
href="mailto:rniwa@webkit.org" target="_blank" class="">rniwa@webkit.org</a>> \
wrote:</div><blockquote class="gmail_quote" style="margin: 0px 0px 0px 0.8ex; \
border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, \
204); padding-left: 1ex;"><div dir="ltr" class=""><div class="gmail_quote"><div \
class=""><br class=""></div><div class="">I don't think we should do that. For \
starters, Chrome's painting strategy while loading a web page is very different from \
that of Safari / WebKit. We would freeze the painting of the previous page at the \
moment a new navigation is committed, and we wouldn't update the painting until the \
destination page has a meaningful content in it. This is a very much different from \
Chrome's model where the moment a new navigation is committed, Chrome will show a \
blank page then start incrementally painting the page throughout the \
navigation.</div></div></div></blockquote></div></div></blockquote><div class="">Body \
background color is still painted before any contentful paint... Is this a bug?<br \
class="">Also, a web page might not have content at all (e.g. a bunch of divs with \
bgcolors). Would webkit not render that web page at \
all? </div></div></div></blockquote><div class=""><br class="">It seems like the \
code in FrameView does this:<br class=""><div style="margin: 0px; \
font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; \
font-size: 12px; line-height: normal; font-family: Menlo; color: rgb(93, 108, 121);" \
class=""><span class="gmail-s1" style=""><span \
class="gmail-Apple-converted-space"> </span></span>// Ensure that \
we always fire visually non-empty milestone eventually.</div><div style="margin: 0px; \
font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; \
font-size: 12px; line-height: normal; font-family: Menlo;" class=""><span \
class="gmail-Apple-converted-space"> <span \
class="Apple-converted-space"> </span></span><span class="gmail-s2" \
style="color: rgb(155, 35, 147);"><b class="">if</b></span><span \
class="Apple-converted-space"> </span>(finishedParsingMainDocument && \
frame().loader().isComplete())</div><div style="margin: 0px; font-variant-numeric: \
normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 12px; \
line-height: normal; font-family: Menlo; color: rgb(155, 35, 147);" class=""><span \
class="gmail-s1" style=""><span class="gmail-Apple-converted-space"> \
<span class="Apple-converted-space"> </span></span></span><b \
class="">return</b><span class="gmail-s1" style=""><span \
class="Apple-converted-space"> </span></span><b class="">true</b><span \
class="gmail-s1" style="">;<br class=""><br class="">I suggest splitting this to two \
milestones - the current one, that triggers when the main document finished loading, \
and another one that only triggers when content has actually been painted (which may \
never happen). I think this would be a good split for \
first-paint/first-contentful-paint in WebKit.<br \
class=""></span></div></div></div></div></div></blockquote><div><br \
class=""></div><div>The first visually non-empty milestone almost always happens way \
before this point. The above is just a fallback to make sure we eventually hit this \
milestone. For example, if a document is totally blank even after loading the \
document and all subresources, we want to paint it instead of waiting \
forever.</div><div><br class=""></div><div>The visually non-empty heuristic is \
elsewhere.</div><div><br class=""></div><div>Note that WebKit would consider the \
paint triggered by the above fallback code to be both a first paint and "first \
visually non-empty paint" or "first meaningful paint", which somewhat corresponds to \
Chrome's notion of "first contentful paint".</div><div><br class=""></div><div>First \
paint can only happen earlier under even more unusual circumstances, I believe there \
is a timeout after which we will paint even if all we can paint is blank white or \
background color.</div><br class=""><blockquote type="cite" class=""><div \
class=""><div dir="ltr" style="caret-color: rgb(0, 0, 0); font-family: Helvetica; \
font-size: 12px; font-style: normal; font-variant-caps: normal; font-weight: normal; \
letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; \
white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; \
text-decoration: none;" class=""><div class="gmail_quote"><div class=""><div \
style="margin: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; \
font-stretch: normal; font-size: 12px; line-height: normal; font-family: Menlo; \
color: rgb(155, 35, 147);" class=""><span class="gmail-s1" style=""><br class="">But \
let's take the specifics to \
Slack/bugzilla?</span></div></div></div></div></div></blockquote><div><br \
class=""></div><div>I think it would be good for you to talk to people who understand \
WebKit's layout/paint milestones in detail before taking things to bugzilla. Ask on \
Slack, and I'll point you to the right people.</div><br class=""><blockquote \
type="cite" class=""><div class=""><div dir="ltr" style="caret-color: rgb(0, 0, 0); \
font-family: Helvetica; font-size: 12px; font-style: normal; font-variant-caps: \
normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: \
0px; text-transform: none; white-space: normal; word-spacing: 0px; \
-webkit-text-stroke-width: 0px; text-decoration: none;" class=""><div \
class="gmail_quote"><div class=""><br class=""></div><blockquote class="gmail_quote" \
style="margin: 0px 0px 0px 0.8ex; border-left-width: 1px; border-left-style: solid; \
border-left-color: rgb(204, 204, 204); padding-left: \
1ex;"></blockquote></div></div><span style="caret-color: rgb(0, 0, 0); font-family: \
Helvetica; font-size: 12px; font-style: normal; font-variant-caps: normal; \
font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; \
text-transform: none; white-space: normal; word-spacing: 0px; \
-webkit-text-stroke-width: 0px; text-decoration: none; float: none; display: inline \
!important;" class="">_______________________________________________</span><br \
style="caret-color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; \
font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: \
normal; text-align: start; text-indent: 0px; text-transform: none; white-space: \
normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" \
class=""><span style="caret-color: rgb(0, 0, 0); font-family: Helvetica; font-size: \
12px; font-style: normal; font-variant-caps: normal; font-weight: normal; \
letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; \
white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; \
text-decoration: none; float: none; display: inline !important;" class="">webkit-dev \
mailing list</span><br style="caret-color: rgb(0, 0, 0); font-family: Helvetica; \
font-size: 12px; font-style: normal; font-variant-caps: normal; font-weight: normal; \
letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; \
white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; \
text-decoration: none;" class=""><a href="mailto:webkit-dev@lists.webkit.org" \
style="font-family: Helvetica; font-size: 12px; font-style: normal; \
font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: \
auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; \
widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; \
-webkit-text-stroke-width: 0px;" class="">webkit-dev@lists.webkit.org</a><br \
style="caret-color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; \
font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: \
normal; text-align: start; text-indent: 0px; text-transform: none; white-space: \
normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;" \
class=""><a href="https://lists.webkit.org/mailman/listinfo/webkit-dev" \
style="font-family: Helvetica; font-size: 12px; font-style: normal; \
font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: \
auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; \
widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; \
-webkit-text-stroke-width: 0px;" \
class="">https://lists.webkit.org/mailman/listinfo/webkit-dev</a></div></blockquote></div><br \
class=""></body></html>
_______________________________________________
webkit-dev mailing list
webkit-dev@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-dev
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic