一 前言
在介绍浏览器内核之前，我们先了解以下浏览器的基础知识。浏览器基础是前端知识体系的一个小分支，也是作为一个前端开发人员必须掌握的知识储备，贯穿整个网络体系，项目优化等都是围绕着浏览器进行。除此之外，还需要了解页面加载的过程，以及什么是DOM，什么是DOM树，帮助更好的理解后面的浏览器渲染过程和性能优化。
二 浏览器的结构组成
浏览器由七大模块组成
- User Interface（用户界面）
- Browser engine（浏览器引擎）
- Rendering engine（渲染引擎）
- Networking（网络）
- JavaScript Interpreter（js解释器）
- UI Backend（UI 后端）
- Date Persistence（数据持久化存储）
用processon画了一个图，更加直观的感受浏览器的组成
- 用户界面 －包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了页面显示窗口之外的其他部分
- 浏览器引擎 －可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心。
- 渲染引擎 －解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面，也有人称之为排版引擎，我们常说的浏览器内核主要指的就是渲染引擎。负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
- 网络 －用来完成网络调用或资源下载的模块。比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
- UI 后端 －用来绘制基本的浏览器窗口内控件，如输入框、按钮、单选按钮等，根据浏览器不同绘制的视觉效果也不同，但功能都是一样的。
- JS解释器 －用来解释执行JS脚本的模块，如 V8 引擎、JavaScriptCore
- 数据存储 －浏览器在硬盘中保存 cookie、localStorage等各种数据，可通过浏览器引擎提供的API进行调用
attention：走前端方向的程序员需要重点掌握理解渲染引擎的工作原理，灵活应用数据存储技术。在做一些项目的性能优化的时候理解浏览器的渲染原理极其重要。其他部分是由浏览器自行管理，前端开发人员可以控制的部分较少。在掌握浏览器的渲染原理之前，还需要熟悉浏览器内核。那什么是浏览器内核呢？
三 浏览器内核
渲染引擎Rendering Engine是各大浏览器厂商根据W3C标准自行研发的，也称为浏览器内核。
2.1 浏览器内核分类
1 Trident（IE内核）
微软开发的一种排版引擎。1997在IE4中首次被采用。俗称IE内核，MSHTML引擎。
Trident内核常见的浏览器
- IE6,IE7,IE8(Trident4.0)
- E9(Trident5.0)
- IE10(Trident6.0)(1.0-5.0为Trident，6.0Trident+Webkit，7.0为Trident+Blink)
- 360极速浏览器。
扩展知识：
微软曾经有一段时间借助windows处于垄断地位，导致Trident内核大量的Bug等安全性问题没有及时解决。Trident曾经脱离W3C标准（2005）。浏览器大部分是双核或者多核，其中一个内核是Trident，另一个是其他的内核。国内的厂商把其他内核叫做"高速浏览模式"，而Trident则是"兼容浏览模式"（IE兼容模块），用户可以来回切换。
2 Gecko（Firefox内核）
俗称firefox内核，从Netspace6开始采用。
Gecko内核常见浏览器
Firefox（Netspace6)
Mozilla Firefox
Mozilla SeaMonkey
Waterfox（Firefox的64的开源版本）
扩展知识
代码完全公开，开发程度很高，开源内核受到年轻市场的欢迎。
JavaScript引擎是：SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0）。
3 presto
opera内核（已废弃，opera现在已经改成Google Chrome的Blink内核）。
扩展知识
引擎特点是渲染速度的优化达到了极致，但是网页的兼容性极差。
这是一个动态内核，与其他内核的区别在于处理脚本上，页面的全部或者部分都能在回应脚本事件时等情况下重新被解析。
4 Webkit
Webkit（Safari内核，Chrome内核原型）。
常见Webkit内核浏览器
- Goole Chrome
- 360极速浏览器
- 搜狗高速浏览器
- Goole的Gphone(移动端)
- Apple的iphone（移动端）
扩展知识
苹果公司的内核，被大量使用在移动端浏览器上。Webkit引擎包含WebCore排版引擎以及JavaScript解析引擎。Webkit是自由软件，同时开放源代码。安全性方面不受IE，firefox的制约。（脚本理解方面Goole Chrome使用自己研发的V8引擎）
5 Blink
Blink是由Goole和opera software开发的浏览器排版引擎。Blink是Webkit的一个分支，优化了新的特性，比如跨进程的iframe，将DOM移动到JavaScript中来提高JS对DOM的访问速度等。目前很多移动端内嵌的浏览器内核也渐渐开始采用Blink。
attention：
浏览器最重要或者说最核心的部分是"Rendering Engine"。负责对网页语法的解释（HTML JavaScript）并且渲染网页。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同浏览器对网页编写语法的解释也有所不同，统一网页在不同浏览器的渲染（显示）也不一样。
四 浏览器渲染过程和性能优化必备前提知识
浏览器运行最核心的程序有两部分组成，一部分是渲染器引擎，一部分是JS引擎
4.1 页面加载过程
- 浏览器根据DNS服务器得到域名的IP
- 向这个IP的机器发送HTTP请求
- 服务器收到，处理并返回HTTP请求
- 浏览器得到返回内容
Q：什么是DNS服务器？
A：Domian Name Server域名服务器，主要作用就是进行域名（domain name）和与之对应的IP地址（IP adress）转换的服务器。DNS中保存一张表（什么表？当然是域名和与之对应的IP地址的表）可以解析消息的域名。
那么什么是域名，什么是IP地址呢？这是网络基础的知识点了，以后再详细整理出来。简单来讲，域名就是平常输入的https://www.baidu.com/这种，IP地址就是一窜数字比如119.75.217.109（百度的ip）。
举个栗子
在浏览器输入https://www.csdn.net/，经过DNS解析，对应的IP是39.106.226.142（不同时间，对应的ip地址可能会不一样）。浏览器向这个ip发出http请求，服务端接收到http请求，然后经过计算（向不同用户推送不同的内容），返回http请求，返回内容
这是HTML格式的字符串，只有HTML格式浏览器才能正确解析，根据的是W3C标准。页面加载完毕，接下来就是浏览器渲染。
4.2 什么是DOM
全称是 Document Object Model文档对象模型，DOM是javascript操作网页的接口，提供给JS来动态修改文档状态。
- 需要理解的几个概念
- 元素node：每个标签是一个元素node
- 文档node：整个文档是一个文档node
- 属性node：每个属性是一个属性node
- D O M分别是什么
-
D：document文档。当创建一个页面并把它加载到web浏览器中时，DOM生成。它把编写的网页文档转换成为一个文档对象。
-
O：object对象。对象是一种数据类型，是自包含的数据集合，是由一些属性和方法组合在一起而构成的一个数据实体。包含在对象里的数据可以通过两种形式访问—属性和方法。
-
属性：特定对象的变量
-
方法：特定对象调用的函数
-
-
M：model模型。浏览器提供网页的模型，我们通过js去读取它这张图。
- 五种常用DOM方法
- getElemenById
- getElemenByTagName
- getElemenByClassName
- getAttribute
- setAttribute
4.3 什么是DOM树
树是一种数据结构，利用树这种结构直观的体现层级结构（父元素和子元素之间的关系），parse解析器输出的树是由DOM元素和属性node组成。网页的交互都依赖于这种DOM技术，对树枝树叶编号，通过脚本的函数去寻找哪一个枝干的哪一个叶子，对这个叶子node做出什么样的动态操作。
举个栗子
<html>
<head>
<title>title</title>
</head>
<body>
<a href="">link</a>
<h1>I am Gabrielle</h1>
</body>
</html>
整理一份文档，这种模型很适合用树的结构来表示。
五 后记
认识浏览器可以帮助更好的理解浏览器渲染和性能优化，在下一篇博客整理浏览器渲染和性能优化。
扫一扫
2901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
