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的计算能力,HTML5Web 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树

ECMA262,JavaScript引擎,浏览器_第1张图片

ECMA262,JavaScript引擎,浏览器_第2张图片

  • 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。

 

转载于:https://www.cnblogs.com/mobaiyu/p/9669485.html

你可能感兴趣的:(javascript,ui,后端,ViewUI)