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

[James Robinson]

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/39e3d046/attachment.html>