• <sub id="h4knl"><ol id="h4knl"></ol></sub>
    <sup id="h4knl"></sup>
      <sub id="h4knl"></sub>

      <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
      1. <strong id="h4knl"></strong>

      2. 淺談JavaScript的執(zhí)行順序

        時(shí)間:2024-08-16 09:47:02 JavaScript 我要投稿
        • 相關(guān)推薦

        淺談JavaScript的執(zhí)行順序

          雖然現(xiàn)代瀏覽器可以并行的下載JavaScript(部分瀏覽器),但考慮到JavaScript的依賴關(guān)系,他們的執(zhí)行依然是按照引入順序進(jìn)行的。

          本文章記錄本人在學(xué)習(xí) JavaScript 中看書理解到的一些東西,加深記憶和并且整理記錄下來,方便之后的復(fù)習(xí)。

          在 html 文檔中的執(zhí)行順序

          js代碼執(zhí)行順序比較的形象,用戶可以直觀的感受這種執(zhí)行順序。但是,js代碼的執(zhí)行順序是比較復(fù)雜的。有時(shí)候我們會(huì)把js代碼寫在html里面,而html文檔在瀏覽器中解析的過程是這樣:瀏覽器按照文檔流從上到下逐步解析頁(yè)面結(jié)構(gòu)和信息。js代碼作為嵌入的腳本也算做html文檔的組成部分,因此,js代碼在裝載時(shí)的執(zhí)行順序也是根據(jù)腳本標(biāo)簽

          的出現(xiàn)來順序來決定。(下面一個(gè)栗子)  console.log("頂部腳本");

          console.log("頭部腳本");

          console.log("頁(yè)面腳本");

          console.log("底部腳本");

          還有對(duì)于通過腳本標(biāo)簽

          的src屬性導(dǎo)入的外部js文件腳本,它也將按照其語(yǔ)句出現(xiàn)的順序來執(zhí)行,而且執(zhí)行過程是文檔裝載的一部分,不會(huì)因?yàn)槭峭獠縥s文件而延期執(zhí)行。  // 先加載 b.js 并且執(zhí)行里面的代碼

          // 然后在按順序執(zhí)行下面的代碼

          console.log(1);

          預(yù)編譯

          當(dāng)js引擎解析的時(shí)候,它會(huì)在預(yù)編譯對(duì)所有聲明的變量和函數(shù)進(jìn)行處理。

          變量提升

          console.log(a); // undefinedvar a = 1;console.log(a); // 1

          預(yù)解析函數(shù)

          f(); // 1function f() {  console.log(1);};

          詳細(xì):javascript變量聲明提升(hoisting)

          分塊執(zhí)行代碼

          js是按塊執(zhí)行代碼的,所謂代碼塊就是使用

          標(biāo)簽分隔的代碼段。(下面一個(gè)栗子)  // 代碼段1  var a = 1;

          // 代碼段2  function f() {    console.log(1);  };

          因?yàn)閖s是按代碼塊來執(zhí)行的。瀏覽器在解析html文檔流的時(shí)候,如果遇到一個(gè)

          標(biāo)簽,則js會(huì)等到這個(gè)代碼塊都加載完之后再對(duì)代碼進(jìn)行預(yù)編譯,然后在執(zhí)行。執(zhí)行完畢后,瀏覽器會(huì)繼續(xù)解析西門的html文檔流,同時(shí)js也準(zhǔn)備好處理下一個(gè)代碼塊。  有個(gè)小坑,由于js是按塊執(zhí)行的,因此在一個(gè)js塊中調(diào)用后面塊聲明的變量或者函數(shù)就會(huì)提示語(yǔ)法錯(cuò)誤。但是不同塊都屬于一個(gè)全局作用域,也就是說,塊之間的變量和函數(shù)是可以共享的。(下面一個(gè)栗子)  // 代碼段1  console.log(a);  f();

          // 代碼段2  var a = 1;  function f() {    console.log(1);  };

          由于js是按塊處理代碼,同時(shí)又遵循h(huán)tml文檔流的解析順序,因此在上面的栗子中會(huì)看到語(yǔ)法錯(cuò)誤。但是,在文檔流加載完畢后再次訪問就不會(huì)出現(xiàn)這種錯(cuò)誤了。(下面一個(gè)栗子)

          window.onload = function(){ // 頁(yè)面初始化事件處理函數(shù)    // 代碼段1    console.log(a);    f();  }

          // 代碼段2  var a = 1;  function f() {    console.log(1);  };

          還有為了安全起見,一般在頁(yè)面初始化完畢之后才允許js代碼執(zhí)行,這樣就可以避免一些網(wǎng)速對(duì)js執(zhí)行的影響。同時(shí),也避開了html文檔流對(duì)js執(zhí)行的限制。

          綜上所述,javascript在執(zhí)行時(shí)的步驟是:

          1、先讀入第一段代碼塊

          2、對(duì)代碼塊進(jìn)行語(yǔ)法分析,如果出現(xiàn)語(yǔ)法錯(cuò)誤,直接執(zhí)行第5步驟

          3、對(duì)var變量和function定義的函數(shù)進(jìn)行“預(yù)編譯處理”(賦值式函數(shù)是不會(huì)進(jìn)行預(yù)編譯處理的)

          4、執(zhí)行代碼塊,有錯(cuò)則報(bào)錯(cuò)

          5、如果還有下一段代碼塊,則讀入下一段代碼塊,重復(fù)步驟2

          6、結(jié)束

        【淺談JavaScript的執(zhí)行順序】相關(guān)文章:

        JavaScript函數(shù)的執(zhí)行過程09-20

        在Java中執(zhí)行JavaScript代碼07-14

        探尋Javascript執(zhí)行效率問題07-24

        JavaScript執(zhí)行效率與性能提升策略11-01

        淺談javascript中的單線程理解08-16

        淺談javascript深入理解js閉包07-01

        深入理解Javascript中自執(zhí)行匿名函數(shù)10-27

        淺談如何深入學(xué)習(xí)Javascript中的this關(guān)鍵字08-19

        javascript的方法08-09

        Javascript模板07-29

        国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码
      3. <sub id="h4knl"><ol id="h4knl"></ol></sub>
        <sup id="h4knl"></sup>
          <sub id="h4knl"></sub>

          <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
          1. <strong id="h4knl"></strong>

          2. 亚洲成国产人片在线观看 | 在线鲁鲁视频免费观看 | 偷拍一区二区三区 | 日本三级三少妇 | 日韩视频在线观看 | 五月天在线视频婷婷播放 |