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


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


浏览器内核
   
不同的浏览器内核，对于网页的解析过程肯定也不尽相同。www.mac52ipod/post/Trident-Gecko-WebKit-Presto.php 一文对各种浏览器的页面渲染引擎进行了简介。目前主要有基于
（1）Trident页面渲染引擎 –> IE系列浏览器；
（2）Gecko页面渲染引擎 –> Mozilla Firefox；
（3）KHTML页面渲染引擎或WebKit框架 –> Safafi和Google Chrome；
（4）Presto页面渲染引擎 –> Opera
    详细的介绍可以参见原文。


浏览器解析网页的过程
   
hi.baidu/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] 各种浏览器的页面渲染引擎简介. www.mac52ipod/post/Trident-Gecko-WebKit-Presto.php. 2009-7-20
[3] 浏览器加载和渲染原理分析. hi.baidu/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
· KKman
Gecko页面渲染引擎
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
· XeroBank
KHTML页面渲染引擎或WebKit框架
KHTML，是HTML页面渲染引擎之一，由KDE所开发。KHTML拥有速度快捷的优点，但对错误语法的容忍度则比Mozilla产品所使用的Gecko引擎小。苹果电脑于2002年采纳了KHTML，作为开发Safari浏览器之用。WebCore及WebKit引擎均是KHTML的衍生产品；We
bKit是 Mac OS X v10.3及以上版本所包含的软件框架，WebKit是Mac OS X的Safari网页浏览器的基础。
使用KHTML页面渲染引擎的浏览器有
· Safari
· Konqueror
· Epiphany
· Google Chrome
· iCab
· OmniWeb
· Midori
· Shiira
java浏览器下载
Presto页面渲染引擎
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
· UCWEB
Tasman页面渲染引擎
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
· Minimo
· 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语言来实现网页的动态效果。最开始渲染引 擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个ACID来测试引擎的兼容性和性 能。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、 Presto、Webkit。
Trident又称MSHTML，是微软开发的渲染引擎（包含了Javascript引擎JScript），他已经深入了Windows操作系统的 骨髓，例如Windows Media Play，Windows Explorer，Outlook Express等都使用了。目前很多浏览器都使用这个引擎，例如IE，Maxthon(最新版已经不使用)等。
Gecko是C++开发的，Open Source的渲染引擎，包括了SpiderMonkey(Rhino)。主要的使用者有Firefox。
Webkit是苹果公司基于KHTML开发的。他包括Webcore和JavaScriptCore（SquirrelFish,V8）两个引擎。主要的使用者有Safari，Chrome。
Presto由Opera Software公司开始的，用于Opera的渲染引擎。Macromedia Dreamweaver （MX版本及以上）和Adobe Creative Suite 2也使用了Presto的内核。
主流浏览器所使用的内核分类
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上
Webkit内核：Safari,Chrome等
Engine
Creator
Software license
Leading application
Gecko
Netscape/Mozilla Foundation
MPL/GNU GPL/GNU LGPL tri-license
Mozilla Firefox
KHTML
KDE
GNU LGPL
Konqueror
Presto
Opera Software
Proprietary
Opera
Tasman
Microsoft
Proprietary
Microsoft Entourage
Trident
Microsoft
Proprietary
Internet Explorer
WebKit (Based on KHTML)
WebKit Foundation
GNU LGPL, BSD-style
Safari, Google Chrome
JS引擎

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。