深入了解浏览器加载渲染及内核原理.docx
- 文档编号:28235636
- 上传时间:2023-07-09
- 格式:DOCX
- 页数:12
- 大小:186.06KB
深入了解浏览器加载渲染及内核原理.docx
《深入了解浏览器加载渲染及内核原理.docx》由会员分享,可在线阅读,更多相关《深入了解浏览器加载渲染及内核原理.docx(12页珍藏版)》请在冰豆网上搜索。
深入了解浏览器加载渲染及内核原理
浏览器加载和渲染网页的过程
2009-07-2020:
26
关于网页加载和渲染的过程,在网络上的讨论并不多。
可能是因为这个过程比较复杂,而且浏览器执行的速度太快,目前还没有发现什么比较好的工具可以清楚的看到浏览器解析网页的每一个过程。
通过firedug和httpWatch可以看到浏览器的http请求,但是对于浏览器如何paint和flow处理html元素,我们仍然是不得而知。
“flow”这个词借鉴于reflow,表示浏览器第一次加载网页的过程。
在网络上搜索了一下,学习如下。
关于浏览器加载网页过程的有趣视频
可以参见:
(形象化的reflow)。
这个视频展现了网页加载的过程,看着比较有趣。
要是可以更加形象化,就更好了,可以帮助我们书写更好的提高网页加载速度的代码。
浏览器内核
不同的浏览器内核,对于网页的解析过程肯定也不尽相同。
一文对各种浏览器的页面渲染引擎进行了简介。
目前主要有基于
(1)Trident页面渲染引擎–>IE系列浏览器;
(2)Gecko页面渲染引擎–>MozillaFirefox;
(3)KHTML页面渲染引擎或WebKit框架–>Safafi和GoogleChrome;
(4)Presto页面渲染引擎–>Opera
详细的介绍可以参见原文。
浏览器解析网页的过程
浏览器加载和渲染原理分析一文中通过一定的方法,推断了浏览器加载解析网页的顺序大致如下:
1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的;
2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完);
3.在下载过程中,如果遇到某一标签是嵌入文件,并且文件是具有语义解释性的(例如:
JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载,并且在下载后进行解析,解析(JS、CSS中如有重定义,后定义函数将覆盖前定义函数)过程中,停止页面所有往下元素的下载;
4.样式表文件比较特殊,在其下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行样式渲染。
并以此方式一直渲染下去,直到整个页面渲染完成。
当然这是一个推断的过程。
借助GooglePageSpeed和YahooYSlow分析网页加载
通过这两个工具,测试网页加载过程,可以得到一些提高网页加载速度的建议。
使用GooglePageSpeed对Google首页进行分析,可以得到建议:
(1)压缩javascript和CSS;
(2)合并外部javascript和CSS;
(3)减少DNS寻址时间;这条与将图片分散到不同的域名存储这条折中处理;
(4)使用缓存;
(5)尽量避免CSS表达式;
(6)为图片增加宽度和高度属性;
(7)将css放在网页头部,合理放置js的位置。
同时,利用YSlow对google首页进行分析,我们也可以得到一些改进的建议。
这些建议差不太多,就不在详细说明。
合理使用这两个工具,优化我们的网页,提高网页加载速度,增强用户体验。
---------------------------
我自己的误解
过去一直以为,一个容器如果没有读到自己的结束标签,那么这个容器就不会在浏览器中显示出来。
今天测试了下,却发现浏览器在读到一个容器的开始标签的时候,就可以显示该容器了。
关于浏览器如何一个一个的paintHTML中的元素,如果flow它们,这个过程还需要进一步了解。
当然,也可以不管过程,只看加载的结果,通过pagespeed和Yslow来优化自己的网页。
个人在做布局的时候,还是会秉承一条原则:
尽量让一个父容器小一些!
参考文献
[1]形象化的reflow..2009-7-20
[2]各种浏览器的页面渲染引擎简介.2009-7-20
[3]浏览器加载和渲染原理分析.2009-7-20
各种浏览器的页面渲染引擎简介经常听到“XX浏览器搭载了最新版页面渲染引擎,速度大幅提升”之类的报道,以前只知道页面渲染引擎是浏览器的灵魂,IE、Firefox、Safari、Opera浏览器的渲染引擎各不相同。
今天从《秦爱网志》ZT一篇介绍各种浏览器页面渲染引擎的博文,很好很全面的那种
网页浏览器的页面渲染引擎负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。
所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要页面渲染引擎。
Trident页面渲染引擎
Trident(又称为MSHTML),是微软的视窗操作系统(Windows)搭载的网页浏览器—InternetExplorer的页面渲染引擎的名称,它的第一个版本诞生于1997年10月InternetExplorer第四版中,IE7做了的重大的变动,除了加入新的技术之外,并增加对网页标准的支持,目前是互联网上最流行的排版引擎。
使用Trident页面渲染引擎的浏览器有
·InternetExplorer(IE)
·傲游
·世界之窗浏览器
·Avant
·腾讯TT
·Netscape8
·NetCaptor
·Sleipnir
·GOSURF
·GreenBrowser
·KKman
Gecko页面渲染引擎
Gecko是套开放源代码的、以C++编写的页面渲染引擎。
Gecko是跨平台的,能在MicrosoftWindows、Linux和MacOSX等主要操作系统上运行。
它是最流行的页面渲染引擎之一,其流行程度仅次于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的衍生产品;WebKit是MacOSXv10.3及以上版本所包含的软件框架,WebKit是MacOSX的Safari网页浏览器的基础。
使用KHTML页面渲染引擎的浏览器有
·Safari
·Konqueror
·Epiphany
·GoogleChrome
·iCab
·OmniWeb
·Midori
·Shiira
Presto页面渲染引擎
Presto是一个由OperaSoftware开发的浏览器页面渲染引擎,应用于Opera7.0~9.60版,它取代了旧版Opera中所使用的Elektra页面渲染引擎,包括加入动态功能,例如网页或其部分可随着DOM及Script语法的事件而重新排版。
使用Presto页面渲染引擎的浏览器有
·Opera
·任天堂DS浏览器
Java软件平台
Java,是一种可以撰写跨平台应用软件的面向对象的程序设计语言,Java编程语言的风格十分接近C++语言。
微软推出的.NET平台以及模仿Java的C#语言正是与之竞争下的产物。
使用Java平台的浏览器有
·HotJava
·OperaMini
·UCWEB
Tasman页面渲染引擎
Tasman,是微软的InternetExplorerforMac浏览器所使用的页面渲染引擎,也是为尝试支援W3C所制定的网页标准而设计的。
在Mac版的MicrosoftOffice2004中,电子邮件客户端MicrosoftEntourage使用的就是Tasman页面渲染引擎。
使用Tasman页面渲染引擎的浏览器有
·InternetExplorerforMac
·MSNforMacOSX
文本界面
就是一些纯文字式的网页浏览器,在LINUX系统中比较常见。
使用文本界面的浏览器有
·Lynx
·Links
·w3m
手持设备或嵌入式系统
·InternetExplorerMobile
·Minimo
·OperaMobile
·PSP浏览器
其它页面渲染引擎
·Amaya
·Dillo
·Mosaic
主流浏览器内核的解析和对比
要搞清楚浏览器内核是什么,首先应该先搞清楚浏览器的构成。
简单来说浏览器可以分为两部分,shell+内核。
其中shell的种类相对比较多,内核则比较少。
Shell是指浏览器的外壳:
例如菜单,工具栏等。
主要是提供给用户界面操作,参数设置等等。
它是调用内核来实现各种功能的。
内核才是浏览器的核心。
内核是基于标记语言显示内容的程序或模块。
也有一些浏览器并不区分外壳和内核。
从Mozilla将Gecko独立出来后,才有了外壳和内核的明确划分。
目前主流的浏览器有IE6、IE8、Mozilla、FireFox、Opera、Safari、Chrome、Netscape等。
什么是浏览器内核
浏览器内核又可以分成两部分:
渲染引擎(layoutengineer或者RenderingEngine)和JS引擎。
它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。
浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。
所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
(参见维基百科)JS引擎则是解析Javascript语言,执行javascript语言来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。
有一个网页标准计划小组制作了一个ACID来测试引擎的兼容性和性能。
内核的种类很多,如加上没什么人使用的非商业的免费内核,可能会有10多种,但是常见的浏览器内核可以分这四种:
Trident、Gecko、Presto、Webkit。
Trident又称MSHTML,是微软开发的渲染引擎(包含了Javascript引擎JScript),他已经深入了Windows操作系统的骨髓,例如WindowsMediaPlay,WindowsExplorer,OutlookExpress等都使用了。
目前很多浏览器都使用这个引擎,例如IE,Maxthon(最新版已经不使用)等。
Gecko是C++开发的,OpenSource的渲染引擎,包括了SpiderMonkey(Rhino)。
主要的使用者有Firefox。
Webkit是苹果公司基于KHTML开发的。
他包括Webcore和JavaScriptCore(SquirrelFish,V8)两个引擎。
主要的使用者有Safari,Chrome。
Presto由OperaSoftware公司开始的,用于Opera的渲染引擎。
MacromediaDreamweaver(MX版本及以上)和AdobeCreativeSuite2也使用了Presto的内核。
主流浏览器所使用的内核分类
Trident内核:
IE,MaxThon,TT,TheWorld,360,搜狗浏览器等
Gecko内核:
Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
Presto内核:
Opera7及以上
Webkit内核:
Safari,Chrome等
Engine
Creator
Softwarelicense
Leadingapplication
Gecko
Netscape/MozillaFoundation
MPL/GNUGPL/GNULGPLtri-license
MozillaFirefox
KHTML
KDE
GNULGPL
Konqueror
Presto
OperaSoftware
Proprietary
Opera
Tasman
Microsoft
Proprietary
MicrosoftEntourage
Trident
Microsoft
Proprietary
InternetExplorer
WebKit(BasedonKHTML)
WebKitFoundation
GNULGPL,BSD-style
Safari,GoogleChrome
JS引擎
Trident
Gecko
WebKit
KHTML
Presto
NameofECMAScriptEngine
JScript
Spidermonkey
JavaScriptCore
KJS
linearb/futhark
ECMAScriptVersion
Edition3
Yes
0.6
Yes
Yes
7.0
JavaScript1.5extensions
No
0.6
Yes
Yes
7.0
JavaScript1.7extensions
No
1.8.1
No
No
No
JavaScript1.8extensions
No
1.9
No
No
No
JavaScript最初由网景公司的BrendanEich设计,是一种动态、弱类型、基于原型的语言,内置支持类。
以它为基础,制定了ECMAScript标准。
他的起源并不是如《Javascript高级程序设计》书中所述,是BrendanEich自主发明的。
(参考aimingoo的考证文章)JavaScript在浏览器的实现中还必须含有DOM和BOM。
Web浏览器一般使用公共API来创建主机对象来负责将DOM对象反射进JavaScript。
浏览器内核实现原理
渲染流程如下所示:
Mozilla架构设计:
界面和实现分离。
采用标记语言,JavaScript,C++来开发。
JSEngine就是指SpideMonkey,Layout就是指Gecko。
Mozilla的一个关键部分是XPCOM和NSPR。
Webkit的处理流程:
浏览器内核的优缺点
Trident:
这种浏览器内核是IE浏览器用的内核,因为在早期IE占有大量的市场份额,所以这种内核比较流行,以前有很多网页也是根据这个内核的标准来编写的,但是实际上这个内核对真正的网页标准支持不是很好,甚至在2005年,与网页标准制定组织(W3C理事会)所制定的标准发生了脱节,同时Trident内核本身的BUG比较多,对一些符合W3C标准的网页代码支持不是很好,这在早期的IE版本中比较明显,比如IE5.5以前(包括IE5.5),其实IE6对W3C标准的支持也不是很好,而我们现在很多人都在使用IE6,事实上它也属于一个比较早的版本。
但是由于IE的高市场占有率,微软也很长时间没有更新Trident内核,这导致了二个结果
1,Trident内核和W3C标准脱节。
2,Trident内核的大量Bug等安全问题没有得到解决,加上一些专家学者公开自己认为IE浏览器不安全的观点,使很多用户开始转向其他浏览器,FF,Opera就是这时期兴起的。
Gecko:
这是Firefox和Flock所采用内核,这个内核的优点就是功能强大、丰富,可以支持很多复杂网页效果和浏览器扩展接口,但是代价是也显而易见就是要消耗很多的资源,比如内存。
Presto:
Opera采用的是Presto内核,Presto内核被称为公认的浏览网页速度最快的内核,这得益于它在开发时的天生优势,在处理JS脚本等脚本语言时,会比其他的内核快3倍左右,缺点就是为了达到很快的速度而丢掉了一部分网页兼容性。
Webkit:
Webkit是Safari采用的内核,不过Safari是苹果系统下的浏览器(虽然也有windows版,但是比较少),所以只简单介绍一下这个内核的优点和缺点,优点就是网页浏览速度较快,虽然不及Presto但是也胜于Gecko和Trident,缺点是对于网页代码的容错性不高,也就是说对网页代码的兼容性较低,会使一些编写不标准的网页无法正确显示。
总结:
就浏览器来说,互联网经历了十年的高速发展期,近几年市场上也推出了很多新的浏览器,但是他们并非是采用自主开发的内核,所以浏览器内核本身实际没有实质突破。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 深入 了解 浏览器 加载 渲染 内核 原理