ECMA262，JavaScript引擎，浏览器

相关阅读：https://www.cnblogs.com/970119449blog/p/8080133.html

相关阅读：https://www.jb51.net/article/75888.htm

相关阅读：https://www.cnblogs.com/microcosm/p/6815902.html

相关阅读：https://www.jianshu.com/p/281b574ee3f8

浅谈js引擎解析过程：https://blog.csdn.net/lq15310444798/article/details/77574320

浅析浏览器引擎与前端优化：https://blog.csdn.net/john1337/article/details/53579506

从浏览器的渲染到性能优化：https://blog.csdn.net/allenliu6/article/details/76609929

浏览器兼容：https://www.cnblogs.com/zhangyongl/p/6154981.html

js引擎

什么是JS解析引擎？

【渲染引擎 = 浏览器内核】【 js引擎 = 浏览器一部分 = 渲染引擎一部分 = 浏览器内核一部分】

　　JavaScript解析引擎就是能够“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。比方说，当你写了 var a = 1 + 1; 这样一段代码，JavaScript引擎做的事情就是看懂（解析）你这段代码，并且将a的值变为2。学过编译原理的人都知道，对于静态语言来说（如Java、C++、C），处理上述这些事情的叫编译器（Compiler），相应地对于JavaScript这样的动态语言则叫解释器（Interpreter）。这两者的区别用一句话来概括就是：编译器是将源代码编译为另外一种代码（比如机器码，或者字节码），而解释器是直接解析并将代码运行结果输出。 比方说，firebug的console就是一个JavaScript的解释器。　但是，现在很难去界定说，JavaScript引擎它到底算是个解释器还是个编译器，因为，比如像V8（Chrome的JS引擎），它其实为了提高 JS的运行性能，在运行之前会先将JS编译为本地的机器码（native machine code），然后再去执行机器码（这样速度就快很多）

　　javascript解析引擎是一个程序，是浏览器引擎的一部分。每个浏览器的javascript解析引擎都不一样（因为每个浏览器编写Javascript解析引擎的语言（C或者C++）以及解析原理都不相同）。标准的Javascript解析引擎会按照 ECMAScript文档来实现。虽然每个浏览器的Javascript解析引擎不同，但Javascript的语言性质决定了Javascript关键的渲染原理仍然是动态执行Javascript字符串。只是词法分析、语法分析、变量赋值、字符串拼接的实现方式有所不同。

ECMA与JavaScript的关系？

• ECMAScript 262这份文档，就是对JavaScript这门语言定义了一整套完整的标准。
• 有了衡量的标准，JavaScript引擎就可以根据这个标准去解析JavaScript代码了。
• 标准的JavaScript引擎就会根据这套文档去实现，注意这里强调了标准，因为也有不按照标准来实现的，比如IE的JS引擎。这也是为什么JavaScript会有兼容性的问题。
• Script定义了语言的标准，JavaScript引擎根据它来实现，这就是两者的关系。

JavaScript引擎与浏览器的关系？

　　JavaScript引擎是浏览器的组成部分之一。因为浏览器还要做很多别的事情，比如解析页面、渲染页面、Cookie管理、历史记录 等等。那么，既然是组成部分，因此一般情况下JavaScript引擎都是浏览器开发商自行开发的。比如：IE9的Chakra、Firefox的 TraceMonkey、Chrome的V8等等。

Browser, Headless Browser, or Runtime	JavaScript Engine
Mozilla	Spidermonkey
Chrome	V8
Safari	JavaScriptCore
IE and Edge	Chakra
PhantomJS	JavaScriptCore
HTMLUnit	Rhino
TrifleJS	V8
Node.js	V8
Io.js*	V8

为什么JavaScript是单线程？

　　JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

　　为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。

浏览器

浏览器一般由七个模块组成
　　【用户界面】地址栏、书签目录等； 
　　【浏览器引擎】传送指令，读写本地数据，是浏览器中各个部分之间相互通信的核心； 
　　【渲染引擎】解析DOM和CSS，也称排版引擎，我们常说的浏览器内核主要指的就是渲染引擎； 
　　【网络】完成网络调用或资源下载的模块； 
　　【UI后端】用来绘制窗口控件，如输入框、按钮等； 
　　【JS解析器】解释执行js模块，如V8引擎； 
　　【数据存储】浏览器在硬盘保存cookie、localStorage等各种数据。

• 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具。
• 它负责取得网页的内容（HTML、XML、图象等等）、整理信息（例如加入CSS等），以及计算网页的显示方式然后会输出至显示器或打印机。

主流浏览器内核

• 浏览器内核包括渲染引擎和JS引擎，由于js引擎越来越独立，内核就倾向于只指渲染引擎。
• 浏览器渲染引擎是由各大浏览器厂商依照W3C标准自行实现的，也被称之为浏览器内核。

（1）Trident

Microsoft公司浏览器内核，IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）及许多品牌浏览器的内核。其中部分浏览器的新版本是“双核”甚至是“多核”，其中一个内核是Trident，然后再增加一个其他内核。
（2）Gecko 

Firefox内核，Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) ，Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon使用的内核。
（3）Presto 

Opera前内核，已废弃，Opera12.17 以后Opera就已改用Google Chrome的Blink内核。

（4）Webkit 

开源，它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核（Safari内核也是Chrome内核原型），大量使用在移动端浏览器上

（5）Blink 

是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，是webkit的一个分支，较多移动端采用。

（6）edge 

微软专门为新IE打造的引擎，速度快，目前已经基于此引擎开发了浏览器，目前IE11使用该内核，估计以后微软的新浏览器会继续采用该内核。

渲染引擎工作流程

（1）HTML解析器解析DOM树

（2）渲染树结构

（3）布局渲染树

（4）绘制DOM树

• Webkit和gecko属于不同，但流程基本相同。
• Gecko将视觉化后的树称为“框架树”，webkit称为“渲染树”；
• 对于元素的排放，webkit称为“布局layout”，gecko称为“重拍reflow”；
• gecko在html解析和DOM树间添加了“内容槽”，用于生成DOM元素；
• 将DOM树和样式信息构建渲染树的过程，webkit称为“附加”，gecko称为“框架结构”。

相关性能优化

（1）减少JS加载对DOM渲染的影响：将js放在HTML文档后加载或异步加载； 
（2）避免重排，减少重绘：CSS动画减少使用width、margin、padding等CSS； 
（3）减少使用关系型样式表的写法：直接使用唯一的类名可最大幅度提升渲染效率； 
（4）减少DOM层级：减少无意义的DOM可以减少渲染引擎的匹配计算量。

代码层面：避免使用css表达式，避免使用高级选择器，通配选择器等。 
缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等。 
请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。 
请求带宽：压缩文件，开启GZIP。