Webkit is open source web content rendering engine. Webkit consists of millions of code and covers almost all computer science concepts. The webkit developers/engineers always find some difficulty to grasp the concept of internal modules/component as it lacks the documentation. without documentation working with webkit is really a hard job.

What is Webkit:

When we say webkit we actually mean on of port of WebCore. WebCore is the core engine where web page is being processed. Webkit is one of the port of WebCore. Generally we talk about webkit but actual implementation of rendering engine is in WebCore.

” Webkit is one of port of WebCore and we can call it as Web Page rendering engine”



Webkit has two architecture namely webkit1 and webkit2. Webkit1 is single process model  and webkit2 is multiprocess model. webkit2 is more stable than the webkit1 because webkit2 runs as  UIProcess and WebProcess . UIProcess communicates with webprocess via IPC. The main logic resides in WebProcess and API is exposed to UIProcess. This API Layer is used to manipulate WebProcess.


From above figure it is clear that part of webkit and application logic lives in UI Process and rest of Webkit, WebCore along with JS engine resides in Web Process.The web process is isolated from the UI process. This can deliver benefits in responsiveness, robustness, security (through the potential to sandbox the web process) and better use of multicore CPUs. There is a straightforward API that takes care of all the process management details for you.

Here is some links where you can touch some internal concepts of Web Browser engine (WebKit)

For Beginners:
how browsers work, refer browser internals:
* How Browsers Work: behind the scenes of modern web browsers

New WebKit developers, start here:
* How WebKit Loads a Web Page – Explains how WebCore, the main rendering component of WebKit, is involved in the loading process.
* Rendering in Webkit(Video) – An excellent tech talk by Eric Seidel explaining how WebKit actually renders a page.
* WebKit Wiki!

Very useful series of posts by Dave Hyatt:
WebCore Rendering I – The Basics
WebCore Rendering II – Blocks and Inlines
WebCore Rendering III – Layout Basics
WebCore Rendering IV – Absolute/Fixed and Relative Positioning
WebCore Rendering V – Floats
Render Layers and The Rendering paths – “WebKit Rendering Basics” section explains it very well.

Related Contents to follow