乐趣区

关于前端:走进浏览器的幕后瞧瞧

jiezi

前言

置信大家接触前端开发一段时间后, 会发现越学习越迷茫, 亦或者疑难点越来越多。(摸鱼摸的累了不如摸摸石头过过河 –)

举几个例子:
大家都晓得 js 是单线程的, 然而它为什么是单线程的? 浏览器是不是也是单线程？

置信大家看到过不少相干的内容比方:《从浏览器多过程到 JS 单线程，JS 运行机制最全面的一次梳理》《深入浅出 JS 引擎》等等这些优良的博客解说。然而多少对一些细节还是存有蛊惑。甚至是一些非科班的同学可能看过之后就缓缓忘记了。。。
其次还有一点就是集体认为碎片化的常识并不一定能陪伴你走的短暂 (520 高兴!!) 更心愿的是可能全面的理解。这也是本系列博客的一个出发点, 让咱们一起摸索浏览器幕后的三俩事。

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

认知内容

随我梳理一下浏览器到底蕴含那些货色, 以及始终耳熟能详的模块外面到底存在什么机密。

浏览器是什么?

浏览器是用来检索、展现以及传递 Web 信息资源的应用程序。留神和 SEO(搜索引擎) 进行辨别。

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

按 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 持续祥和~

“ 下课!”

退出移动版