Loading Main Resources, Sub Resources by webkit

Loading Main Resources, Sub Resources by webkit

As you know before rendering a web page , need to download web pages(main resource-HTML source code and sub resources- image files, css files, js files etc) ... So Webkit follows two pipeline for loading full webpage

Pipeline-1 : It's loading only HTML source file. In webkit to load HTML source code, FrameLoader is responsible. FrameLoader is creating DocumentLoader to load web source code, once DocumentLoader is created, DocumentLoader's state is in "Policy State" which is waiting for input given by webkit client. now here webkit client decides whether it should be navigate or block based on policy, once DocumentLoader gets input from webkit client it's state goes to "Provision State" or "Block State".




If input is Block state then there will be no loading of webpages so blank screen can be observed. If webkit client gives input as navigation mode to DocumentLoader then it's state goes to "Provisional State" which fires one event to kick-off network requests to load webpage source by creating MainResourceLoader object. Actually MainResourceLoader object is responsible to contact network library of platform and this is done by using interface ResourceHandle. Once required/sufficient information is received from network then DocumentLoader state is changed to "Committed state".

Brief:
1. FrameLoader creates DocumentLoader to load main resource. When document loader is getting created its state is going to Policy state and it’s waiting for policy applied by webkit client.

2. Once webkit client sends (navigation mode, block mode etc) to FrameLoader then DocumentLoader state is going to changed(provisional state or Block state)

3. Now provisional state kicks off network request and waits for it.

4. Once sufficient information got from network then DocumentLoader changes its state from provisional state to committed state.


Above is only downloading webpages source code(HTML source code) it's not over ...still remaining part is some other resources having this HTML Source code like images, css files, js files etc. So to load full web page need to download these sub resources( images, css files, js files). To load these sub resources, other Pipeline is used as down.

Pipeline-2 : Loading/downloading of sub resources is done in this pipeline. To do this task, DocLoader object in webkit is responsible. If any sub resource referred by DocumentLoader then DocLoader need to request to network to download sub resources. To do this webkit has one concept of image catches. For every sub resource webkit creates CachedImage object. Before kicking-off network request , DocLoader checks in cache if already available its CachedImage object, if available then it will take from this object, not needed to kick-off network request . It's done for optimization purpose. Once loading of all sub resources done then parsing, rendering, painting etc will go.
My next blog will be on which order of downloading of sub resources( css Files or js files or Image files) will be best. Why CSS files need to download first then js files and all ? You can get all in my next blog.