一.浏览器和V8引擎

1. 浏览器主要构成

浏览器是由c++编写的一款客户端软件。

作为互联网的直接体现，它的主要结构为：

• 用户界面：包括地址栏、后退/前进按钮、书签目录、刷新按钮等。也就是除了显示请求内+容的主窗口之外的部分。
• 浏览器引擎：用来查询和操作渲染引擎的接口。
• 渲染引擎(呈现引擎)：用来处理资源内容，并显示处理结果，也就是我们所说的内核。
• 网络：完成网络调用。
• UI后端 : 底层使用操作系统的用户接口，具有不特定平台的通用接口。
• JS解析器 : 解释执行JS脚本。
• 数据存储 ：占用一定的硬盘实现数据的存储。

组成结构示意图

2. 主要浏览器和内核对应关系

浏览器名称	渲染引擎(内核)	ECMAScript引擎(JS引擎)
IE6-8	Trident	JScript(ie3-8)、Chakra(ie9)
Firefox 3.5+	Gecko	TraceMonkey
Chrome4+	WebKit	V8
Safari4+	WebKit	SquirrelFish Extreme
Opera10+	Presto	Carakan

3. 浏览器静态资源下载

当在地址栏输入网址(URL地址)后，浏览器会解析URL 地址进行 DNS(域名系统) 域名解获得IP地址，然后TCP 连接（三次握手）， 浏览器向 web 服务器发送一个 HTTP 请求报文，服务器返回 HTTP 响应报文给客户端，关闭 TCP 连接（四次挥手），浏览器解析文档资源通过浏览器内核渲染页面。在浏览器解析文档的时候下载静态资源。

4. 内核引擎解析

谷歌内核渲染器工作流程

HTML 通过 HTML Paeser 转化成一个DOM树

style 通过 CSS Parser 转化为一个 style Rules （css 规则）

DOM树和css规则 通过 Arrachment(附加) 到一起 形成 Render Tree (渲染树)

渲染树 通过Layout 布局引擎布局 ，然后通过 Painting 渲染出来

谷歌Js引擎:v8

为什么我们需要Js引擎呢？

• 高级的编程语言都需要转化成最终的机器语言来执行的
• Javascript无论交给浏览器还是node,最终都是被CPU执行
• CPU只认识自己的指令集，也就是机器语言，才能被CPU执行
• 所以我需要Javascript引擎帮助我们讲Javascript翻译成CPU指令

解析流程

• Javascript源代码通过Parse词法分析语法分析转化为AST抽象语法树
• AST语法树通过Ignition转化为字节码，再根据不同的电脑的cpu架构翻译成汇编指令和机器指令
• TurboFan 从Ignition中得到使用频率高的信息，直接转化为机器码提高运行效率
• 当优化的机器码发现我们的需要的指令在Turbofan有错误时，会重新翻译成字节码运行

5. 简单流程

当我们从浏览器地址栏中输入一个域名地址，触发网络请求，网络层得到响应以后，渲染引擎会从网络层中获取请求回来的文档内容，内容大小有一定限制。渲染引擎开始解析请求回来的资源，最后把解析之后的内容结合UI后台，通过调用操作系统的api绘制我们的主要内容，此时操作系统的api则会根据硬件的不同绘制出不同的效果。