非零基础自学前端最后一遍二 JavaScript基础 1 邂逅JavaScript 1.6 JavaScript的运行

一时失言乱红尘 2024-03-25 09:51 73阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  二 JavaScript基础
         *  1 邂逅JavaScript
         *   *  1.6 JavaScript的运行
             *   *  1.6.1 JavaScript由谁来运行？
                 *  1.6.2 认识JavaScript引擎
                 *  1.6.3 浏览器内核和JS引擎的关系

![在这里插入图片描述][a6e782bb4c84469aa0ed29ff8325570b.png_pic_center]

#### 二 JavaScript基础 ####

#### 1 邂逅JavaScript ####

##### 1.6 JavaScript的运行 #####

###### 1.6.1 JavaScript由谁来运行？ ######

*  我们经常会说：不同的浏览器有不同的内核组成
    
     *  Gecko：早期被Netscape和Mozilla Firefox浏览器浏览器使用；
     *  Trident：微软开发，被IE4~IE11浏览器使用，但是Edge浏览器已经转向Blink；
     *  Webkit：苹果基于KHTML开发、开源的，用于Safari，Google Chrome之前也在使用；
     *  Blink：是Webkit的一个分支，Google开发，目前应用于Google Chrome、Edge、Opera等；
     *  等等…
 *  事实上，我们经常说的浏览器内核指的是浏览器的排版引擎：
    
     *  排版引擎（layout engine），也称为浏览器引擎（browser engine）、页面渲染引擎（rendering engine）或样版引擎。
 *  那么，JavaScript代码由谁来执行呢？
    
     *  JavaScript引擎

###### 1.6.2 认识JavaScript引擎 ######

*  为什么需要JavaScript引擎呢？
    
     *  我们前面说过，高级的编程语言都是需要转成最终的机器指令来执行的；
     *  事实上我们编写的JavaScript无论你交给浏览器或者Node执行，最后都是需要被CPU执行的；
     *  但是CPU只认识自己的指令集，实际上是机器语言，才能被CPU所执行；
     *  所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行；
 *  比较常见的JavaScript引擎有哪些呢？
    
     *  SpiderMonkey：第一款JavaScript引擎，由Brendan Eich开发（也就是JavaScript作者）；
     *  Chakra：微软开发，用于IT浏览器；
     *  JavaScriptCore：WebKit中的JavaScript引擎，Apple公司开发；
     *  V8：Google开发的强大JavaScript引擎，也帮助Chrome从众多浏览器中脱颖而出；
     *  等等…

###### 1.6.3 浏览器内核和JS引擎的关系 ######

*  这里我们先以WebKit为例，WebKit事实上由两部分组成的：
    
     *  WebCore：负责HTML解析、布局、渲染等等相关的工作；
     *  JavaScriptCore：解析、执行JavaScript代码；
    
    ![在这里插入图片描述][2160c223eb13450da731d87ba3f60285.png_pic_center]
 *  小程序中也是这样的划分：
    
     *  在小程序中编写的JavaScript代码就是被JSCore执行的；
    
    ![在这里插入图片描述][33958dd814af4a5eb11eaf015ab15864.png_pic_center]

[a6e782bb4c84469aa0ed29ff8325570b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/1f00e563116847e78dad96b08a45c7a1.png
[2160c223eb13450da731d87ba3f60285.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/5e7ce8f402564af09866b10b15f46c00.png
[33958dd814af4a5eb11eaf015ab15864.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/7b8a5be14c5d4cd2a499bccc2c7ff0e1.png