浏览器如何生成Web页面

浏览器如何生成Web页面

IE,Firefox等浏览器是如何生成Web页面的呢？现在都在开发手机浏览器，开发浏览器需要坐什么呢？在网上搜了相关的资料，几乎没有。下载Webkit的源码瞄了一眼。正好发现作者写了一系列文章介绍webkit的页面生成技术。这里总结一下。

 

1，用户在浏览器输入网址，浏览器通过网络请求到服务器请求响应的页面。这里页面分为有frame和没有frame的页面两种。有frame的页面通过一个fameloader递归load各个frame中的document。Document loader先cache资源，然后解析。解析中可能会遇到一些subresource，如图片，css，js等，再通过网络请求响应资源。如下图所示：

 

2，load完所有资源后，由专门的ResourceHandler解析资源为一个DOM树，或者叫RenderTree。在解析过程中每增加一个节点都会相应的增加它的Renderer，除非这个节点不显示。删除该DOM节点时，destroy相应的Renderer。上边的节点是否显示已经涉及到，增加节点的时候还需要查询该节点的css style。根据盒子模型设置相应的属性等。block和inline等特殊处理。

 

3，下来需要确定各个节点的Layout。当动态增加了新的节点，还需要根据dirty标志确定该节点是否需要重新render。

 

4，所有的信息齐备以后，浏览器就可以将页面render到用户的窗口了。

 

理解比较肤浅，只是简单的介绍，许多细节的东西并没有涉及。更多信息请参考http://webkit.org/coding/technical-articles.html

希望可以帮助大家更好的理解web，制作更好的web页面。