[webkit-dev] [chromium-dev] Learning Webkit: High Level Webkit overview?

[tali garsiel]

Hi,

I'm also trying to figure out Webkit flow.
I modified the Mozilla diagram to my understanding of Webkit flow.
Is it correct?

Tali


On Tue, Oct 6, 2009 at 11:07 PM, Buakaw San <buakaw.san at gmail.com> wrote:

> Thanks for your input. I have attached the flow chart for the Mozilla's
> Layout engine, how would you say the WebKit data flow differs from this
> diagram?
>
> I'm a little confused about when the CSS gets parsed. From the
> documentation that I've read, my understanding is that the CSS must be read
> and parsed before the DOM tree can be constructed since the RenderObject is
> attached with its RenderStyle as the DOM nodes are added. I can't seem to
> pinpoint where this attaching occurs.
>
> Thanks.
>
>
> On Tue, Oct 6, 2009 at 1:20 PM, James Robinson <jamesr at google.com> wrote:
>
>>
>>
>> On Sun, Oct 4, 2009 at 8:19 AM, Buakaw San <buakaw.san at gmail.com> wrote:
>>
>>>
>>> There is a document called "How Chromium Displays Web Pages" (http://
>>> dev.chromium.org/developers/design-documents/displaying-a-web-page-in-
>>> chrome), however I haven't found an equivalent page for Webkit. E.g.
>>> "How Webkit Renders Web Pages". The Chromium document doesn't go into
>>> the Webkit part. There is an old blog
>>> http://webkit.org/blog/114/webcore-rendering-i-the-basics/.
>>> Which talks about some of the render process but it seems to focus on
>>> CSS handling.
>>>
>>> I'm trying to diagram this process. E.g. We're load a simple web page
>>> with some body text, a couple divs; one with an image tag, one with a
>>> plugin like flash. What is happening from start to finish?
>>>
>>> I imagine the process like such:
>>>
>>> Content => HTML Parsing => DOM Construction => Layout (Render Tree
>>> Construction) => Rendering
>>>
>>
>> That's pretty much spot on.  Note that it's not always happening exactly
>> in this order, especially if the document is large and arrives from the
>> server in multiple chunks.  Then it could look something like:
>>
>> Some content received
>> HTML parsing (which builds up the DOM as it goes)
>> Some more content received
>> More HTML parsing, DOM construction
>> Layout
>> Rendering (aka painting)
>>
>>>
>>> What is the first thing that is done?  Which class is initially hit
>>
>> when a new web page request arrives? Which classes are responsible for
>>> parsing HTML/DOM/CSS? How is the plugin loaded? How is the image
>>> loaded?
>>>
>>
>> The picture is a bit complex, but I can try to give some pointers for
>> starting.  Resources are pulled in through a variety of Loader classes -
>> start with FrameLoader (although it's too complicated at the moment).  HTML
>> Content is fed into an HTMLTokenizer which builds up the DOM tree.  For
>> images, see ImageLoader.  I'm not sure exactly how plugins work.  Layout and
>> painting are covered in the Surfin' Safari blog post - if you want to step
>> through them in a debugger start in FrameView.
>>
>>
>>>
>>> While these are questions that could be answered by studying the code
>>> in depth, it would be nice if there was such a basic introduction to
>>> Webkit rendering. Ideally one with nice pictures (like the Chromium
>>> docs), interaction diagrams and such.
>>>
>>
>> Is that volunteering? :)
>>
>> - James
>>
>>
>>>
>>> Perhaps this thread could become a source of knowledge for new comers.
>>>
>>> --~--~---------~--~----~------------~-------~--~----~
>>> Chromium Developers mailing list: chromium-dev at googlegroups.com
>>> View archives, change email options, or unsubscribe:
>>>    http://groups.google.com/group/chromium-dev
>>> -~----------~----~----~----~------~----~------~--~---
>>>
>>>
>>
>
> _______________________________________________
> webkit-dev mailing list
> webkit-dev at lists.webkit.org
> http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20091014/385f8338/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: webkit_flow.jpg
Type: image/jpeg
Size: 40933 bytes
Desc: not available
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20091014/385f8338/attachment.jpg>