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

[Buakaw San]

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

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?

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.

Perhaps this thread could become a source of knowledge for new comers.