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

[Buakaw San]

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
>> -~----------~----~----~----~------~----~------~--~---
>>
>>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20091006/cb3e4394/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: gecko_flow_chart.jpg
Type: image/jpeg
Size: 54678 bytes
Desc: not available
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20091006/cb3e4394/attachment.jpg>