浏览器的渲染原理与过程

**1.浏览器引擎介绍**<br /> 当前主流浏览器的引擎及浏览器：<br /> 常用的浏览器有**IE**(最新版为Edge)、火狐（**Firefox**）、谷歌（**Chrome**）、**Safari**和**Opera**等。我们平时称为五大浏览器。<br /> <br /> Trident：IE4及以上、外核浏览器Maxthon、腾讯TT、世界之窗TheWorld<br /> Presto：Opera7及以上<br /> Gecko：Firefox2及以上、K-Meleon<br /> KHTML：Safari、Konqueror<br /> <br /> 一、Trident<br /> <br /> 图形接口的排版引擎：Trident – Windows版的Internet Explorer<br /> <br /> Trident （又称为MSHTML），是微软的窗口操作系统（Windows）搭载的网页浏览器—Internet Explorer的排版引擎的名称，它的第一个版本随着1997年10月Internet Explorer第四版释出，之后不断的加入新的技术并随着新版本的Internet Explorer释出。在最新的Internet Explorer第七版中，微软将对Trident排版引擎做了重大的变动，除了加入新的技术之外，并增加对网页标准的支持。尽管这些变动已经在相当大的程度上落后了其它的排版引擎，如Gecko、WebCore、KHTML及Presto。<br /> <br /> Trident引擎被设计成一个软件组件（模块），使得其它软件开发人员很容易的将网页浏览的功能加到他们自行开发的应用程序里。微软提出了一个称为组件对象模型（COM）的软件接口架构。供其它支持的组件对象模型开发环境的应用程序（如：C++及.NET）存取及编辑网页。例如，由C++所撰写的程序可以加入浏览器控件里，并透过Trident引擎存取当前显示在浏览器上的网页内容及网页的各种元素的值，从浏览器控件触发的事件亦可被程序撷取并进行处理。Trident引擎所提供的所有函式库可以透过与 mshtml.dll这个档案的连结而达成撰写程序时所需要的功能。<br /> 除此之外，微软还有另一个网页浏览器排版引擎，称为Tasman，它是使用在「Internet Explorer for Mac」的排版引擎。相较于Trident，Tasman引擎对网页标准有较佳的支持。与普遍的看法相反的是，微软已经停止了Mac计算机版本的 Internet Explorer的开发，但Tasman的开发仍旧持续, 新版本的Tasman引擎仍被应用在一些微软产品上，如：麦金塔计算机版本的Microsoft Office。<br /> <br /> 二、Tasman<br /> <br /> 图形接口的排版引擎：Tasman – Macintosh版的Internet Explorer<br /> <br /> Tasman，是微软的Internet Explorer for Mac浏览器所使用的排版引擎，也是为尝试支持W3C所制定的网页标准而设计的。在Tasman推出时，一度是最切合HTML及CSS等标准的排版引擎。现时微软方面也停止为Internet Explorer for Mac提供支持，但新版本的Tasman引擎仍被应用在一些微软产品上。<br /> <br /> 三、Presto<br /> <br /> Presto是一个由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。<br /> <br /> Presto取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。Presto在推出后不断有更新版本推出，使不少错误得以修正，以及阅读Javascript效能得以最佳化，并成为速度最快的引擎。<br /> <br /> 四、Gecko<br /> <br /> 于1997年，网景收购了DigitalStyle。当时，网景浏览器在各方面的表现已经比不上她的主要竞争对手Internet Explorer。这包括程式的执行速度、对W3C标准的支援度等等。网景开始研发下一代的排版引擎，并期望把新的排版引擎应用于下一版本的网景浏览器上。<br /> <br /> 1998年初，Mozilla计划开始执行。这个新的排版引擎名为Raptor，以开发源码的方式发放于互联网上。后来，因为商标问题，Raptor改外为NGLayout（即next generation layout之意）。而最后NGLayout就被网景重新命名为Gecko。但由于Gecko为网景的商标，所以有一段时期Mozilla组织（属于网景的非正式组织，亦为Mozilla基金会的前身）以NGLayout来称呼这个新的排版引擎，而在该时，Gecko这字亦指XPFE（cross- platform front-end），一个以XML为基础的使用者接口。不过，现时Gecko这字只用于排版引擎。<br /> <br /> 1998年10月，网景公布下一版的浏览器将会使用这个排版引擎，而该浏览器亦需要被大幅度重写。对于致力推动网上标准的人，这是一个令人振奋的消息。然而，对于网景开发者而言，这是一个长达六个月的大工程，而他们在网景5.0上（包括Mariner排版引擎）所花的心血亦被白白浪费。结果，网景6.0在2000年11月才被正式发布。<br /> <br /> 随着Gecko的开发，越来越多应用程式开始利用她。AOL作为网景的母公司，终于在CompuServe 7.0和AOL for Mac OS X上使用Gecko。可惜，Windows版的AOL浏览器始终没有利用过Gecko。<br /> <br /> 2003年7月15日时代华纳解散了网景公司，大部分开发者被解雇。而Mozilla基金会亦在当天成立，继续推动着Gecko的发展。时至今天，Gecko仍继续由Mozilla的雇员和义工所维护和发展。<br /> <br /> Gecko将会继续支持更多的网络标准，例如XForms和SVG。Mozilla基金会作为WHATWG的一份子，Gecko和其他排版引擎将会率先支援WHATWG所定下的规格，例如可供绘画的canvas。<br /> <br /> Gecko的绘画元件在1.9版将会有重大的改变。她将会使用跨平台的Cairo元件来代替作业平台的绘画接口。这个改变将会令Gecko拥有更佳的绘图能力。而加上Glitz的话，更可利用3D硬件加速。而所有多媒体内容（如HTML/CSS、canvas、SVG等）将可使用同一管道作出渲染， SVG的特效亦可以应用于HTML上。因为使用Cairo的关系，图像亦可以被输出作PNG和PDF，“另存本页为PDF”等作业将变得有可能。<br /> <br /> 1.兼容的标准<br /> Gecko引擎支持下列标准：<br /> * HTML 4.01<br /> * XML 1.0<br /> * XHTML 1.1<br /> * MathML<br /> * CSS Level 1（支援部份CSS 2和3）<br /> * DOM Level 1和2（支援部份DOM 3）<br /> * RDF<br /> * JavaScript 1.7<br /> * E4X<br /> * SVG（支援部份SVG 1.1）<br /> <br /> 2 .使用KHTML的产品<br /> 网页浏览器<br /> * Mozilla Application Suite *<br /> * Mozilla Firefox *<br /> * AOL for Mac OS X<br /> * Aphrodite *<br /> * Beonex Communicator *<br /> * Camino<br /> * CompuServe 7.0<br /> * DocZilla<br /> * Epiphany<br /> * Galeon<br /> * IBM Web Browser<br /> * K-Meleon<br /> * Kazehakase<br /> * ManyOne *<br /> * Maxthon(本身并不支持,需要使用插件)<br /> * Minimo<br /> * Netscape 6.0和以上 *<br /> * Salamander<br /> * SeaMonkey *<br /> * Skipstone<br /> * Flock *<br /> 其他应用程式<br /> * ActiveState Komodo *<br /> * Liferea<br /> * Mozilla ActiveX Control<br /> * Mozilla Calendar *<br /> * Mozilla Thunderbird *<br /> * Nvu *<br /> * GRE for Gecko-Sharp *<br /> MediaCoder<br /> * 使用Gecko来渲染基于XUL的用户界面。<br /> <br /> 五、KHTML<br /> <br /> KHTML，是HTML网页排版引擎之一，由KDE所开发。KDE系统自KDE2版起，在档案及网页浏览器使用了KHTML引擎。该引擎以C++编程语言所写，并以LGPL授权，支援大多数网页浏览标准。由于微软的Internet Explorer的占有率相当高，不少以FrontPage制作的网页均包含只有IE才能读取的非标准语法，为了使KHTML引擎可呈现的网页达到最多，部分IE专属的语法也一并支援。<br /> <br /> KHTML拥有速度快捷的优点，但对错误语法的容忍度则比Mozilla产品所使用的Gecko引擎小。苹果电脑于2002年采纳了KHTML，作为开发Safari浏览器之用，并发布所修改的最新及过去版本源代码。后来发表了开放源代码的WebCore及WebKit引擎，它们均是KHTML的衍生产品，在开发网站列出引擎改变内容，并会传回至KDE计划。由于两个衍生产品各走不同路线，使两者源代码偏离，在与KDE交换更新会出现困难。其中一个原因，是苹果在对外公开源代码之前，以一年时间编修他们的KHTML。另外，苹果传送更新至KDE计划的方式，多是一口气把大量改动一起传送，KDE在整理资料也出现一定的困难，及后苹果表示会以CVS格式来传送。再者，苹果所作出的改动包括Mac OS X系统独有的事物，如Objective-C、KWQ等，在Linux及KHTML是没有的。但KDE方面仍透过这些改动，为KHTML加入新功能及加快其排版速度。<br /> <br /> 1.兼容的标准<br /> KHTML引擎支持下列标准：<br /> * HTML 4.01<br /> * CSS 1<br /> * CSS 2.1 （paged media除外）<br /> * CSS 3 选择符（selector）及部分其他功能<br /> * PNG, MNG, JPEG, GIF 图形格式<br /> * DOM 1, 2 及部分的 DOM 3<br /> * ECMA-262/JavaScript 1.5<br /> * 部分 SVG<br /> <br /> 2 .使用KHTML的产品<br /> * KDE Konqueror - KDE的网页浏览器及档案管理员<br /> * Safari - 苹果电脑的网页浏览器<br /> * Embedded Konqueror - PDA上的网页浏览器<br /> * SkyKruzer - SkyOS上的网页浏览器<br /> * ABrowse - Syllable操作系统上的网页浏览器<br /> * Nokia Series 60 移动电话的浏览器<br /> <br /> 六、WebCore<br /> <br /> WebCore是苹果公司开发的排版引擎，它是在另外一个排版引擎“KHTML”的基础上而来的。苹果电脑于2002年采纳了KHTML，作为开发Safari浏览器之用，并发布所修改的最新及过去版本源代码。后来发表了开放源代码的WebCore及WebKit引擎，它们均是KHTML的衍生产品。<br /> <br /> 使用WebCore的主要有Safari，此外还有OmniWeb、Shiira、Swift等。<br /> <br /> 七、WebKit<br /> <br /> WebKit 是一个开源浏览器网页排版引擎，与之相应的引擎有Gecko（Mozilla，Firefox 等使用的排版引擎）和Trident（也称为MSHTML，IE 使用的排版引擎）。同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称，主要用于Safari，Dashboard，Mail 和其他一些Mac OS X 程序。WebKit 所包含的 WebCore 排版引擎和 JSCore 引擎来自于 KDE 的 KHTML 和 KJS，当年苹果比较了 Gecko 和 KHTML 后，仍然选择了后者，就因为它拥有清晰的源码结构、极快的渲染速度。<br /> <br /> 目前使用WebKit 引擎的浏览器主要有：Safari，Midori，Epiphany 等。<br /> <br /> 八.比较<br /> 1.Internet Explorer浏览器（IE）<br /> IE内核：Trident<br /> IE渲染引擎：Trident<br /> IEjs引擎：Chakra<br /> <br /> 2.Opera浏览器（欧朋）<br /> Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器，是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行<br /> 特点：Opera浏览器因为它的快速、小巧和比其他浏览器更佳的<br /> 标准兼容性获得了国际上的最终用户和业界媒体的承认，并在网上受到很多人的推崇<br /> Opera内核： Presto<br /> 直到2016年奇虎360和昆仑万维收购了Oprea浏览器，从此也丢弃了强大的Presto内核，改用当时Google开源的webkit内核。后来Opera浏览器跟随Google将浏览器内核改为Blink内核。自此Presto内核也淡出了互联网市场。<br /> <br /> 3.Safari浏览器（苹果）<br /> Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与iPad和iPod touch的指定浏览器<br /> Safari内核：Webkit<br /> Safari渲染引擎：WebCore<br /> Safari引擎：JavaScriptCore<br /> <br /> 4.Mozilla Firefox浏览器（火狐）<br /> Firefox浏览器使Mozilla公司旗下浏览器<br /> Firefox内核：Gecko<br /> Firefox渲染引擎：Gecko<br /> Firefox引擎：Monkey<br /> <br /> 5.Google Chrome浏览器（谷歌）<br /> Google Chrome是一款由Google公司开发的网页浏览器，该浏览器基于其他开源软件撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面<br /> Chrome内核：Blink<br /> Chrome渲染引擎：webcore<br /> Chrome引擎：V8<br /> <br /> **2.渲染原理介绍**<br /> 问题? 浏览器地址栏输入网址,浏览器做了什么?为什么输入[www.baidu.com][1]会打开百度首页,而不是打卡其他网站?<br /> <br /> 一.URL解释<br /> []( https://yuezhou.oss-cn-beijing.aliyuncs.com/blogimg/url.jpg "url组成")<br /> <br /> 二. http请求(Request)----> http响应(Response)---->浏览器渲染<br /> <br /> 浏览器渲染过程<br /> [](https://yuezhou.oss-cn-beijing.aliyuncs.com/blogimg/render.jpg "渲染过程")<br /> <br /> 详解:<br /> [](https://yuezhou.oss-cn-beijing.aliyuncs.com/blogimg/layout.png "实例解释")<br /> <br /> 三. 重绘(Repaint)与回流(Reflow)<br /> 重绘: 元素样式的改变(但大小,位置不变)<br /> 回流: 元素大小或位置发生了改变,导致布局改变,需要重新渲染<br /> 回流一定会触发重绘,重绘不一定会触发回流<br /> <br /> 问题: 是什么影响了页面的加载速度?<br /> **3.性能优化**<br /> 一.回流和重绘的优化<br /> 1.减少dom操作,基于Vue,React数据响应式开发<br /> mvvm,mvc,victual dom, diff dom<br /> 2.读写分离(基于现代浏览器的渲染队列机制)<br /> <br /> let box = document.getElementById('box')<br /> box.style.width = '200px'<br /> box.style.width = '200px'<br /> box.style.margin = '20px'<br /> console.log(box.clientWidth)<br /> <br /> let box = document.getElementById('box')<br /> box.style.width = '200px'<br /> console.log(box.clientWidth)<br /> box.style.width = '200px'<br /> box.style.margin = '20px'<br /> <br /> 3.样式集中改变(类名形式,cssText属性)<br /> 经典面试题: n个li,是循环100次append到ul里好,是一次性append到ul里好,为什么?<br /> 4.脱离文档流<br /> 二.减少http请求次数和大小<br /> 三.资源合并压缩<br /> 四.图片懒加载<br /> 五.音视频使用流文件<br /> 六.前端缓存<br /> <br /> <br /> <br /> [[PDF]][3]<br /> <br /> <br /> <br /> <br /> [1]: http://www.baidu.com "www.baidu.com"<br /> [2]: https://yuezhou.oss-cn-beijing.aliyuncs.com/file/C30%E6%95%99%E8%82%B2%E4%BA%91--%E6%9A%91%E6%9C%9F%E5%9F%B9%E8%AE%AD--%E5%89%8D%E7%AB%AF--%E9%AB%98%E5%BB%BA%E5%B9%B3.pptx "PDF"<br /> [3]: https://yuezhou.oss-cn-beijing.aliyuncs.com/file/C30%E6%95%99%E8%82%B2%E4%BA%91--%E6%9A%91%E6%9C%9F%E5%9F%B9%E8%AE%AD--%E5%89%8D%E7%AB%AF--%E9%AB%98%E5%BB%BA%E5%B9%B3.pptx "PDF"