前言

相信你们接触前端开发一段时间后,会发现越学习越迷茫,亦或者疑问点愈来愈多。(摸鱼摸的累了不如摸摸石头过过河 --)前端

举几个例子:
你们都知道js是单线程的,可是它为何是单线程的? 浏览器是否是也是单线程？node

相信你们看到过很多相关的内容好比:《从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理》《深刻浅出JS引擎》等等这些优秀的博客讲解。可是多少对一些细节仍是存有迷惑。甚至是一些非科班的同窗可能看过以后就慢慢遗忘了。。。
其次还有一点就是我的认为碎片化的知识并不必定能陪伴你走的长久(520快乐!!)更但愿的是可以全面的了解。这也是本系列博客的一个出发点,让咱们一块儿探索浏览器幕后的三俩事。面试

本系列尽量的将术语进行大白话的方式解释。关于一些术语定义概念问题也会贴出参考连接提供给须要的人。

认知内容

随我梳理一下浏览器到底包含那些东西,以及一直耳熟能详的模块里面到底存在什么秘密。

浏览器是什么?

浏览器是用来检索、展现以及传递Web信息资源的应用程序。注意和SEO(搜索引擎)进行区分。chrome

浏览器架构,实现包含哪些模块

按chrome(准确来讲chromium)进行介绍说明 想找图来贴 可是怕太复杂不太好理解。完事画个简单的贴上来。

1. 主进程 主要包含主线程和I/O线程(input/output输入输出)。以及一些公共API,资源;负责合成。
2. 子进程 主要包含主线程和其余线程 好比渲染线程Render。
3. 内核 主要包含WebCore V8 WebKit等等。
4. 第三方库 主要包含图形库(2D,3D) 存储 音频视频等等。

注意: 浏览器是多进程多线程架构,后续会对内部实现作一个简单认知(不会太脱离前端)。后端

浏览器主要组件

ps:图来源网络 侵删请留言。浏览器

1. UserInterface 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其余显示的各个部分都属于用户界面。
2. Browser Engine 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
3. Rendering Engine 呈现引擎 - 负责显示请求的内容。若是请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
4. Networking 网络 - 用于网络调用，好比 HTTP 请求。其接口与平台无关，并为全部平台提供底层实现。
5. UI Backend 用户界面后端 - 用于绘制基本的窗口小部件，好比组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操做系统的用户界面方法。
6. JavaScript Interpreter JavaScript 解释器。用于解析和执行 JavaScript 代码。
7. Data Storage 数据存储。这是持久层。浏览器须要在硬盘上保存各类数据，例如 Cookie。

浏览器内核是什么?

在浏览器中，有一个最重要的模块，它主要的做用是将页面转变成可视化（准确讲还要加上可听化）的图像结果，这就是浏览器内核。一般，它也被称为渲染引擎。常见的内核包括:网络

1. Trident内核 表明浏览器Internet Explorer(IE)
2. Gecko内核 表明浏览器Mozilla Firefox
3. WebKit内核 表明浏览器Safari
4. Blink内核 表明浏览器Chrome,备注说明该内核是基于WebKit内核拉取出的分支进行二次开发的(谷歌团队以为本身走的步伐更快)
5. 其余内核

JavaScript(js)引擎

咱们常说的谷歌浏览器/nodejs的v8引擎，注意它不是渲染引擎,V8是js引擎,是用来编译和执行js代码。

JavaScript引擎是一个专门处理JavaScript脚本的虚拟机，通常会附带在网页浏览器之中。一般被称为js引擎,举几个引擎(好几回问面试者 你知道除了v8以外还有什么JS引擎吗?几乎是全军覆没。。):多线程

1. JavaScriptCore 表明浏览器Safari
2. Rhino 表明浏览器Mozilla Firefox
3. Chakra 表明浏览器Internet Explorer(IE)
4. V8 表明浏览器 Chrome

后续会展开介绍V8架构

渲染引擎

ps:图来源网络 侵删请留言。异步

简化理解起来就是:

1. 解析HTML构建DOM树
2. 构造渲染树
3. 对于渲染树进行布局
4. 绘制渲染树
   值得注意的是在解析过程当中:js代码可能会修改DOM树结构。若是解析过程当中依托外部资源会利用加载器进行加载(异步加载)但也会进行等待加载完毕在进行构建DOM树。

最后

预知后事如何请听下次分解。

首先呢回顾一下今天 整体来讲挺开心,朋友圈社交圈比往年安静祥和许多。因此决定写写文章回报广大单身贵族和奋战在一线的大家。

还有答应的系列内容必定会有后续。JS引擎内部 渲染引擎 网络等等这些必须写。

最后再次祝你们5,20快乐。但愿明天5,21继续祥和~

"下课!"