浏览器内核、缓存的介绍第一部分

自己之前写过一些类似文章，这篇算是一个总结吧

一.什么是浏览器内核

   浏览器内核， 英文叫做：Rendering Engine，中文翻译过来名称很多，排版引擎、解释引擎、渲染引擎，现在流行称为浏览器内核。 
       Rendering Engine，顾名思义，就是用来渲染网页内容的，将网页的内容和排版代码转换为可视的页面。因为是排版，所以肯定会排版错位等问题。为什么会排版错位呢？有的是由于网站本身编写不规范（包括HTML和CSS样式写的不规范），有的是由于浏览器本身的渲染不标准。
浏览器内核又可以分成两部分：渲染引擎和JS引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至 显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。JS引擎则是解析Javascript语言，执行javascript语言来实现网页的动态效果。最开始渲染引 擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。内核的种类很多，如加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、 Presto、Webkit。

二.浏览器内核种类

现在有几个主流的排版引擎，因为这些排版引擎都有其代表的浏览器，所以常常会把排版引擎的名称和浏览器的名称混用，比如常的说IE内核（Trident）、Chrome内核（Chromium）。其实这样子是不太合理的，因为一个完整的浏览器不会只有一个排版引擎，它还有自己的界面框架和其它的功能支撑，而排版引擎本身也不可能实现浏览器的所有功能。下面罗列一下几款主流的排版引擎和浏览器。 
    （1）Trident（Windows） 
     （2）Gecko（跨平台,火狐内核）
     （3）KHTML（Linux） 
     （4）WebKit（跨平台，Apple Safari）
     （5）Chromium（跨平台， 维基百科里面并没有将Chromium从WebKit分出 来） 
     （6）Presto（跨平台， Opera的内核）

1.Trident（Windows）

IE浏览器所使用的内核，也是很多浏览器所使用的内核，通常被称为IE内核。基于Trident内核的浏览器非常多，这是因为Trident内核提供了丰富的调用接口。老的Trident内核（比如常说的IE6内核，windowsXP默认浏览器）一直是不遵循W3C标准的，但是由于它的市场份额最大，所以后果就是大量的网站只支持老的Trident内核，依据W3C标准写的网页在老的Trident内核下面又出现偏差。目前可供调用的最新版的Trident内核是IE9所用的内核，相较之前的版本对W3C标准的支持增强了很多。
Trident内核的浏览器： 
IE6(XP 系统自带)、IE7、IE8（Trident 4.0，WIN7系统自带）、IE9（Trident 5.0）、IE10（Trident 6.0）； 世界之窗1、世界之窗2、世界之窗3；
360安全浏览器1、360安全浏览器2、360安全浏览器3、360安全浏览器4、360安全浏览器5； 
傲游1、傲游2；搜狗浏览器1；腾讯TT；阿云浏览器（早期版本）、百度浏览器（早期版本）、瑞星安全浏览器、Slim Browser； 
GreenBrowser、爱帆浏览器（12 之前版本）、115浏览器、155浏览器； 
闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器；

2.Gecko（跨平台,火狐内核） 

Netscape6启用的内核，是开源的浏览器内核，目前最主流的Gecko内核浏览器是Mozilla Firefox，所以也常常称之为火狐内核。因为Firefox的出现，IE的霸主地位逐步被削弱。非Trident内核的兴起正在改变着整个互联网，最直接的就是推动了编码的标准化，使得微软在竞争压力下不得不改进IE。不过比较可惜的是，虽然是开源的，基于Gecko的浏览器并不多见。
常见的Gecko内核的浏览器 ：Mozilla Firefox、Mozilla SeaMonkey 
Epiphany（早期版本）、Flock（早期版本）、K-Meleon  

3.WebKit（跨平台，Apple Safari） 

     由KHTML发展而来，也是苹果给开源世界的一大贡献。是目前最火热的浏览器内核。因为是脱胎于KHTML，所以也是具有高速的特点，同样遵循W3C标准。
      常见的WebKit内核的浏览器：Apple Safari、Symbian系统浏览器  

4.Chromium

 维基百科里面并没有将Chromium从WebKit分出来。但Chromium把WebKit的代码梳理得可读性提高很多，所以以前可能需要一天进行编译的代码，现在只要两个小时就能搞定。
    常见的Chromium内核的浏览器：Chromium、Google Chrome、SRWare Iron、Comodo Dragon 。

 5. Presto（跨平台， Opera的内核）

   Opera的内核，准确地说，是Opera 7.0及以后版本的内核，Opera 3.5-6.1版本使用的内核叫做Elektra。不用说，Presto对W3C标准的支持也是很良好的。之前在OperaChina论坛看见有人说过，Presto优先解析文字，保证可阅读性，媒体资源的渲染放后。 
    常见的Presto内核的浏览器：Opera

 

三、浏览器：四大浏览器内核优缺点

　　1.Trident:因为在早期IE占有大量的市场份额，所以以前有很多网页是根据这个Trident的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好，同时存在许多安全Bug。

 

　　2.Gecko:优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，缺点是消耗很多的资源，比如内存。

 

　　3.Webkit:优点就是Webkit拥有清晰的源码结构、极快的渲染速度，缺点是对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。

 

　　4.Presto：Presto内核被称为公认的浏览网页速度最快的内核，同时也是处理JS脚本最兼容的内核，能在Windows、Mac及Linux操作系统下完美运行。

 

 

四、JavaScript引擎

       JavaScript引擎。顾名思义，JavaScript引擎就是用来渲染JavaScript的。为什么要单独拿出来说呢？因为它涉及到跑分。经常看见很多文章在报道说哪个浏览器更快，其实大部分说的就是JavaScript的渲染速度，而不是页面的载入速度。在网速许可的情况下，其实各个浏览器的页面载入速度差别不大（Opera逊色一些）。那是不是说对比JavaScript的渲染速度其实没有意义？也不是这么说，因为现在JavaScript在页面中的比重会越来越大，越来越多的动态页面开始大量借助JavaScript，比如现在主流的邮箱、网页游戏，所以JavaScript的渲染速度也是一个很重要的指标。JavaScript的渲染速度越快，动态页面的展示也越快。Opera在JavaScript引擎的跑分上面一直都是很牛逼的，一般来说最新测试版之间PK，Opera基本都会夺冠。

五、JavaScript引擎分类

1、Chakra 

    查克拉，IE9启用的新的JavaScript引擎。   

2、SpiderMonkey/TraceMonkey/JaegerMonkey 

SpiderMonkey应用在Mozilla Firefox 1.0-3.0，TraceMonkey应用在Mozilla Firefox 3.5-3.6版本，JaegerMonkey应用在Mozilla Firefox 4.0及后续的版本。   

3、V8 

应用于Chrome、傲游3。   

4、Nitro 

应用于Safari 4及后续的版本。   

5、Linear A/Linear B/Futhark/Carakan 

Linear A应用于Opera 4.0-6.1版本，Linear B应用于Opera 7.0～9.2版本，Futhark应用于Opera 9.5-10.2版本，Carakan应用于Opera 10.5及后续的版本。   

6、KJS 

KHTML对应的JavaScript引擎。

六、浏览器加载和渲染html的顺序

　　

1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。

2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）

3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。

4、并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。阻塞加载

5、样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。

6、JS、CSS中如有重定义，后定义函数将覆盖前定义函数

七、JS的加载

　　

1 不能并行下载和解析（阻塞下载）

2 当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现.

八、如何加快HTML页面加载速度

　　

1.页面减肥

页面的肥瘦是影响加载速度最重要的因素

删除不必要的空格、注释

将inline的script和css移到外部文件

可以使用HTML Tidy来给HTML减肥，还可以使用一些压缩工具来给JavaScript减肥

2.减少文件数量

减少页面上引用的文件数量可以减少HTTP连接数

许多JavaScript、CSS文件可以合并最好合并，人家财帮子都把自己的JavaScript. functions和Prototype.js合并到一个base.js文件里去了

3.减少域名查询

DNS查询和解析域名也是消耗时间的，所以要减少对外部JavaScript、CSS、图片等资源的引用，不同域名的使用越少越好

4.缓存重用数据

使用缓存吧

5.优化页面元素加载顺序

首先加载页面最初显示的内容和与之相关的JavaScript和CSS

然后加载DHTML相关的东西

像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载

6.减少inline JavaScript的数量

浏览器parser会假设inline JavaScript会改变页面结构，所以使用inline JavaScript开销较大

不要使用document.write()这种输出内容的方法，使用现代W3C DOM方法来为现代浏览器处理页面内容

7.使用现代CSS和合法的标签

使用现代CSS来减少标签和图像，例如使用现代CSS+文字完全可以替代一些只有文字的图片

使用合法的标签避免浏览器解析HTML时做“error correction”等操作，还可以被HTML Tidy来给HTML减肥

8.Chunk your content

不要使用嵌套tables

<table>

  <table>

    <table>

      ..

    <table>

  <table>

<table>

而使用非嵌套tables或者divs

<table>...</table>

<table>...</table>

<table>...</table>

将基于大块嵌套的tables的layout分解成小tables，这样显示时不用加载整个页面(或大table)的内容

9.指定图像和tables的大小

如果浏览器可以立即决定图像或tables的大小，那么它就可以马上显示页面而不要重新做一些布局安排的工作

这不仅加快了页面的显示，也预防了页面完成加载后布局的一些不当的改变

image使用height和width

table使用table-layout: fixed并使用col和colgroup标签指定columns的width

10.根据用户浏览器明智的选择策略

IE、Firefox、Safari等等等等

九、HTML页面加载和解析流程

1.用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件； 

2.浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件； 

3.浏览器又发出CSS文件的请求，服务器返回这个CSS文件； 

4.浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了； 

5.浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码； 

6.服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码； 

7.浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它； 

8.Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞ （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码； 

9.终于等到了＜/html＞的到来，浏览器泪流满面…… 

10.等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径； 

11.浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。