浏览器工作原理与实践
李兵
前盛大创新院高级研究员
立即订阅
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?
浏览器工作原理与实践
登录|注册

07 | 变量提升:JavaScript代码是按顺序执行的吗?

李兵 2019-08-20
讲解完宏观视角下的浏览器后,从这篇文章开始,我们就进入下一个新的模块了,这里我会对 JavaScript 执行原理做深入介绍。
今天在该模块的第一篇文章,我们主要讲解执行上下文相关的内容。那为什么先讲执行上下文呢?它这么重要吗?可以这么说,只有理解了 JavaScrip 的执行上下文,你才能更好地理解 JavaScript 语言本身,比如变量提升、作用域和闭包等。不仅如此,理解执行上下文和调用栈的概念还能助你成为一名更合格的前端开发者。
不过由于我们专栏不是专门讲 JavaScript 语言的,所以我并不会对 JavaScript 语法本身做过多介绍。本文主要是从 JavaScript 的顺序执行讲起,然后一步步带你了解 JavaScript 是怎么运行的
接下来咱们先看段代码,你觉得下面这段代码输出的结果是什么?
showName()
console.log(myname)
var myname = '极客时间'
function showName() {
console.log('函数showName被执行');
}
使用过 JavaScript 开发的程序员应该都知道,JavaScript 是按顺序执行的。若按照这个逻辑来理解的话,那么:
当执行到第 1 行的时候,由于函数 showName 还没有定义,所以执行应该会报错;
同样执行第 2 行的时候,由于变量 myname 函数也未定义,所以同样也会报错。
然而实际执行结果却并非如此, 如下图:
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《浏览器工作原理与实践》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(55)

  • lane
    老师,head头部引入的js文件,也是先编译的吗?

    作者回复: 我先来解释下页面在含有JavaScript的情况下DOM解析流程,然后再来解释你这个问题。

    当从服务器接收HTML页面的第一批数据时,DOM解析器就开始工作了,在解析过程中,如果遇到了JS脚本,如下所示:
    <html>
        <body>
            极客时间
            <script>
            document.write("--foo")
            </script>
        </body>
    </html>
    那么DOM解析器会先执行JavaScript脚本,执行完成之后,再继续往下解析。

    那么第二种情况复杂点了,我们内联的脚本替换成js外部文件,如下所示:
    <html>
        <body>
            极客时间
            <script type="text/javascript" src="foo.js"></script>
        </body>
    </html>
    这种情况下,当解析到JavaScript的时候,会先暂停DOM解析,并下载foo.js文件,下载完成之后执行该段JS文件,然后再继续往下解析DOM。这就是JavaScript文件为什么会阻塞DOM渲染。

    我们再看第三种情况,还是看下面代码:
    <html>
        <head>
            <style type="text/css" src = "theme.css" />
        </head>
        <body>
            <p>极客时间</p>
            <script>
                let e = document.getElementsByTagName('p')[0]
                e.style.color = 'blue'
            </script>
        </body>
    </html>
    当我在JavaScript中访问了某个元素的样式,那么这时候就需要等待这个样式被下载完成才能继续往下执行,所以在这种情况下,CSS也会阻塞DOM的解析。

    所以这时候如果头部包含了js文件,那么同样也会暂停DOM解析,等带该JavaScript文件下载后,便开始编译执行该文件,执行结束之后,才开始继续DOM解析。

    2019-08-20
    3
    36
  • mfist
    输出1

    编译阶段:
    var showName
    function showName(){console.log(1)}

    执行阶段:
    showName()//输出1
    showName=function(){console.log(2)}
    //如果后面再有showName执行的话,就输出2因为这时候函数引用已经变了

    作者回复: 完全没问题,这个可以做参考答案!

    2019-08-20
    2
    31
  • 爱吃锅巴的沐泡
    答案:1

    编译阶段:
    var showName = undefined
    function showName() {console.log(1)}

    执行阶段:
    showName() //输出1
    showName = function() {console.log(2)}

    分析:首先遇到声明的变量showName,并在变量环境中存一个showName属性,赋值为undefined; 又遇到声明的函数,也存一个showName的属性,但是发现之前有这个属性了,就将其覆盖掉,并指向堆中的声明的这个函数地址。所以在执行阶段调用showName()会输出1;执行showName = function() {console.log(2)}这句话是把堆中的另一个函数地址赋值给了showName属性,也就改变了其属性值,所以如果再调用showName(),那个会输出2. 这是不是体现了函数是对象,函数名是指针。

    疑问:如果同名的变量和函数名,变量环境中是分别保存还是如何处理的?

    作者回复: 下面是关于同名变量和函数的两点处理原则:

    1:如果是同名的函数,JavaScript编译阶段会选择最后声明的那个。

    2:如果变量和函数同名,那么在编译阶段,变量的声明会被忽略

    2019-08-20
    22
  • shezhenbiao
    老师好,请教您一个问题。
    debugger;
    (function(){
        console.log(g)
        if(true){
            console.log('hello world');
            function g(){ return true; }
        }
    })();
    这个函数步进调试时,发现打印g时值是undefined而不是提示not defined,说明if中g函数确实是提升了,但是为何不是g()而是undefined?然后走完function g(){ return true; }这一步后 console.log(g)中的g才变为g()。这里条件声明函数的变量提升有点搞不明白。

    作者回复:

    ES规定函数只不能在块级作用域中声明,
    function foo(){
        if(true){
            console.log(&#39;hello world&#39;);
            function g(){ return true; }
        }
    }
    也就是说,上面这行代码执行会报错,但是个大浏览器都没有遵守这个标准。

    接下来到了ES6了,ES6明确支持块级作用域,ES6规定块级作用域内部声明的函数,和通过let声明变量的行为类似。

    规定的是理想的,但是还要照顾实现,要是完全按照let的方式来修订,会影响到以前老的代码,所以为了向下兼容,个大浏览器基本是按照下面的方式来实现的:

    function foo(){
        if(true){
            console.log(&#39;hello world&#39;);
            var g = function(){return true;}
        }
    }

    这就解释了你的疑问,不过还是不建议在块级作用域中定义函数,很多时候,简单的才是最好的。

    2019-08-25
    16
  • William
    老师,如果把两个函数调换个儿。那么先声明function,然后把 showName 赋值 undefined,undefined不会覆盖函数声明。这是为什么?

    console.log(showName.toString())
    function showName() {
        console.log(1)
    }
    var showName = function() {
      console.log(2)
    }

    打印的是函数体,而非undefined,证明 undefined 不会覆盖函数声明!!

    作者回复: 对 是这样的,下面是关于同名变量和函数的两点处理原则:

    1:如果是同名的函数,JavaScript编译阶段会选择最后声明的那个。

    2:如果变量和函数同名,那么在编译阶段,变量的声明会被忽略。

    2019-08-21
    6
    13
  • he
    函数提升要比变量提升的优先级要高一些,且不会被变量声明覆盖,但是会被变量赋值之后覆盖。

    作者回复: 对

    2019-08-21
    1
    9
  • 林展翔
    老师,可以请教下吗,在编译完成之后是单单生成了字节码,再到执行过程中变成对应平台的机器码? 还是编译过程已经生成了对应平台的机器码, 执行阶段就直接去执行相应的机器码?

    作者回复: 先是生成字节码,然后解释器可以直接执行字节码,输出结果。 但是通常Javascript还有个编译器,会把那些频繁执行的字节码编译为二进制,这样那些经常被运行的函数就可以快速执行了,通常又把这种解释器和编译器混合使用的技术称为JIT

    2019-08-20
    9
  • 林高鸿
    老师,ES6 后不用 var,所以可否理解 Hoisting 为“权宜之计/设计失误”呢?

    作者回复:
    你也可以理解为涉及失误,因为设计之初的目的就是想让网页动起来,JavaScript创造者Brendan Eich并没有打算把语言设计太复杂。

    所以只引入了函数级作用域和全局作用域,一些快级作用域都被华丽地忽略掉了。

    这样如果变量或者函数在if块,while块里面,因为他们没有作用域,所以在编译阶段,就干脆把这些变量和函数提升到开头,这样设计语言的复杂性就大大降低了,但是这也埋下了混乱的种子。

    随着JavaScript的流行,人们发现问题越来越多,中间的历史就展开了,最终推出了es6,在语言层面做了非常大的调整,但是为了保持想下兼容,就必须新的规则和旧的规则都同时支持,这样也导致了语言层面不必要的复杂性。

    虽然JavaScript语言本身问题很多,但是它已经是整个开发生态中的不可或缺的一环了,因此,不要因为它的问题多就不想去学它,我认为判断要学不学习一门语言要看所能产生的价值,JavaScript就这样一门存在很多缺陷却是非常有价值的语言。

    2019-08-20
    7
  • 林展翔
    x = 10 + 20;
    console.log(x);
    若对 x 未进行定义, 直接赋值, 可以输出
    若按照课程理解并假设
    编译阶段会有一个
    x = undefine
    但是
    console.log(x);
    x = 10 + 20;
    console.log(x);
    会出现报错 x is not defined
    在这个地方 我的理解有什么问题吗 还是说 原来就没有 x = undefine 操作, 只是在 x = 10 + 20; 给 x 赋值了一下.

    作者回复: 需要通过 var x 声明才会在编译期间提升

    2019-08-20
    2
    5
  • Luke
    当从服务器接收HTML页面的第一批数据时,DOM解析器就开始工作了,在解析过程中,如果遇到了JS脚本,如下所示:
    <html>
        <body>
            极客时间
            <script>
            document.write("--foo")
            </script>
        </body>
    </html>
    那么DOM解析器会先执行JavaScript脚本,执行完成之后,再继续往下解析。

    那么第二种情况复杂点了,我们内联的脚本替换成js外部文件,如下所示:
    <html>
        <body>
            极客时间
            <script type="text/javascript" src="foo.js"></script>
        </body>
    </html>
    这种情况下,当解析到JavaScript的时候,会先暂停DOM解析,并下载foo.js文件,下载完成之后执行该段JS文件,然后再继续往下解析DOM。这就是JavaScript文件为什么会阻塞DOM渲染。

    我们再看第三种情况,还是看下面代码:
    <html>
        <head>
            <style type="text/css" src = "theme.css" />
        </head>
        <body>
            <p>极客时间</p>
            <script>
                let e = document.getElementsByTagName('p')[0]
                e.style.color = 'blue'
            </script>
        </body>
    </html>
    当我在JavaScript中访问了某个元素的样式,那么这时候就需要等待这个样式被下载完成才能继续往下执行,所以在这种情况下,CSS也会阻塞DOM的解析。

    所以这时候如果头部包含了js文件,那么同样也会暂停DOM解析,等带该JavaScript文件下载后,便开始编译执行该文件,执行结束之后,才开始继续DOM解析。
    -------------

    老师,最后一种情况,如果js中没有访问元素的样式,那么js还要继续等待CSS 加载解析完成吗?在这种情况下,chrome 和firefox 的处理是不是不太一样?chrome 会并行加载解析css,而firefox 会等待css加载解析完成后再执行js?
    2019-09-09
    2
  • 杨陆伟
    showName()
    function showName(){
        console.log(1)
    }
    var showName=function(){
        console.log(2)
    }
    showName()

    第二个showName打印为2,为什么这个showName找的是变量而不是函数,或者此时变量环境中已经没有了showName函数,只有showName变量?谢谢

    作者回复: 是的,变量环境中只保存一个

    2019-08-20
    2
    2
  • YBB
    老师我想问下,一段javascript代码进入编译阶段是会对函数体内的代码也进行编译,还是只是将函数体的代码存储在堆,在执行中遇到该函数再去编译?

    作者回复: 记住一点就行:函数只有在调用的时候才会被编译。

    2019-08-26
    1
  • 张峰
    showName函数的编译是在什么时候呢

    作者回复: 调用的时候,08节有介绍

    2019-08-23
    1
  • 子非鱼
    // application.js
    $(function() {
      utils.log('Ready');
    });
    // utils.js
    window.utils = {
      log: function() {
        if (window.console) console.log.apply(console, arguments);
      }
    };
    <script src ="application.js"></script>
    <script src ="util.js"></script>

    一本书上说这段js代码在页面被缓存时候会出现问题,我的理解是即便util被缓存,不也要等到它执行完成再触发domcontentloaded事件吗?所以不会出问题
    2019-08-22
    1
  • 子非鱼
    老师我有个问题,正常情况domcontentloaded事件是在浏览器下载并解析完html才触发,如果有内嵌外部js文件,也要等到js加载并执行完才触发。但如果页面是被二次访问并且html和引入的外部js都命中了缓存,则是否也要等到js被完全执行才触发呢?

    作者回复: 需要的,因为不管是否缓存了,都需要执行JS

    2019-08-22
    1
  • A6六个周
    通过这篇文章我学到了一个知识点:
    清楚 了JavaScript 的执行机制:先编译,再执行。
    2019-08-20
    1
  • leitong
    一、
    showName()
    var showName = function() {
        console.log(2)
    }
    function showName() {
        console.log(1)
    }
    编译阶段,第一个showName存入变量环境中,自动赋值undefined
    第二个showName函数体也存入了变量环境中,但是是一个完整的函数声明赋值
    执行阶段,Javacript引擎从变量环境中查找到showName函数体直接执行
    输出结果:1

    作者回复: 没问题

    2019-08-20
    1
  • leitong
    二、
    showName()
    function showName(){
        console.log(1)
    }
    var showName=function(){
        console.log(2)
    }
    showName()
    编译阶段,showName函数体存入变量环境
    showName变量存入变量环境,赋值undefined
    执行阶段,第一个showName()查找到函数体直接执行
    输出结果:1
    执行到第二个showName()时,showName变量已经赋值了function(){console.log(2)}
    输出结果:2

    作者回复: 不过第二个语句仅仅是赋值操作,函数并没有执行,所以不会输出2的

    2019-08-20
    2
    1
  • coder
    请教老师一个问题。结合后面的课程《14 | 编译器和解释器:V8是如何执行一段JavaScript代码的?》,这个变量提升,是在哪个阶段完成的呢?是源代码到AST阶段,还是AST阶段到字节码阶段呢?还是会把变量提升看成是热点代码,编译成了机器码?
    2019-12-11
  • -_-_aaa
    '先是生成字节码,然后解释器可以直接执行字节码,输出结果。'我记忆中V8引擎好像比以前的更快一些,直接二进制

    作者回复: v8最开始是直接生成二进制,后面在移动设备上暴露了出来了很多问题,所以又改成先生成中间的字节码,在基于字节码直接!

    2019-12-02
    1
收起评论
55
返回
顶部