前言

先说几句

基础不牢，地动山摇。切忌JS没学好就盲目搞一些框架，追一些潮流，纯属舍本逐末。
JS写起来容易，掌握很难。之前贪快，潦潦草草的看书看视频写代码，以为自己会了，其实并不知其所以然，现在又来返工了
慢慢学，比较快。学习一定要踏实。代码是记忆也是肌肉记忆，要多练习。

JavaScript代码如何起作用的

JavaScript是高级程序语言，计算机不能直接读懂，需要解释器或者编译器将其翻译成计算机能看懂的机器码才能执行。JavaScript引擎能够“读懂”JavaScript代码，并准确地给出代码运行结果。如let a = 1 + 1; JavaScript引擎的作用就是（解析）这行代码，并且将a的值变为3。

对于编译型语言来说（如Java、C++、C），处理上述这些事情的叫编译器（Compiler），相应地对于JavaScript这样解释型语言则叫解释器（Interpreter）

编译器是将源代码编译为另外一种代码（比如机器码，或者字节码）
解释器是直接解析并将代码运行结果输出

解释型语言：JavaScript, python
程序不需要提前编译，运行的过程中才用解释器编译成机器语言，边编译边执行

跨平台性能好（根据平台不同生成不同的机器码）

执行效率低（现场编译，再执行）

编译型语言：C, C++
需要先编译成另一种代码（机器码/字节码）存储在.exe文件中，再执行

执行效率高（直接执行编译好的文件）

跨平台性能差（编译好的文件有平台限制，不同CPU不一样）

V8引擎

V8是用C ++编写的Google开源高性能JavaScript引擎。JavaScript虽然是解释型的语言，但是很难界定JavaScript引擎到底算是解释器还是编译器。为了提高运行性能，在运行之前会先将JavaScript编译为字节码，然后再去执行字节码（这样速度就快很多，字节码比机器码简洁，占浏览器内存也少），这种将解释器和编译器功能结合的方式叫做即时编译Just-in-time Compiler。V8的工作原理如下：

Parse模块会将JavaScript代码转换成AST
因为解释器并不直接认识JavaScript代码。如果函数没有被调用，那么是不会被转换成AST的。PreParse（预解析）并不是一开始所有代码都需要执行，所以V8引擎就实现了Lazy Parsing（延迟解析）的方案，它的作用是将不必要的函数进行预解析，也就是只解析暂时需要的内容，而对函数的全量解析是在函数被调用时才会进行；
Ignition是一个解释器，会将AST转换成ByteCode
同时会收集TurboFan优化所需要的信息（比如函数参数的类型信息，有了类型才能进行真实的运算）；如果函数只调用一次，Ignition会执行解释执行ByteCode；
TurboFan是一个编译器，可以将字节码编译为CPU可以直接执行的机器码
如果一个函数被多次调用，那么就会被标记为热点函数，那么就会经过TurboFan转换成优化的机器码，提高代码的执行性能；但是，机器码实际上也会被还原为ByteCode，这是因为如果后续执行函数的过程中，类型发生了变化（比如sum函数原来执行的是 number类型，后来执行变成了string类型），之前优化的机器码并不能正确的处理运算，就会逆向的转换成字节码。

JS引擎和渲染引擎的关系

在浏览器中输入网址（例如www.baidu.com），域名服务器会查找该域名对应的IP地址，并发起网络请求，服务器返回挂载静态资源文件夹中的相应文件index.html
浏览器拿到index.html后，从上到下解析代码，遇到<link>标签就去请求.css资源，遇到<script>标签就去请求.js资源
浏览器内核包括JS引擎和渲染引擎。其中JS引擎负责将JS代码转换成CPU可以看懂的机器码，并执行，从而对DOM进行更改。渲染引擎中HTML Parser将HTML转化为DOM树，CSS Parser将CSS转化为Style Rules。之后将Style Rules和DOM树结合为Render树。进行排版布局，最后绘制出来。

深入浅出JS—01 V8引擎与浏览器内核相关推荐

浏览器原理-v8引擎-js执行原理
浏览器原理-v8引擎-js执行原理 js简介 js应用: js的应用很广泛可以应用于web,移动端,小程序,桌面应用,后端开发等 web开发包括(原生js,react,vue,angular等) 移 ...
浏览器内核、排版引擎、js引擎
[定义] 浏览器最重要或者说核心的部分是"Rendering Engine",可大概译为"渲染引擎",不过我们一般习惯将之称为"浏览器内核" ...
浏览器内核及js引擎
找到一篇好文,mark一下: http://www.cnblogs.com/xiyangbaixue/archive/2014/10/22/4042548.html 摘要: 面试一个大公司的时候问到了 ...
浏览器内核与js引擎
浏览器内核与js渲染引擎: 简介: 在维基百科上是这样介绍浏览器内核的,网页浏览器的排版引擎(Layout Engine或Rendering Engine)也被称为浏览器内核.页面渲染引擎或模板引擎, ...
浏览器内核和js引擎
摘要: 面试一个大公司的时候问到了一个问题,让我谈谈主要的浏览器内核以及他们的特点,当时并没有详细的回答,回来之后自己在网上找了找资料,总结了下分享给大家. 简介: 在维基百科上是这样介绍浏览器内核的 ...
浏览器内核、渲染引擎、x86与RAM架构等基本概念
什么是浏览器内核负责对网页语法的解释(如HTML.JavaScript)并渲染显示网页. 浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine ...
浏览器执行原理、V8引擎
前言对一个前端而言,思考JS在浏览器中如何被执行非常重要.笔者是通过codewhy的课程进行学习的,首先感谢codewhy. 浏览器的功能浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示您 ...
【读书笔记】【WebKit 技术内幕（一）】浏览器架构与浏览器内核；chromium、webkit和blink的渲染过程；chromium、webkit的架构与代码结构；webkit2架构
文章目录前言 Something great 第1章浏览器和浏览器内核浏览器用户代理和浏览器行为内核特征 WebKit与blink 第2章 HTML网页和结构网页构成与结构 WebKit的 ...
浏览器渲染与浏览器内核相关杂谈
简介之前对浏览器渲染,js加载这些一直一知半解,这回查阅了很多资料,又看了本浏览器内核介绍的书,终于对浏览器的渲染过程和浏览体系有了一个整体的了解.下面从几个方面介绍一下浏览器内核和渲染过程. 浏览 ...

深入浅出JS—01 V8引擎与浏览器内核

前言

JavaScript代码如何起作用的

V8引擎

JS引擎和渲染引擎的关系

深入浅出JS—01 V8引擎与浏览器内核相关推荐

最新文章

热门文章