浏览器工作原理与实践
李兵
前盛大创新院高级研究员
立即订阅
6167 人已学习
课程目录
已完结 42 讲
0/4登录后,你可以任选4讲全文学习。
开篇词 (1讲)
开篇词 | 参透了浏览器的工作原理,你就能解决80%的前端难题
免费
宏观视角下的浏览器 (6讲)
01 | Chrome架构:仅仅打开了1个页面,为什么有4个进程?
02 | TCP协议:如何保证页面文件能被完整送达浏览器?
03 | HTTP请求流程:为什么很多站点第二次打开速度会很快?
04 | 导航流程:从输入URL到页面展示,这中间发生了什么?
05 | 渲染流程(上):HTML、CSS和JavaScript,是如何变成页面的?
06 | 渲染流程(下):HTML、CSS和JavaScript,是如何变成页面的?
浏览器中的JavaScript执行机制 (5讲)
07 | 变量提升:JavaScript代码是按顺序执行的吗?
08 | 调用栈:为什么JavaScript代码会出现栈溢出?
09 | 块级作用域:var缺陷以及为什么要引入let和const?
10 | 作用域链和闭包 :代码中出现相同的变量,JavaScript引擎是如何选择的?
11 | this:从JavaScript执行上下文的视角讲清楚this
V8工作原理 (3讲)
12 | 栈空间和堆空间:数据是如何存储的?
13 | 垃圾回收:垃圾数据是如何自动回收的?
14 | 编译器和解释器:V8是如何执行一段JavaScript代码的?
浏览器中的页面循环系统 (6讲)
15 | 消息队列和事件循环:页面是怎么“活”起来的?
16 | WebAPI:setTimeout是如何实现的?
17 | WebAPI:XMLHttpRequest是怎么实现的?
18 | 宏任务和微任务:不是所有任务都是一个待遇
19 | Promise:使用Promise,告别回调函数
20 | async/await:使用同步的方式去写异步代码
浏览器中的页面 (8讲)
21 | Chrome开发者工具:利用网络面板做性能分析
22 | DOM树:JavaScript是如何影响DOM树构建的?
23 | 渲染流水线:CSS如何影响首次加载时的白屏时间?
24 | 分层和合成机制:为什么CSS动画比JavaScript高效?
25 | 页面性能:如何系统地优化页面?
26 | 虚拟DOM:虚拟DOM和实际的DOM有何不同?
27 | 渐进式网页应用(PWA):它究竟解决了Web应用的哪些问题?
28 | WebComponent:像搭积木一样构建Web应用
浏览器中的网络 (3讲)
29 | HTTP/1:HTTP性能优化
30|HTTP/2:如何提升网络速度?
31|HTTP/3:甩掉TCP、TLS 的包袱,构建高效网络
浏览器安全 (5讲)
32 | 同源策略:为什么XMLHttpRequest不能跨域请求资源?
33 | 跨站脚本攻击(XSS):为什么Cookie中有HttpOnly属性?
34 | CSRF攻击:陌生链接不要随便点
35 | 安全沙箱:页面和系统之间的隔离墙
36 | HTTPS:让数据传输更安全
结束语 (1讲)
结束语 | 大道至简
课外加餐 (4讲)
加餐一|浏览上下文组:如何计算Chrome中渲染进程的个数?
加餐二|任务调度:有了setTimeOut,为什么还要使用rAF?
加餐三|加载阶段性能:使用Audits来优化Web性能
加餐四|页面性能工具:如何使用Performance?
浏览器工作原理与实践
登录|注册

14 | 编译器和解释器:V8是如何执行一段JavaScript代码的?

李兵 2019-09-05
前面我们已经花了很多篇幅来介绍 JavaScript 是如何工作的,了解这些内容能帮助你从底层理解 JavaScript 的工作机制,从而能帮助你更好地理解和应用 JavaScript。
今天这篇文章我们就继续“向下”分析,站在 JavaScript 引擎 V8 的视角,来分析 JavaScript 代码是如何被执行的。
前端工具和框架的自身更新速度非常块,而且还不断有新的出现。要想追赶上前端工具和框架的更新速度,你就需要抓住那些本质的知识,然后才能更加轻松地理解这些上层应用。比如我们接下来要介绍的 V8 执行机制,能帮助你从底层了解 JavaScript,也能帮助你深入理解语言转换器 Babel、语法检查工具 ESLint、前端框架 Vue 和 React 的一些底层实现机制。因此,了解 V8 的编译流程能让你对语言以及相关工具有更加充分的认识。
要深入理解 V8 的工作原理,你需要搞清楚一些概念和原理,比如接下来我们要详细讲解的编译器(Compiler)、解释器(Interpreter)、抽象语法树(AST)、字节码(Bytecode)、即时编译器(JIT)等概念,都是你需要重点关注的。

编译器和解释器

之所以存在编译器和解释器,是因为机器不能直接理解我们所写的代码,所以在执行程序之前,需要将我们所写的代码“翻译”成机器能读懂的机器语言。按语言的执行流程,可以把语言划分为编译型语言和解释型语言。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《浏览器工作原理与实践》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(39)

  • 不将就
    重复看之前的文章,受益良多,在此表示感谢!
    不过有几个疑问,老师有空的解答下哈!

    问题一: 渲染进程里的input标签上传图片,通过与浏览器主进程通信,主进程读取硬磁盘图片数据返回给渲染进程,渲染进程里的js发起ajax请求,是通过浏览器主进程去调用网络进程发起请求,还是渲染进程可以直接调用网络进程发起请求?

    问题二: 请求长时间处于pending状态或者脚本执行死循环,这时刷新或前进后退页面不响应,刷新或前进后退页面是属于浏览器主进程的UI交互行为,为什么渲染进程里的js引擎执行会影响到主进程?

    问题三:
    function fn(){

    var a =10

    function f1(){

    console.log(a)

    };

    function f2(){

    console.log('f2')

    };

    f2();

    };

    fn();

    我在函数f2里打断点,当执行到函数f2时,chrome里显示Closure:{a:10},如果把这个原因解释为在fn函数里会预扫描f1函数,那我现在把fn2函数和调用都注释了,现在执行fn函数时不产生Closure,为什么就不预扫描f1函数了?这是为什么?


    作者回复:
    第一个问题:
    xmlhttprequest 可以直接走网络进程,不需要浏览器进程介入

    第二个问题:
    因为前进或者后退也需要执行当前页面脚本啊,比如要执行beforeunload事件,执行的时候页面没响应了,所以前进后退也就失效了

    第三个问题:
    你把f2注释了,当执行fn函数时,照样会预扫描f1,照样会产生闭包,只不过当fn执行结束之后,闭包的内容没有外部引用,那么下次垃圾回收直接把比闭包的内容回收掉

    2019-09-05
    21
  • Rapheal
    老师,编译的基本单位是一段JS代码(内敛JS)或者一个JS文件吗(还是以当前调用栈将要执行函数为单位)?

    作者回复: 全局代码,或者函数 !

    比如下载完一个js文件,先编译这个js文件,但是js文件内定义的函数是不会编译的。

    等调用到该函数的时候,Javascript引擎才会去编译该函数!

    2019-09-09
    3
    7
  • 钟钟
    执行时间越长,执行效率越高。是因为更多的代码成为热点代码之后,转为了机器码来执行吗?

    作者回复: 是的

    2019-09-08
    1
    5
  • Hurry
    从本文中明确的应该是在写代码的时候,如何让代码易于被 TurboFan 优化,减少反优化,老师提到的 hiddenClass 等我觉得大家还是有必要了解一下, 大家可以尝试使用 node 加选项 --trace-opt 跑代码体验一下 TurboFan 如何做优化,就会有很直观的感受 https://github.com/hjzheng/performance-test/blob/master/v8/addFunction.js
    2019-09-07
    2
  • 李懂
    怎么都需要字节码文件,为啥,jsvaScript不像java一样先编译为字节码,这样执行效率不就高了么!

    作者回复: 你可以认为WebAssembly就是,WebAssembly经过TuboFan处理下就能执行了

    2019-09-05
    2
  • 刹那
    想到一个问题,可以把代码预先编译成字节码吗?这样浏览器下载了就能直接运行
    2019-10-22
    2
    1
  • Cris
    既然v8用到了编译器 可否认为js也得门编译型语言
    2019-10-02
    1
    1
  • GY
    前面第7和第12讲,变量提升说js的执行过程,是有编译过程的,变量提升就发生在编译过程,经过编译后,会生成两部分内容,执行上下文和可执行代码,但是在这一讲中,却并没有编译过程,在AST生成后,解释器就开始执行生成字节码执行了,这几讲的内容有点互相冲突,那么详细的过程到底是怎样的呢
    我在查看其它资料,出现了预编译这个名词,这个又怎么解释呢
    希望能解答下

    作者回复:
    你可以把JavaScript的编译看成了部分:

    第一部分从一段JavaScript代码编译到字节码,然后解释器解释执行字节码!

    第二部分深度编译,将活跃的字节码编译成二进制,然后直接执行二进制。

    无论哪个阶段都需要编译。

    2019-09-27
    1
  • Geek_177f82
    问一个基础的问题。希望老师解答。编译器编译后的二进制文件,与解析器解析后机器码是一个东西吗?
    2019-09-16
    1
    1
  • tick
    字节码逐条解释执行变成机器码,这个怎么理解呀?(V8 执行一段代码流程图)
    2019-09-06
    1
    1
  • Geek_Jamorx
    我想提一个问题,V8解析后的字节码或热节点的机器码是存在哪的,是以缓存的形式存储的么?和浏览器三级缓存原理的存储位置比如内存和磁盘有关系么?
    最近面试有被问到,没答上来。。希望老师回答,十分感谢~
    2019-09-05
    7
    1
  • Marvin
    我理解,V8执行越久,被编译成机器码的热点代码就越多,所以整体执行效率就越高。如果是这样的话,那么V8内存占用也会越来越多,会面临的问题会和

    作者回复: 引入了字节码,就有弹性空间了,可以在内存和执行速度之间做调节。

    相比之前的V8,将JS代码全部编译成字节码,这种模式就没有协商的空间了!

    2019-09-05
    1
  • peter
    两个问题:1 “这段代码经过javascript-ast站点处理后",此句中“站点”对吗?2 Vue和React、bootstrap都是用于移动端开发吗? 我开发PC端网页可以用吗?如果不能用,那PC端开发用什么前端框架?

    作者回复: 第一个:站点就是文章中连接的地址,你可以手动操作下,直观感受下ast!

    第二个:vue react 移动端和PC都适用的,现在都是响应式开发了,同一套框架可以适应很多平台

    2019-09-05
    1
    1
  • 小兵
    避免大的内联脚本,因为在解析 HTML 的过程中,解析和编译也会占用主线程;这句话可以理解为解析HTML代码的时候需要解析内联代码,而放到js文件的时候不需要吗?
    另外思考题应该是执行越久,热点代码越多,即时编译的作用越大。

    作者回复: 只要是同步脚本都会阻塞,这里我可能没说清楚。

    我的表达的以上是同步脚本尽量小,尽量能内联。

    其它的尽量采用异步脚本,如使用aysnc和defer。
     

    2019-09-05
    1
    1
  • 七月有风
    老师,你好,node 的 JavaScript 引擎是 V8, ReactNative 和 Android webview 的 JavaScript 引擎是V8引擎吗?
    2019-12-07
  • -_-_aaa
    机器码是cpu的运算器可以直接识别的吗?运算器内部是01010110101这样执行的吗
    2019-12-05
    1
  • -_-_aaa
    解释器的字节码和编译器的中间代码有什么区别?它们都是经过AST词意分析得到的。
    2019-12-05
  • -_-_aaa
    ‘Babel 的工作原理就是先将 ES6 源码转换为 AST,然后再将 ES6 语法的 AST 转换为 ES5 语法的 AST,最后利用 ES5 的 AST 生成 JavaScript 源代码’,关于这句话,我怎么感觉babel应该是先将ES6转成ES5,再将ES5转换成AST。
    2019-12-05
  • Bazinga
    总结说:V8 依据 JavaScript 代码生成 AST 和执行上下文,再基于 AST 生成字节码,然后通过解释器执行字节码,通过编译器来优化编译字节码。但是第二节生成字节码那一段 说:解释器 Ignition 就登场了,它会根据 AST 生成字节码,并解释执行字节码。还有即时编译(JIT)技术那张图片,看起来也是先生成字节码 再经过解释器 。 所以字节码是解释器生成的吗?我都看懵了,求解答。

    作者回复: 流程是这样的:

    v8先生成ast!

    然后ignition根据ast生成字节码。

    在然后ignition解释执行字节码。

    所以ignition生成了字节码并解释执行字节码。

    2019-11-28
    1
  • Bazinga
    字节码被解释执行会变成机器码吗?没看明白
    2019-11-28
收起评论
39
返回
顶部