浏览器（网页浏览器）

参考：百科：浏览器

词条：浏览器、内核、浏览器内核、javascript引擎

1.浏览器的组成

浏览器大抵由 shell 和 内核 组成

shell 包含外壳，菜单，用户操作界面 等等

内核个别分为 渲染引擎 (排版渲染引擎、图形引擎) 和 javascript引擎 (JS解释器)

shell（计算机壳层）：是指“为使用者提供操作界面”的软件（command interpreter，命令解析器）

shell 相似于DOS下的COMMAND.COM和起初的cmd.exe。它接管用户命令，而后调用相应的应用程序。

2.主流程 The main flow

渲染引擎在获得内容之后的根本流程：

解析html以 构建dom树->构建render树->布局render树->绘制render树

参考：https://blog.csdn.net/liyong1...

3.浏览器内核技术

浏览器内核次要包含以下三个技术分支：排版渲染引擎、 JavaScript引擎，以及其余

4.浏览器的内核(渲染引擎、浏览器引擎、Rendering Engine)

浏览器引擎（内核，渲染引擎）－用来查问及操作渲染引擎的接口

例如：webkit【WebKit 所蕴含的 WebCore 排版引擎 和 JavaScriptCore解析引擎】、

Trident、Gecko、Presto

排版渲染引擎－用来显示申请的内容

例如：WebCore

JavaScript引擎－用来“读懂”JavaScript代码 并 解释执行JS代码

例如：V8

5.JavaScript引擎

JavaScript引擎是一个专门解决JavaScript脚本的虚拟机，个别会附带在网页浏览器之中。

例如：V8，由Google丹麦开发，是Chrome浏览器的一部分。

6.JavaScript引擎工作原理

参考：https://blog.csdn.net/a419419...

6.1第一阶段： 语法查看
6.1.1词法剖析

JavaScript解释器先把JavaScript代码（字符串）的字符流依照ECMAScript规范转换为记号流

6.1.2语法分析

JavaScript语法分析器在通过词法剖析后，将记号流依照ECMAScript规范把词法剖析所产生的记号生成语法树。艰深地说就是把从 程序中收集的信息存储到数据结构中，每取一个词法记号，就送入语法分析器进行剖析。

6.2第一阶段： 运行阶段
6.2.1预解析

第一步：创立执行上下文。解析器将语法查看正确后生成的语法树复制到以后执行上下文中。

第二步：属性填充。解析器会对语法树当中的变量申明、函数申明以及函数的形参进行属性填充。

预解析阶段创立的执行上下文包含：变量对象、作用域链、this

变量对象（Variable Object）：由vardeclaration、function declaration（变量申明、函数申明）、arguments（参数）形成。 变量对象是以单例模式存在。

作用域链（Scope Chain）：variableobject + all parent scopes（变量对象以及所有父级作用域）形成。

this值：（thisValue）：contentobject。this值在进入上下文阶段就确定了。一旦进入执行代码阶段，this值就不会变了。

6.2.2执行

注：圆括号()是一种运算符，跟在函数名之后，示意调用该函数。

函数名称() 或者 参数名称.call()

js运行三部曲
1、语法分析2、预编译3、解释执行
预编译
1、创立AO对象（执行器上下文、执行环境）2、找形参和变量申明、将变量和形参作为AO的属性名.值为undefined3、将实参值和形参值对立4、在函数体内找到函数申明，值赋予函数体注：    变量对象初始化程序：函数形参 --> 函数申明 --> 变量申明；（也是晋升程序）    [[Scope]]仅供js引擎操作
作用域\作用域链
function fn() {    // 创立Ao对象(Activation Object) 执行器上下文    // 伪代码    var AO = {        this: window,        // 构造函数相干        '[[Scope]]': 'GO',     // 所在环节的作用域*/        num: undefined,        };    var num = 123;}fn();// 全局作用域var GO = {    this: window,    window: (Object),    document: (Object),    fn: undefined}
【对象】字面量（构造函数（一般函数（预编译）））和间接量
构造函数外部原理【实例、构造函数、对象】

原型链的连接点：__proto__

call/apply：扭转this指向

call/apply区别：传参列表不同

// 模仿构造函数(构造函数原理)function Object() {    // 1、在函数体最背后隐士的加上 this = {}    // 2、执行this.xxx = xxx;    // 3、隐式地返回this（援用类型）    var this = {        __proto__: Object.prototype,    // 能够被批改        contructor: Object,                // 构造函数        arguments: null                    // 形参    https://zhuanlan.zhihu.com/p/72469390    };    this.name = 'zhangcs';    return this;                }// 原型Object.prototype = {    name: '原型'}// 实例new Object().name;             // 指向属性 'zhangcs'new Object().contructor;    // 指向构造函数new Object().__proto__;        // 指向原型// 扭转this指向var obj = {}Object.call(obj, '参数');            // this = objObject.apply(obj, ['参数']);        // 参数必须是数组     function Model(width) {    this.width = width;}function Style(color) {    this.color = color;}function Car(color, width) {    Model.call(this, width);    Style.apply(this, [color]);};var car = new Car('red', '200')

7.工作队列

JavaScript语言的一大特点就是单线程，也就是说，同一个工夫只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。

JavaScript的单线程，与它的用处无关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很简单的同步问题。比方，假设JavaScript同时有两个线程，一个线程在某个DOM节点上增加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

单线程就意味着，所有工作须要排队，前一个工作完结，才会执行后一个工作。如果前一个工作耗时很长，后一个工作就不得不始终等着。