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

zaheer ahmad zaheer.mot at gmail.com
Wed Oct 7 00:11:36 PDT 2009


hi,
My comments below. Pls correct me if my understanding is inaccurate.

On Wed, Oct 7, 2009 at 2:37 AM, 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.
>
The default style rules (User/UA style sheet) gets parsed in
Document::attach() which happens when documents gets transitioned to commit
state (i.e. the moment you receive some data). The page style (inline
<style>, link, import etc) get parsed as and when they are loaded and the
styles are updated (updateStyleSelector())

> 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 dont think this is true. The style for an element is computed on the fly
using the CSSStyleSelector with the current css rules and these can change
whenever new styles are loaded. i think the process of updateStyleSelector +
recalcStyle(Force) does this two steps - i.e update style selector on the
document, and ask the dom nodes to update their styles

> I can't seem to pinpoint where this attaching occurs.
>
because the style loading is progressive, the first layout is postponed till
all styles have been loaded. Document::shouldScheduleLayout() ->
haveStyleSheetsLoaded

>
> 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/20091007/4ffa51fe/attachment-0001.html>


More information about the webkit-dev mailing list