浏览器加载和渲染网页的过程

     关于网页加载和渲染的过程，在网络上的讨论并不多。可能是因为这个过程比较复杂，而且浏览器执行的速度太快，目前还没有发现什么比较好的工具可以清楚的看到浏览器解析网页的每一个过程。通过firedug和httpWatch可以看到浏览器的http请求，但是对于浏览器如何paint和flow处理html元素，我们仍然是不得而知。“flow”这个词借鉴于reflow，表示浏览器第一次加载网页的过程。在网络上搜索了一下，学习如下。



关于浏览器加载网页过程的有趣视频


       可以参见：http://www.aoao.org.cn/blog/2008/05/reflow/ （形象化的reflow）。这个视频展现了网页加载的过程，看着比较有趣。要是可以更加形象化，就更好了，可以帮助我们书写更好的提高网页加载速度的代码。



浏览器内核


       不同的浏览器内核，对于网页的解析过程肯定也不尽相同。http://www.mac52ipod.cn/post/Trident-Gecko-WebKit-Presto.php 一文对各种浏览器的页面渲染引擎进行了简介。目前主要有基于

（1）Trident页面渲染引擎 –> IE系列浏览器；

（2）Gecko页面渲染引擎 –> Mozilla Firefox；

（3）KHTML页面渲染引擎或WebKit框架 –> Safafi和Google Chrome；

（4）Presto页面渲染引擎 –> Opera

       详细的介绍可以参见原文。



浏览器解析网页的过程


       http://hi.baidu.com/seosky/blog/item/78d3394c130f86ffd72afc56.html 浏览器加载和渲染原理分析一文中通过一定的方法，推断了浏览器加载解析网页的顺序大致如下：

1. IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的；

2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）；

3. 在下载过程中，如果遇到某一标签是嵌入文件，并且文件是具有语义解释性的（例如：JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载，并且在下载后进行解析，解析（JS、CSS中如有重定义，后定义函数将覆盖前定义函数）过程中，停止页面所有往下元素的下载；

4. 样式表文件比较特殊，在其下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行样式渲染。并以此方式一直渲染下去，直到整个页面渲染完成。

       当然这是一个推断的过程。



借助Google PageSpeed和Yahoo YSlow分析网页加载


       通过这两个工具，测试网页加载过程，可以得到一些提高网页加载速度的建议。使用Google PageSpeed对Google首页进行分析，可以得到建议：

（1）压缩javascript和CSS；

（2）合并外部javascript和CSS；

（3）减少DNS寻址时间；这条与将图片分散到不同的域名存储这条折中处理；

（4）使用缓存；

（5）尽量避免CSS表达式；

（6）为图片增加宽度和高度属性；

（7）将css放在网页头部，合理放置js的位置。

       同时，利用YSlow对google首页进行分析，我们也可以得到一些改进的建议。这些建议差不太多，就不在详细说明。

       合理使用这两个工具，优化我们的网页，提高网页加载速度，增强用户体验。



---------------------------



我自己的误解

       过去一直以为，一个容器如果没有读到自己的结束标签，那么这个容器就不会在浏览器中显示出来。今天测试了下，却发现浏览器在读到一个容器的开始标签的时候，就可以显示该容器了。关于浏览器如何一个一个的paint HTML中的元素，如果flow它们，这个过程还需要进一步了解。当然，也可以不管过程，只看加载的结果，通过pagespeed和Yslow来优化自己的网页。个人在做布局的时候，还是会秉承一条原则：尽量让一个父容器小一些！



参考文献


[1] 形象化的reflow. http://www.aoao.org.cn/blog/2008/05/reflow/ . 2009-7-20

[2] 各种浏览器的页面渲染引擎简介. http://www.mac52ipod.cn/post/Trident-Gecko-WebKit-Presto.php. 2009-7-20

[3] 浏览器加载和渲染原理分析. http://hi.baidu.com/seosky/blog/item/78d3394c130f86ffd72afc56.html. 2009-7-20