精华内容
下载资源
问答
  • JS引擎

    2018-01-16 00:57:44
    浏览器的核心是渲染引擎、JS引擎(JS解释器) 渲染引擎,将网页代码渲染为用户视觉上可感知的平面文档。 JS引擎,读取网页中JS代码并对其处理。 渲染引擎 浏览器内核即网页浏览器排版引擎(LayoutEngine/Rending ...
        

    浏览器

    浏览器的核心是渲染引擎、JS引擎(JS解释器)

    • 渲染引擎,将网页代码渲染为用户视觉上可感知的平面文档。
    • JS引擎,读取网页中JS代码并对其处理。

    渲染引擎

    浏览器内核即网页浏览器排版引擎(LayoutEngine/Rending Engine),又称为页面渲染引擎或模板引擎,负责获取页面内容(如HTML、XML、图片等)、整理消息(如加入CSS等)、计算网页显示方式,然后输出至显示器或打印机。网页浏览器、电子邮件客户端等终端则根据表示性标记语言(Presentational Markup)来显示内容的应用程序都需要排版引擎。

    浏览器典型内核:

    • Microsoft Internet Explorer 的 Trident
    • Mozilla Firefox 的 Gecko
    • Google Chrome 的 Blink
    • Apple Safari 的 Webkit

    其实一个完整的浏览器不会只有一个排版引擎,还有自己的界面框架与其他功能支持,排版引擎本身不可能实现浏览器的所有功能。

    渲染引擎处理网页的流程:

    • 解析代码,将HTML代码解析为DOM,将CSS代码解析为CSSOM(CSS Object Model)。
    • 对象合成,将DOM和CSSOM合成一颗渲染树(Render Tree)。
    • 布局,计算出渲染树的布局
    • 绘制,将渲染树绘制到屏幕

    JS引擎

    JS引擎是用来执行JS代码的,JS引擎的快慢对网页速度有着重大影响。简单来说,JS解析引擎是能够“读懂JS代码并准确地给出代码运行结果的一段程序。”。

    对于静态语言而言,如C、C++、Java等,处理上述事情的叫做“编译器(compiler)”,对于动态的JS语言而言则叫做“解释器(interpreter)”。编译器与解释器的区别在于“编译器将源代码编译成另一种代码(如机器码或字节码等),而解释器是直接解析并将代码运行结果输出。”。例如Firebug的console就是一个JS的解释器。

    典型JS引擎

    • Microsoft IE 的 Chakra,Chakra由Opera公司编写。
    • Mozilla Firefox 的 SpiderMonkey,第一款JS引擎。
    • Google Google 的 V8,C/C++编写。

    既然JS是一段程序,JS代码也是程序,那么如何让程序去读懂程序呢?那就需要定义规则,而ECMAScript就是专门定义规则的,JS引擎根据ECMAScript定义的标准规则去解析JS代码。简单来说,ECMAScript定义语言的标准,JS引擎根据规则去实现。

    展开全文
  • Js引擎

    2017-06-13 09:46:34
    js引擎是单线程执行的 js语言设计的一个很重要的点是,js是没有多线程的.js引擎的执行是单线程执行.这个特性曾经困扰我很久,我想不明白既然js是单线程的,那么是谁来为定时器计时的?是谁来发送ajax请求的?我陷入了一...

    js引擎是单线程执行的

    js语言设计的一个很重要的点是,js是没有多线程的.js引擎的执行是单线程执行.这个特性曾经困扰我很久,我想不明白既然js是单线程的,那么是谁来为定时器计时的?是谁来发送ajax请求的?我陷入了一个盲区.即将js等同于浏览器.我们习惯了在浏览器里面执行代码,却忽略了浏览器本身.js引擎是单线程的,可是浏览器却可以是多线程的,js引擎只是浏览器的一个线程而已.定时器计时,网络请求,浏览器渲染等等.都是由不同的线程去完成的.
        var isStop = true;
        setTimeout(function () {
            isStop= false;
        }, 500);
        while (isStop);
        alert('END');
    isStop默认是true的,在while中是死循环的.最后的alert是不会执行的. 我添加了一个定时器,1秒后将isStop改为false. 如果说js引擎是多线程的,那么在1秒后,alert就会被执行.然而实际情况是,页面会永远死循环下去.alert并没有执行.这很好的证明了,settimeout并不能作为多线程使用.js引擎执行是单线程的.

    js事件的驱动
    先看图

    针对上图理解:
    js引擎单线程执行的,它是基于事件驱动的语言.它的执行顺序是遵循一个叫做事件队列的机制.从图中我们可以看出,浏览器有各种各样的线程,比如事件触发器,网络请求,定时器等等.线程的联系都是基于事件的.js引擎处理到与其他线程相关的代码,就会分发给其他线程,他们处理完之后,需要js引擎计算时就是在事件队列里面添加一个任务. 这个过程中,js并不会阻塞代码等待其他线程执行完毕,而且其他线程执行完毕后添加事件任务告诉js引擎执行相关操作.这就是js的异步编程模型.


    看个setTimeout的例子:
            alert("start"); 
            setTimeout(() => {
               alert("done");
            }, 0); 
            alert("end"); 
    这是一个很简单的实验,如果settimeout(0)会立即执行,那么这里的执行结果就应该是start、done、end  . 然而实际的结果却是start、end、done
    对于这个结果我们的解释是:
    js代码执行到这里时,会开启一个定时器线程,然后继续执行下面的代码.该线程会在指定时间后往事件队列里面插入一个任务.由此可知settimeout(0)里面的操作会放在所有主线程任务之后. 这也就解释了为什么第一个实验结果是start、end、done .
    给出最终结论为:
    在指定时间内, 将任务放入事件队列,等待js引擎空闲后被执行.

    js引擎与GUI引擎是互斥的

     

    谈到这里,就不得不说浏览器的另外一个引擎---GUI渲染引擎. 在js中渲染操作也是异步的.比如dom操作的代码会在事件队列中生成一个任务,js执行到这个任务时就会去调用GUI引擎渲染.

    js语言设定js引擎与GUI引擎是互斥的,也就是说GUI引擎在渲染时会阻塞js引擎计算.原因很简单,如果在GUI渲染的时候,js改变了dom,那么就会造成渲染不同步. 我们需要深刻理解js引擎与GUI引擎的关系,因为这与我们平时开发息息相关,我们时长会遇到一些很奇葩的渲染问题.看这个例子

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table border=1>
            <tr><td><button id='do'>Do long calc - bad status!</button></td>
                <td><div id='status'>Not Calculating yet.</div></td>
            </tr>
            <tr><td><button id='do_ok'>Do long calc - good status!</button></td>
                <td><div id='status_ok'>Not Calculating yet.</div></td>
            </tr>
        </table>    
    <script>
    
    function long_running(status_div) {
    
        var result = 0;
        for (var i = 0; i < 1000; i++) {
            for (var j = 0; j < 700; j++) {
                for (var k = 0; k < 300; k++) {
                    result = result + i + j + k;
                }
            }
        }
        document.querySelector(status_div).innerHTML = 'calclation done' ;
    }
    
    document.querySelector('#do').onclick = function () {
        document.querySelector('#status').innerHTML = 'calculating....';
        long_running('#status');
    };
    
    document.querySelector('#do_ok').onclick = function () {
        document.querySelector('#status_ok').innerHTML = 'calculating....';
        window.setTimeout(function (){ long_running('#status_ok') }, 0);
    };
    
    </script>
    </body>
    </html>
    复制代码

     我们希望能看到计算的每一个过程,我们在程序开始,计算,结束时,都执行了一个dom操作,插入了代表当前状态的字符串,Not Calculating yet.和calculating....和calclation done.计算中是一个耗时的3重for循环. 在没有使用settimeout的时候,执行结果是由Not Calculating yet 直接跳到了calclation done.这显然不是我们希望的.而造成这样结果的原因正是js的事件循环单线程机制.dom操作是异步的,for循环计算是同步的.异步操作都会被延迟到同步计算之后执行.也就是代码的执行顺序变了.calculating....和calclation done的dom操作都被放到事件队列后面而且紧跟在一起,造成了丢帧.无法实时的反应.这个例子也告诉了我们,在需要实时反馈的操作,如渲染等,和其他相关同步的代码,要么一起同步,要么一起异步才能保证代码的执行顺序.在js中,就只能让同步代码也异步.即给for计算加上settimeout.

     

    settimeout(0)的作用

     

    不同浏览器的实现情况不同,HTML5定义的最小时间间隔是4毫秒. 使用settimeout(0)会使用浏览器支持的最小时间间隔.所以当我们需要把一些操作放到下一帧处理的时候,我们通常使用settimeout(0)来hack.

     

    requestAnimationFrame

     

    这个函数与settimeout很相似,但它是专门为动画而生的.settimeout经常被用来做动画.我们知道动画达到60帧,用户就无法感知画面间隔.每一帧大约16毫秒.而requestAnimationFrame的帧率刚好是这个频率.除此之外相比于settimeout,还有以下的一些优点:

     

    • requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧,每帧大约16毫秒.
    • 隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的的cpu,gpu和内存使用量。
    • 但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销

     

     

    总结:

     

    1. 浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:javascript引擎线程,GUI渲染线程,浏览器事件触发线程。
    2. javascript引擎是基于事件驱动单线程执行的.JS引擎一直等待着任务队列中任务的到来,然后加以处理,浏览器无论什么时候都只有一个JS线程在运行JS程序。
    3. 当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
    4. 当一个事件被触发时该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等,但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。

    展开全文
  • js引擎

    2014-02-23 13:37:02
    js引擎:  浏览器引擎  nodejs 的googlev8  微软的wsh  游戏引擎 比js权限高的script:  vbjavascript  nodejsjs引擎:  浏览器引擎  nodejs 的googlev8  微软的wsh  游戏引擎 比js权限高的script:...
    js引擎:
      浏览器引擎
      nodejs 的googlev8
      微软的wsh
      游戏引擎
    比js权限高的script:
      vbjavascript
      nodejs
    展开全文
  • java js引擎调试js代码

    2018-03-14 11:30:03
    java js引擎调试js代码,java js引擎调试js代码,java js引擎调试js代码,java js引擎调试js代码
  • 转自浏览器引擎、渲染引擎、js引擎[1]定义 浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具[2]常见引擎渲染...

    转自浏览器引擎、渲染引擎、js引擎

    [1]定义

      浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎
      渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具

    [2]常见引擎

    渲染引擎:

        firefox使用gecko引擎

        IE使用Trident引擎

        2015年微软推出自己新的浏览器,原名叫斯巴达,后改名edge,使用edge引擎

        opera最早使用Presto引擎,后来弃用

        chrome\safari\opera使用webkit引擎

        13年chrome和opera开始使用Blink引擎

    js引擎:

        老版本IE使用Jscript引擎

        IE9之后使用Chakra引擎

        edge浏览器仍然使用Chakra引擎

        firefox使用monkey系列引擎

        safari使用的SquirrelFish系列引擎

        Opera使用Carakan引擎

        chrome使用V8引擎。nodeJs其实就是封装了V8引擎

    展开全文
  • js引擎线程

    2020-03-19 22:49:26
    浏览器包括4个进程: 主进程(Browser进程),浏览器只有一个主进程,负责资源下载,界面展示等主要基础功能 GPU进程,负责3D图示绘制 第三方插件进程,负责第三方插件处理 ...js引擎线程就是js内核,负责解析...
  • 微软的js引擎

    2018-10-04 12:31:27
    微软的js引擎,不太好下载的一个东西,希望对大家有所帮助。
  • 深入JavaScript之JS引擎如何执行JS代码

    千次阅读 多人点赞 2021-04-20 12:09:34
    js引擎在执行js代码时,也会从上到下进行 词法分析、语法分析、语义分析 等处理,并在代码解析完成后生成AST(抽象语法树),最终根据AST生成CPU可以执行的机器码并执行。 除此之外,JS引擎在执行代码时还会进行其它...
  • JS-js引擎的执行过程

    2020-12-22 20:52:40
    js引擎的执行过程
  • 浏览器内核分成两部分:渲染引擎和JS引擎。 由于JS引擎越来越独立,浏览器内核 就倾向于 单指 渲染引擎。 渲染引擎是一种对解析HTML、CSS等进行解析并将其显示在页面上的工具。 二、常见引擎 渲染引擎:  firefox...
  • 浅聊 JS 引擎

    2021-02-17 00:50:21
    浅聊 JS 引擎 初学者的疑问 当我接触前端一段时间后,总是听到别人提到 JS 引擎(如下所指都为以 V8 引擎为例子)。“引擎”二字,颇感高端深奥,对我而言最为直观的就是轰鸣的汽车引擎,当然 JS引擎肯定与这个...
  • V8 JS引擎

    千次阅读 2018-05-15 20:59:20
    一. Google开发V8Google (丹麦)研发小组在 2006 年开始研发 V8 ,部分的原因是 Google 对既有 JavaScript 引擎的执行速度不满意, 在2008年... 常见JS引擎JScript(IE6,IE7, IE8)Chakra(IE9,IE10, IE11, IE ...
  • 一,浏览器内核: ie浏览器内核: Trident google,sarafi浏览器内核: webkit 火狐浏览器内核:Gecko 老版google浏览器内核:Blink ...三,JS引擎 是解析javascript语言,执行js语言实现页面的...
  • 渲染引擎的作用包含解析html(触发资源请求,生成dom),生成render树,计算页面布局,绘制,以及样式改变下的重排(对布局位置重新计算),...这也许是浏览器做的优化策略,在JS引擎执行时,渲染引擎也不会完全不工...
  • 浏览器内核、渲染引擎、js引擎

    千次阅读 2017-07-05 08:41:05
    浏览器内核、渲染引擎、js引擎
  • js 引擎 JavaScriptCore

    千次阅读 2013-08-01 13:10:50
     javascriptCore 为 webkit 提供的js引擎, 实现了 ECMAScript 262 标准。 虽然 谷歌的Chromium 浏览器用webkit作为渲染引擎,但是其js引擎用的是v8而不是javascriptCore, android 上的浏览器默认也用V8作为js...
  • 浏览器内核分成两部分:渲染引擎和JS引擎。 由于JS引擎越来越独立,浏览器内核 就倾向于 单指 渲染引擎。  渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具。(说白了,就是按照HTML代码在界面上...
  • 浏览器由两部分组成:渲染引擎(内核)和JS引擎(JS解释器0 渲染引擎:用来解释HTML与CSS,俗称内核,比如chrome浏览器的blink,老版本的webkit JS引擎:也称JS解释器。用来读取网页中的JS代码,对其处理后运行,比如...
  • 常见浏览器JS引擎和内核 附上常见浏览器JS引擎和内核的列表: 公司浏览器JS引擎渲染引擎 Microsoft IE6-8 JScritp Trident IE9-11 Chakra Trident ...
  • 1. 几种JS 引擎介绍(不同浏览器有不同的引擎
  • js引擎的使用

    2017-09-02 18:27:35
    在我参与的项目中用到了js引擎,先来说说什么是js引擎吧,js引擎其实是用来做类似于APP的一种 HTML所要用到的技术,我们将很多HTML打包形成一个类似于APP的东西,这种APP的好处是一个版本 既可以在Android上使用也...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,582
精华内容 9,432
关键字:

js引擎