《深入了解浏览器加载渲染及内核原理》由会员分享，可在线阅读，更多相关《深入了解浏览器加载渲染及内核原理（9页珍藏版）》请在金锄头文库上搜索。
1、- -浏览器加载和渲染网页的过程2021-07-20 20:26关于网页加载和渲染的过程，在网络上的讨论并不多。可能是因为这个过程比较复杂，而且浏览器执行的速度太快，目前还没有发现什么比较好的工具可以清楚的看到浏览器解析网页的每一个过程。通过firedug和 Watch可以看到浏览器的请求，但是对于浏览器如何paint和flow处理html元素，我们仍然是不得而知。“flow这个词借鉴于reflow，表示浏览器第一次加载网页的过程。在网络上搜索了一下，学习如下。关于浏览器加载网页过程的有趣视频可以参见：.aoao.org./blog/2021/05/reflow/形象化的reflow。这个视频
2、展现了网页加载的过程，看着比较有趣。要是可以更加形象化，就更好了，可以帮助我们书写更好的提高网页加载速度的代码。浏览器内核不同的浏览器内核，对于网页的解析过程肯定也不尽一样。.mac52ipod./post/Trident-Gecko-WebKit-Presto.php一文对各种浏览器的页面渲染引擎进展了简介。目前主要有基于1Trident页面渲染引擎 IE系列浏览器；2Gecko页面渲染引擎 Mozilla Firefox；3KHTML页面渲染引擎或WebKit框架 Safafi和Google Chrome；4Presto页面渲染引擎 Opera详细的介绍可以参见原文。浏览器解析网页的过程h
3、i.baidu./seosky/blog/item/78d3394c130f86ffd72afc56.html浏览器加载和渲染原理分析一文中通过一定的方法，推断了浏览器加载解析网页的顺序大致如下：1. IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进展的；2. 在渲染到页面的某一局部时，其上面的所有局部都已经下载完成并不是说所有相关联的元素都已经下载完；3. 在下载过程中，如果遇到某一标签是嵌入文件，并且文件是具有语义解释性的例如：JS脚本，CSS样式，那么此时IE的下载过程会启用单独连接进展下载，并且在下载后进展解析，解析JS、CSS中如有重定义，后定义函数将覆盖前定义函
4、数过程中，停顿页面所有往下元素的下载；4. 样式表文件比较特殊，在其下载完成后，将和以前下载的所有样式表一起进展解析，解析完成后，将对此前所有元素含以前已经渲染的重新进展样式渲染。并以此方式一直渲染下去，直到整个页面渲染完成。当然这是一个推断的过程。借助Google PageSpeed和 YSlow分析网页加载通过这两个工具，测试网页加载过程，可以得到一些提高网页加载速度的建议。使用Google PageSpeed对Google首页进展分析，可以得到建议：1压缩javascript和CSS；2合并外部javascript和CSS；3减少DNS寻址时间；这条与将图片分散到不同的域名存储这条折中处
5、理；4使用缓存；5尽量防止CSS表达式；6为图片增加宽度和高度属性；7将css放在网页头部，合理放置js的位置。同时，利用YSlow对google首页进展分析，我们也可以得到一些改进的建议。这些建议差不太多，就不在详细说明。合理使用这两个工具，优化我们的网页，提高网页加载速度，增强用户体验。-我自己的误解过去一直以为，一个容器如果没有读到自己的完毕标签，那么这个容器就不会在浏览器中显示出来。今天测试了下，却发现浏览器在读到一个容器的开场标签的时候，就可以显示该容器了。关于浏览器如何一个一个的paint HTML中的元素，如果flow它们，这个过程还需要进一步了解。当然，也可以不管过程，只看加载
6、的结果，通过pagespeed和Yslow来优化自己的网页。个人在做布局的时候，还是会秉承一条原那么：尽量让一个父容器小一些！参考文献1 形象化的reflow. .aoao.org./blog/2021/05/reflow/ . 2021-7-202 各种浏览器的页面渲染引擎简介. .mac52ipod./post/Trident-Gecko-WebKit-Presto.php. 2021-7-203 浏览器加载和渲染原理分析. hi.baidu./seosky/blog/item/78d3394c130f86ffd72afc56.html. 2021-7-20各种浏览器的页面渲染引擎简介经常
7、听到“XX浏览器搭载了最新版页面渲染引擎，速度大幅提升之类的报道，以前只知道页面渲染引擎是浏览器的灵魂，IE、Firefox、Safari、Opera浏览器的渲染引擎各不一样。今天从秦爱网志ZT一篇介绍各种浏览器页面渲染引擎的博文，很好很全面的那种网页浏览器的页面渲染引擎负责取得网页的内容HTML、XML、图像等等、整理讯息例如参加CSS等，以及计算网页的显示方式，然后会输出至显示器或打印机。所有网页浏览器、电子客户端以及其它需要编辑、显示网络内容的应用程序都需要页面渲染引擎。Trident页面渲染引擎Trident又称为MSHTML，是微软的视窗操作系统Windows搭载的网页浏览器Inte
8、rnet Explorer的页面渲染引擎的名称，它的第一个版本诞生于1997年10月Internet Explorer第四版中，IE7做了的重大的变动，除了参加新的技术之外，并增加对网页标准的支持，目前是互联网上最流行的排版引擎。使用Trident页面渲染引擎的浏览器有 Internet ExplorerIE 傲游 世界之窗浏览器 Avant 腾讯TT Netscape 8 NetCaptor Sleipnir GOSURF GreenBrowser KKmanGecko页面渲染引擎Gecko是套开放源代码的、以C+编写的页面渲染引擎。Gecko是跨平台的，能在Microsoft Window
9、s、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，作为开发S
10、afari浏览器之用。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.09.60版，它取代了旧版Opera中所使用的Elektra页面渲染引擎，包括参加动态功能，例如
11、网页或其局部可随着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 O
12、ffice 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主流浏览器内核的解析和比照要搞清楚浏览器内核是什么，首先应该先搞清楚浏览
13、器的构成。简单来说浏览器可以分为 两局部，shell+内核。其中shell的种类相比照拟多，内核那么比较少。Shell是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操 作，参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。也有一些浏览器并不区分外壳和内核。 从Mozilla将Gecko独立出来后，才有了外壳和内核的明确划分。目前主流的浏览器有IE6、IE8、Mozilla、FireFox、Opera、Safari、Chrome、Netscape等。什么是浏览器内核浏览器内核又可以分成两局部：渲染引擎(layout engine
14、er或者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等都使用了。目前很多浏览器都使用这个
