浏览器工做原理理解

时间 2019-11-19

原文原文链接

浏览器是咱们前端开发者工做的平台，是咱们最长用的软件，是咱们必需要了解的知识面，作个学习记录。css

如今人都离不开网络，在网上咱们能干不少事情，用途最多的就是浏览器，它是一扇窗户，打开这扇窗户能够看到大千世界的变化，是人类获取信息重要的软件工具之一。对于单纯的使用者只知道怎么使用浏览器去上网冲浪，而对于前端开发者须要了解这个浏览器是怎么让咱们能够自由的在网络世界遨游，它是怎么实现大千世界信息的展现的?分析开始。。。html

什么是浏览器？

按专业的描述: 是指能够显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。它用来显示在万维网和局域网等内的文字、图像及其余信息。前端

浏览器种类：

按照浏览器的内核种类分类，web

Trident内核：微软IE（坑货）,MaxThon,TT,The World,360,搜狗浏览器等，这种浏览器内核是IE浏览器用的内核，后来被其余浏览器厂商拿去延用，因2005年与W3C组织所制定的标准发生了脱节，致使对网页新元素兼容不是太好，其自身内核也存在bug。windows

Gecko内核: Netscape6及以上版本，Firefox,MozillaSuite/SeaMonkey等，是网景早期自助研发的浏览器内核，这个内核的优势就是功能强大、丰富，能够支持不少复杂网页效果和浏览器扩展接口，可是要消耗不少的资源，好比内存。后端

Presto内核：Opera7及以上,Presto内核被称为公认的浏览网页速度最快的内核,优势：在处理JS脚本等脚本语言时，会比其余的内核快3倍左右。缺点：为了达到很快的速度而丢掉了一部分网页兼容性。浏览器

Webkit内核：Safari,Chrome等，优势：网页浏览速度较快，虽然不及 Presto 可是也胜于 Gecko 和 Trident。缺点：对于页面容错性较差，会使一些编写不标准的网页没法正确显。缓存

它们瓜分着当今社会浏览器使用的市场份额。服务器

浏览器主要构成：

1. 用户界面－包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口以外的其余部分cookie

2. 浏览器引擎－用来查询及操做渲染引擎的接口

3. 渲染引擎－用来显示请求的内容，例如，若是请求内容为html，它负责解析html及css，并将解析后的结果显示出来

4. 网络－用来完成网络调用，例如http请求，它具备平台无关的接口，能够在不一样平台上工做

5. UI 后端－用来绘制相似组合选择框及对话框等基本组件，具备不特定于某个平台的通用接口，底层使用操做系统的用户接口

6. JS解释器－用来解释执行JS代码

7. 数据存储－属于持久层，浏览器须要在硬盘中保存相似cookie的各类数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术

这张图大致上说了一下浏览器内部工做流程，不是所有浏览器都是这样的工做形态出现，有的流程走的路线不同的。

从用户界面开始细说整个浏览器的工做流程，首先用户发起URL请求，这是开始浏览器工做流的第一步。

浏览器对url及编码解析：

大致流程说明以下：

1.浏览器向DNS服务器发送查找的URL输入URL对应的IP地址

2.DNS服务器返回网站的IP地址

3.浏览器根据IP地址与WEB服务器在的80端口上创建TCP链接

4.浏览器获取请求的页面HTML代码

5.浏览器在窗体渲染HTML

在这过程当中再深刻看下DNS查找IP操做：

DNS查找过程：

1.浏览器缓存：浏览器会缓存DNS记录一段时间，但操做系统没有告诉浏览器存储DNS的时间，这样不一样的浏览存储缓存时间不固定（2分钟--30分钟不固定）

2.系统缓存：若是在浏览器缓存没有找到须要的记录时，则浏览器会作一个系统调用（windows里是用gethostbyname）。这样就能够得到系统中的缓存

3.路由缓存：浏览器向DNS服务器请求路由器，它通常会有本身的DNS缓存

4.ISP DNS缓存：接下来要check的就是ISP缓存DNS的服务器。在这通常都能找到相应的缓存记录

5.递归搜索：你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名到facebook域名服务器，通常DNS服务器的缓存中会有.com域名服务器中的域名，因此到顶级服务器的匹配过程不是那么必要了

URL编码解析:

若是url路径中带有中文，这个时候就能看出浏览器对url的编码设置了，

URL例子：http://106.kuailingmin.sinaapp.com/蒯灵敏

由于IE会直接发送GBK编码的参数，在后台须要另外处理，而Firefox则以页面编码作Base64转义,URL例子中的中文会变成http://106.kuailingmin.sinaapp.com/%E8%92%AF%E7%81%B5%E6%95%8F

上面大致这么多，接下来DNS返回了IP地址的响应，这个时候会把页面中的元素都返回过来，浏览器要去接受这些数据，在这个过程当中就会触发浏览器排版引擎的工做，分析下何时浏览器排版引擎？

什么是排版引擎：

网页的排版引擎称之为渲染引擎，主要负责获取网页的内容（HTML,图像,XML等等），整理信息（加入CSS文件），以及计算网页的显示方式而后输出到显示器，或者打印机设备，全部的网页浏览器，电子邮件客户端以及其它须要编辑、显示网络内容的应用程序都须要排版引擎。

这个是个重要的工做机制，目前几个大浏览器厂商根据本身需求，研发本身的排版引擎，有些浏览器厂商则直接引擎这几大排版引擎，（省事，省时，省力，省钱）。

排版引擎分类：

1.IE派: IE永远不会用别人的东西，因此在浏览器任何环节都喜欢自主研发，目前是最流行的排版引擎，(世界之窗浏览器，Avant,腾讯TT,Netscape 8,NetCaptor,GreenBrowser等...)

Trident（图形接口的排版引擎）

又称之为MSHTML,是IE浏览器的排版引擎，简单了解下发展史：初版本诞生于1997年10月，以后不断的加入新技术，到IE7版的时候，微软对Trident排版引擎作了重大的变更，除了加入新技术以外，还对网页标准支持。其设计成一个软件组件形式

Gecko排版引擎：

流行程度仅次于Trident,d诞生于1998年初，Mozilla计划开始执行。这个新的排版引擎名为Raptor，以开发源码的方式发放于互联网上。后来，由于商标问题，Raptor改外为NGLayout（即next generation layout之意）。而最后NGLayout就被网景从新命名为Gecko。

Gecko兼容的标准:

             * HTML 4.01
   * XML 1.0
   * XHTML 1.1
   * MathML
   * CSS Level 1（支援部份CSS 2和3）
             * DOM Level 1和2（支援部份DOM 3）
             * RDF
   * JavaScript 1.7
   * E4X
       * SVG（支援部份SVG 1.1）

KHTML排版引擎：

该引擎是C++编写的，并以LGPL受权，支援大多数网页浏览标准,此优势拥有速度快捷的优势

引擎兼容标准：

* HTML 4.01
* CSS 1
      * CSS 2.1 （paged media除外）
      * CSS 3 选择符（selector）及部分其余功能
      * PNG, MNG, JPEG, GIF 图形格式
* DOM 1, 2 及部分的 DOM 3
      * ECMA-262/JavaScript 1.5
* 部分 SVG

还有不少排版引擎好比说（混合排版引擎，Blink排版引擎,纯文字排版引擎）,主要用于在PC端，手机端，浏览器排版引擎就总结这几类，大致知道有这些的概念，而后就是HTML怎么经过排版引擎解析的？

首先有经验的前端开发都知道浏览器解析HTML文档都是从第一行开始一行一行往下解析的，在这个过程当中，再深刻的研究,hmtl不能被通常的自顶向下或自底向上的解析器所解析，也不能使用正则解析技术，浏览器有专门的HTML解析器