浏览器加载和渲染网页的过程2009-07-20 20:26关于网页加载和渲染的过程，在网络上的讨论并不多。
可能是因为这个过程比较复杂，而且浏览器执行的速度太快，目前还没有发现什么比较好的工具可以清楚的看到浏览器解析网页的每一个过程。
通过firedug和httpWatch可以看到浏览器的http请求，但是对于浏览器如何paint和flow处理html元素，我们仍然是不得而知。
“flow”这个词借鉴于reflow，表示浏览器第一次加载网页的过程。
在网络上搜索了一下，学习如下。
关于浏览器加载网页过程的有趣视频可以参见：/blog/2008/05/reflow/（形象化的reflow）。
这个视频展现了网页加载的过程，看着比较有趣。
要是可以更加形象化，就更好了，可以帮助我们书写更好的提高网页加载速度的代码。
浏览器内核不同的浏览器内核，对于网页的解析过程肯定也不尽相同。
/post/Trident-Gecko-WebKit-Presto.php一文对各种浏览器的页面渲染引擎进行了简介。
目前主要有基于（1）Trident页面渲染引擎–> IE系列浏览器；（2）Gecko页面渲染引擎–> Mozilla Firefox；（3）KHTML页面渲染引擎或WebKit框架–> Safafi和Google Chrome；（4）Presto页面渲染引擎–> Opera详细的介绍可以参见原文。
浏览器解析网页的过程/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. /blog/2008/05/reflow/ . 2009-7-20[2] 各种浏览器的页面渲染引擎简介./post/Trident-Gecko-WebKit-Presto.php. 2009-7-20[3] 浏览器加载和渲染原理分析./seosky/blog/item/78d3394c130f86ffd72afc56.html. 2009-7-20各种浏览器的页面渲染引擎简介经常听到“XX浏览器搭载了最新版页面渲染引擎，速度大幅提升”之类的报道，以前只知道页面渲染引擎是浏览器的灵魂，IE、Firefox、Safari、Opera 浏览器的渲染引擎各不相同。
今天从《秦爱网志》ZT一篇介绍各种浏览器页面渲染引擎的博文，很好很全面的那种网页浏览器的页面渲染引擎负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。
所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要页面渲染引擎。
Trident页面渲染引擎Trident（又称为MSHTML），是微软的视窗操作系统（Windows）搭载的网页浏览器—Internet Explorer的页面渲染引擎的名称，它的第一个版本诞生于1997年10月Internet Explorer第四版中，IE7做了的重大的变动，除了加入新的技术之外，并增加对网页标准的支持，目前是互联网上最流行的排版引擎。
使用Trident页面渲染引擎的浏览器有·Internet Explorer（IE）·傲游·世界之窗浏览器·Avant·腾讯TT·Netscape 8·NetCaptor·Sleipnir·GOSURF·GreenBrowser·KKmanGecko页面渲染引擎Gecko是套开放源代码的、以C++编写的页面渲染引擎。
Gecko是跨平台的，能在Microsoft Windows、Linux和Mac OS X等主要操作系统上运行。
它是最流行的页面渲染引擎之一，其流行程度仅次于Trident。
使用Gecko页面渲染引擎的浏览器有·Fennec·Firefox·网景（6至9）·SeaMonkey·Camino·Flock·Galeon·K-Meleon·Minimo·Mozilla·Sleipnir·Songbird·XeroBankKHTML页面渲染引擎或WebKit框架KHTML，是HTML页面渲染引擎之一，由KDE所开发。
KHTML拥有速度快捷的优点，但对错误语法的容忍度则比Mozilla产品所使用的Gecko引擎小。
苹果电脑于2002年采纳了KHTML，作为开发Safari浏览器之用。
WebCore及WebKit引擎均是KHTML的衍生产品；WebKit 是Mac OS X v10.3及以上版本所包含的软件框架，WebKit是Mac OS X的Safari网页浏览器使用KHTML页面渲染引擎的浏览器有·Safari·Konqueror·Epiphany·Google Chrome·iCab·OmniWeb·Midori·ShiiraPresto页面渲染引擎Presto是一个由Opera Software开发的浏览器页面渲染引擎，应用于Opera 7.0~9.60版，它取代了旧版Opera中所使用的Elektra页面渲染引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。
使用Presto页面渲染引擎的浏览器有·Opera·任天堂DS浏览器Java软件平台Java，是一种可以撰写跨平台应用软件的面向对象的程序设计语言，Java 编程语言的风格十分接近C++语言。
微软推出的.NET平台以及模仿Java的C#语言正是与之竞争下的产物。
使用Java平台的浏览器有·HotJava·Opera Mini·UCWEBTasman页面渲染引擎Tasman，是微软的Internet Explorer for Mac浏览器所使用的页面渲染引擎，也是为尝试支援W3C所制定的网页标准而设计的。
在Mac版的Microsoft Office 2004中，电子邮件客户端Microsoft Entourage使用的就是Tasman页面渲染引擎。
使用Tasman页面渲染引擎的浏览器有·Internet Explorer for Mac·MSN for Mac OS X文本界面就是一些纯文字式的网页浏览器，在LINUX系统中比较常见。
使用文本界面的浏览器有·Lynx·Links·w3m手持设备或嵌入式系统·Internet Explorer Mobile·Opera Mobile·PSP浏览器其它页面渲染引擎·Amaya·Dillo·Mosaic主流浏览器内核的解析和对比要搞清楚浏览器内核是什么，首先应该先搞清楚浏览器的构成。
简单来说浏览器可以分为两部分，shell+内核。
其中shell的种类相对比较多，内核则比较少。
Shell是指浏览器的外壳：例如菜单，工具栏等。
主要是提供给用户界面操作，参数设置等等。
它是调用内核来实现各种功能的。
内核才是浏览器的核心。
内核是基于标记语言显示内容的程序或模块。
也有一些浏览器并不区分外壳和内核。
从Mozilla将Gecko独立出来后，才有了外壳和内核的明确划分。
目前主流的浏览器有IE6、IE8、Mozilla、FireFox、Opera、Safari、Chrome、Netscape等。
什么是浏览器内核浏览器内核又可以分成两部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。
它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。
浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
（参见维基百科）JS引擎则是解析Javascript语言，执行javascript语言来实现网页的动态效果。