閱讀(8.9k) 書簽贊(3) 我要糾錯(cuò)

JavaScript 瀏覽器環(huán)境概述

2018-07-24 11:52 更新

JavaScript代碼嵌入網(wǎng)頁(yè)的方法
script標(biāo)簽：代碼嵌入網(wǎng)頁(yè)
script標(biāo)簽：加載外部腳本
事件屬性
URL協(xié)議
script標(biāo)簽
工作原理
defer屬性
async屬性
腳本的動(dòng)態(tài)加載
加載使用的協(xié)議
瀏覽器的組成
渲染引擎
重流和重繪
JavaScript引擎
參考鏈接

JavaScript代碼嵌入網(wǎng)頁(yè)的方法

JavaScript代碼只有嵌入網(wǎng)頁(yè)，才能在用戶瀏覽器網(wǎng)頁(yè)時(shí)運(yùn)行。

網(wǎng)頁(yè)中嵌入JavaScript代碼，主要有四種方法。

<script>標(biāo)簽：代碼嵌入網(wǎng)頁(yè)
<script>標(biāo)簽：加載外部腳本
事件屬性：代碼寫入HTML元素的事件處理屬性，比如onclick或者onmouseover
URL協(xié)議：URL支持以javascript:協(xié)議的方式，執(zhí)行JavaScript代碼

后兩種方法用得很少，常用的是前兩種方法。由于內(nèi)容（HTML代碼）和行為代碼（JavaScript）應(yīng)該分離，所以第一種方法應(yīng)當(dāng)謹(jǐn)慎使用。

script標(biāo)簽：代碼嵌入網(wǎng)頁(yè)

通過<script>標(biāo)簽，可以直接將JavaScript代碼嵌入網(wǎng)頁(yè)。

<script>
  console.log('Hello World');
</script>

<script>標(biāo)簽有一個(gè)type屬性，用來(lái)指定腳本類型。對(duì)JavaScript腳本來(lái)說，type屬性可以設(shè)為兩種值。

text/javascript：這是默認(rèn)值，也是歷史上一貫設(shè)定的值。如果你省略type屬性，默認(rèn)就是這個(gè)值。對(duì)于老式瀏覽器，設(shè)為這個(gè)值比較好。
application/javascript：對(duì)于較新的瀏覽器，建議設(shè)為這個(gè)值。

<script type="application/javascript">
  console.log('Hello World');
</script>

由于<script>標(biāo)簽?zāi)J(rèn)就是JavaScript代碼。所以，嵌入JavaScript腳本時(shí)，type屬性也可以省略。

如果type屬性的值，瀏覽器不認(rèn)識(shí)，那么它不會(huì)執(zhí)行其中的代碼。利用這一點(diǎn)，可以在<script>標(biāo)簽之中嵌入任意的文本內(nèi)容，然后加上一個(gè)瀏覽器不認(rèn)識(shí)的type屬性即可。

<script id="mydata" type="x-custom-data">
  console.log('Hello World');
</script>

上面的代碼，瀏覽器不會(huì)執(zhí)行，也不會(huì)顯示它的內(nèi)容，因?yàn)椴徽J(rèn)識(shí)它的type屬性。但是，這個(gè)<script>節(jié)點(diǎn)依然存在于DOM之中，可以使用<script>節(jié)點(diǎn)的text屬性讀出它的內(nèi)容。

document.getElementById('mydata').text
// "
//   console.log('Hello World');
// "

script標(biāo)簽：加載外部腳本

<script>標(biāo)簽也可以指定加載外部的腳本文件。

<script src="example.js"></script>

如果腳本文件使用了非英語(yǔ)字符，還應(yīng)該注明編碼。

<script charset="utf-8" src="example.js"></script>

所加載的腳本必須是純的 JavaScript 代碼，不能有HTML代碼和<script>標(biāo)簽。

加載外部腳本和直接添加代碼塊，這兩種方法不能混用。下面代碼的console.log語(yǔ)句直接被忽略。

<script charset="utf-8" src="example.js">
  console.log('Hello World!');
</script>

為了防止攻擊者篡改外部腳本，script標(biāo)簽允許設(shè)置一個(gè)integrity屬性，寫入該外部腳本的Hash簽名，用來(lái)驗(yàn)證腳本的一致性。

<script src="/assets/application.js"
  integrity="sha256-TvVUHzSfftWg1rcfL6TIJ0XKEGrgLyEq6lEpcmrG9qs=">
</script>

上面代碼中，script標(biāo)簽有一個(gè)integrity屬性，指定了外部腳本/assets/application.js的SHA265簽名。一旦有人改了這個(gè)腳本，導(dǎo)致SHA265簽名不匹配，瀏覽器就會(huì)拒絕加載。

事件屬性

某些HTML元素的事件屬性（比如onclick和onmouseover），可以寫入JavaScript代碼。當(dāng)指定事件發(fā)生時(shí)，就會(huì)調(diào)用這些代碼。

<div onclick="alert('Hello')"></div>

上面的事件屬性代碼只有一個(gè)語(yǔ)句。如果有多個(gè)語(yǔ)句，用分號(hào)分隔即可。

URL協(xié)議

URL支持javascript:協(xié)議，調(diào)用這個(gè)URL時(shí)，就會(huì)執(zhí)行JavaScript代碼。

<a href="javascript:alert('Hello')"></a>

瀏覽器的地址欄也可以執(zhí)行javascipt:協(xié)議。將javascript:alert('Hello')放入地址欄，按回車鍵，就會(huì)跳出提示框。

如果JavaScript代碼返回一個(gè)字符串，瀏覽器就會(huì)新建一個(gè)文檔，展示這個(gè)字符串的內(nèi)容，原有文檔的內(nèi)容都會(huì)消失。

<a href="javascript:new Date().toLocaleTimeString();">
  What time is it?
</a>

上面代碼中，用戶點(diǎn)擊鏈接以后，會(huì)打開一個(gè)新文檔，里面有當(dāng)前時(shí)間。

如果返回的不是字符串，那么瀏覽器不會(huì)新建文檔，也不會(huì)跳轉(zhuǎn)。

<a href="javascript:console.log(new Date().toLocaleTimeString())">
What time is it?
</a>

上面代碼中，用戶點(diǎn)擊鏈接后，網(wǎng)頁(yè)不會(huì)跳轉(zhuǎn)，只會(huì)在控制臺(tái)顯示當(dāng)前時(shí)間。

javascript:協(xié)議的常見用途是書簽?zāi)_本Bookmarklet。由于瀏覽器的書簽保存的是一個(gè)網(wǎng)址，所以javascript:網(wǎng)址也可以保存在里面，用戶選擇這個(gè)書簽的時(shí)候，就會(huì)在當(dāng)前頁(yè)面執(zhí)行這個(gè)腳本。為了防止書簽替換掉當(dāng)前文檔，可以在腳本最后返回void 0。

script標(biāo)簽

工作原理

瀏覽器加載JavaScript腳本，主要通過<script>標(biāo)簽完成。正常的網(wǎng)頁(yè)加載流程是這樣的。

瀏覽器一邊下載HTML網(wǎng)頁(yè)，一邊開始解析
解析過程中，發(fā)現(xiàn)<script>標(biāo)簽
暫停解析，網(wǎng)頁(yè)渲染的控制權(quán)轉(zhuǎn)交給JavaScript引擎
如果<script>標(biāo)簽引用了外部腳本，就下載該腳本，否則就直接執(zhí)行
執(zhí)行完畢，控制權(quán)交還渲染引擎，恢復(fù)往下解析HTML網(wǎng)頁(yè)

加載外部腳本時(shí)，瀏覽器會(huì)暫停頁(yè)面渲染，等待腳本下載并執(zhí)行完成后，再繼續(xù)渲染。原因是JavaScript可以修改DOM（比如使用document.write方法），所以必須把控制權(quán)讓給它，否則會(huì)導(dǎo)致復(fù)雜的線程競(jìng)賽的問題。

如果外部腳本加載時(shí)間很長(zhǎng)（比如一直無(wú)法完成下載），就會(huì)造成網(wǎng)頁(yè)長(zhǎng)時(shí)間失去響應(yīng)，瀏覽器就會(huì)呈現(xiàn)“假死”狀態(tài)，這被稱為“阻塞效應(yīng)”。

為了避免這種情況，較好的做法是將<script>標(biāo)簽都放在頁(yè)面底部，而不是頭部。這樣即使遇到腳本失去響應(yīng)，網(wǎng)頁(yè)主體的渲染也已經(jīng)完成了，用戶至少可以看到內(nèi)容，而不是面對(duì)一張空白的頁(yè)面。

如果某些腳本代碼非常重要，一定要放在頁(yè)面頭部的話，最好直接將代碼嵌入頁(yè)面，而不是連接外部腳本文件，這樣能縮短加載時(shí)間。

將腳本文件都放在網(wǎng)頁(yè)尾部加載，還有一個(gè)好處。在DOM結(jié)構(gòu)生成之前就調(diào)用DOM，JavaScript會(huì)報(bào)錯(cuò)，如果腳本都在網(wǎng)頁(yè)尾部加載，就不存在這個(gè)問題，因?yàn)檫@時(shí)DOM肯定已經(jīng)生成了。

<head>
  <script>
    console.log(document.body.innerHTML);
  </script>
</head>
<body>
</body>

上面代碼執(zhí)行時(shí)會(huì)報(bào)錯(cuò)，因?yàn)榇藭r(shí)document.body元素還未生成。

一種解決方法是設(shè)定DOMContentLoaded事件的回調(diào)函數(shù)。

<head>
  <script>
    document.addEventListener(
      'DOMContentLoaded',
      function (event) {
        console.log(document.body.innerHTML);
      }
    );
  </script>
</head>

另一種解決方法是，使用<script>標(biāo)簽的onload屬性。當(dāng)<script>標(biāo)簽指定的外部腳本文件下載和解析完成，會(huì)觸發(fā)一個(gè)load事件，可以把所需執(zhí)行的代碼，放在這個(gè)事件的回調(diào)函數(shù)里面。

<script src="jquery.min.js" onload="console.log(document.body.innerHTML)">
</script>

但是，如果將腳本放在頁(yè)面底部，就可以完全按照正常的方式寫，上面兩種方式都不需要。

<body>
  <!-- 其他代碼  -->
  <script>
    console.log(document.body.innerHTML);
  </script>
</body>

如果有多個(gè)script標(biāo)簽，比如下面這樣。

<script src="a.js"></script>
<script src="b.js"></script>

瀏覽器會(huì)同時(shí)并行下載a.js和b.js，但是，執(zhí)行時(shí)會(huì)保證先執(zhí)行a.js，然后再執(zhí)行b.js，即使后者先下載完成，也是如此。也就是說，腳本的執(zhí)行順序由它們?cè)陧?yè)面中的出現(xiàn)順序決定，這是為了保證腳本之間的依賴關(guān)系不受到破壞。當(dāng)然，加載這兩個(gè)腳本都會(huì)產(chǎn)生“阻塞效應(yīng)”，必須等到它們都加載完成，瀏覽器才會(huì)繼續(xù)頁(yè)面渲染。

Gecko和Webkit引擎在網(wǎng)頁(yè)被阻塞后，會(huì)生成第二個(gè)線程解析文檔，下載外部資源，但是不會(huì)修改DOM，網(wǎng)頁(yè)還是處于阻塞狀態(tài)。

解析和執(zhí)行CSS，也會(huì)產(chǎn)生阻塞。Firefox會(huì)等到腳本前面的所有樣式表，都下載并解析完，再執(zhí)行腳本；Webkit則是一旦發(fā)現(xiàn)腳本引用了樣式，就會(huì)暫停執(zhí)行腳本，等到樣式表下載并解析完，再恢復(fù)執(zhí)行。

此外，對(duì)于來(lái)自同一個(gè)域名的資源，比如腳本文件、樣式表文件、圖片文件等，瀏覽器一般最多同時(shí)下載六個(gè)（IE11允許同時(shí)下載13個(gè)）。如果是來(lái)自不同域名的資源，就沒有這個(gè)限制。所以，通常把靜態(tài)文件放在不同的域名之下，以加快下載速度。

defer屬性

為了解決腳本文件下載阻塞網(wǎng)頁(yè)渲染的問題，一個(gè)方法是加入defer屬性。

<script src="a.js" defer></script>
<script src="b.js" defer></script>

上面代碼中，只有等到DOM加載完成后，才會(huì)執(zhí)行a.js和b.js。

defer的運(yùn)行流程如下。

瀏覽器開始解析HTML網(wǎng)頁(yè)
解析過程中，發(fā)現(xiàn)帶有defer屬性的script標(biāo)簽
瀏覽器繼續(xù)往下解析HTML網(wǎng)頁(yè)，同時(shí)并行下載script標(biāo)簽中的外部腳本
瀏覽器完成解析HTML網(wǎng)頁(yè)，此時(shí)再執(zhí)行下載的腳本

有了defer屬性，瀏覽器下載腳本文件的時(shí)候，不會(huì)阻塞頁(yè)面渲染。下載的腳本文件在DOMContentLoaded事件觸發(fā)前執(zhí)行（即剛剛讀取完</html>標(biāo)簽），而且可以保證執(zhí)行順序就是它們?cè)陧?yè)面上出現(xiàn)的順序。

對(duì)于內(nèi)置而不是加載外部腳本的script標(biāo)簽，以及動(dòng)態(tài)生成的script標(biāo)簽，defer屬性不起作用。另外，使用defer加載的外部腳本不應(yīng)該使用document.write方法。

async屬性

解決“阻塞效應(yīng)”的另一個(gè)方法是加入async屬性。

<script src="a.js" async></script>
<script src="b.js" async></script>

async屬性的作用是，使用另一個(gè)進(jìn)程下載腳本，下載時(shí)不會(huì)阻塞渲染。

瀏覽器開始解析HTML網(wǎng)頁(yè)
解析過程中，發(fā)現(xiàn)帶有async屬性的script標(biāo)簽
瀏覽器繼續(xù)往下解析HTML網(wǎng)頁(yè)，同時(shí)并行下載script標(biāo)簽中的外部腳本
腳本下載完成，瀏覽器暫停解析HTML網(wǎng)頁(yè)，開始執(zhí)行下載的腳本
腳本執(zhí)行完畢，瀏覽器恢復(fù)解析HTML網(wǎng)頁(yè)

async屬性可以保證腳本下載的同時(shí)，瀏覽器繼續(xù)渲染。需要注意的是，一旦采用這個(gè)屬性，就無(wú)法保證腳本的執(zhí)行順序。哪個(gè)腳本先下載結(jié)束，就先執(zhí)行那個(gè)腳本。另外，使用async屬性的腳本文件中，不應(yīng)該使用document.write方法。

defer屬性和async屬性到底應(yīng)該使用哪一個(gè)？

一般來(lái)說，如果腳本之間沒有依賴關(guān)系，就使用async屬性，如果腳本之間有依賴關(guān)系，就使用defer屬性。如果同時(shí)使用async和defer屬性，后者不起作用，瀏覽器行為由async屬性決定。

腳本的動(dòng)態(tài)加載

除了靜態(tài)的script標(biāo)簽，還可以動(dòng)態(tài)生成script標(biāo)簽，然后加入頁(yè)面，從而實(shí)現(xiàn)腳本的動(dòng)態(tài)加載。

['a.js', 'b.js'].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  document.head.appendChild(script);
});

這種方法的好處是，動(dòng)態(tài)生成的script標(biāo)簽不會(huì)阻塞頁(yè)面渲染，也就不會(huì)造成瀏覽器假死。但是問題在于，這種方法無(wú)法保證腳本的執(zhí)行順序，哪個(gè)腳本文件先下載完成，就先執(zhí)行哪個(gè)。

如果想避免這個(gè)問題，可以設(shè)置async屬性為false。

['a.js', 'b.js'].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.head.appendChild(script);
});

上面的代碼依然不會(huì)阻塞頁(yè)面渲染，而且可以保證b.js在a.js后面執(zhí)行。不過需要注意的是，在這段代碼后面加載的腳本文件，會(huì)因此都等待b.js執(zhí)行完成后再執(zhí)行。

我們可以把上面的寫法，封裝成一個(gè)函數(shù)。

(function() {
  var scripts = document.getElementsByTagName('script')[0];
  function load(url) {
    var script = document.createElement('script');
    script.async = true;
    script.src = url;
    scripts.parentNode.insertBefore(script, scripts);
  }
  load('//apis.google.com/js/plusone.js');
  load('//platform.twitter.com/widgets.js');
  load('//s.thirdpartywidget.com/widget.js');
}());

上面代碼中，async屬性設(shè)為true，是因?yàn)榧虞d的腳本沒有互相依賴關(guān)系。而且，這樣就不會(huì)造成堵塞。

如果想為動(dòng)態(tài)加載的腳本指定回調(diào)函數(shù)，可以使用下面的寫法。

function loadScript(src, done) {
  var js = document.createElement('script');
  js.src = src;
  js.onload = function() {
    done();
  };
  js.onerror = function() {
    done(new Error('Failed to load script ' + src));
  };
  document.head.appendChild(js);
}

此外，動(dòng)態(tài)嵌入還有一個(gè)地方需要注意。動(dòng)態(tài)嵌入必須等待CSS文件加載完成后，才會(huì)去下載外部腳本文件。靜態(tài)加載就不存在這個(gè)問題，script標(biāo)簽指定的外部腳本文件，都是與CSS文件同時(shí)并發(fā)下載的。

加載使用的協(xié)議

如果不指定協(xié)議，瀏覽器默認(rèn)采用HTTP協(xié)議下載。

<script src="example.js"></script>

上面的example.js默認(rèn)就是采用HTTP協(xié)議下載，如果要采用HTTPS協(xié)議下載，必需寫明（假定服務(wù)器支持）。

<script src="https://example.js"></script>

但是有時(shí)我們會(huì)希望，根據(jù)頁(yè)面本身的協(xié)議來(lái)決定加載協(xié)議，這時(shí)可以采用下面的寫法。

<script src="http://example.js"></script>

瀏覽器的組成

瀏覽器的核心是兩部分：渲染引擎和JavaScript解釋器（又稱JavaScript引擎）。

渲染引擎

渲染引擎的主要作用是，將網(wǎng)頁(yè)代碼渲染為用戶視覺可以感知的平面文檔。

不同的瀏覽器有不同的渲染引擎。

Firefox：Gecko引擎
Safari：WebKit引擎
Chrome：Blink引擎
IE: Trident引擎
Edge: EdgeHTML引擎

渲染引擎處理網(wǎng)頁(yè)，通常分成四個(gè)階段。

解析代碼：HTML代碼解析為DOM，CSS代碼解析為CSSOM（CSS Object Model）
對(duì)象合成：將DOM和CSSOM合成一棵渲染樹（render tree）
布局：計(jì)算出渲染樹的布局（layout）
繪制：將渲染樹繪制到屏幕

以上四步并非嚴(yán)格按順序執(zhí)行，往往第一步還沒完成，第二步和第三步就已經(jīng)開始了。所以，會(huì)看到這種情況：網(wǎng)頁(yè)的HTML代碼還沒下載完，但瀏覽器已經(jīng)顯示出內(nèi)容了。

重流和重繪

渲染樹轉(zhuǎn)換為網(wǎng)頁(yè)布局，稱為“布局流”（flow）；布局顯示到頁(yè)面的這個(gè)過程，稱為“繪制”（paint）。它們都具有阻塞效應(yīng)，并且會(huì)耗費(fèi)很多時(shí)間和計(jì)算資源。

頁(yè)面生成以后，腳本操作和樣式表操作，都會(huì)觸發(fā)重流（reflow）和重繪（repaint）。用戶的互動(dòng)，也會(huì)觸發(fā)，比如設(shè)置了鼠標(biāo)懸停（a:hover）效果、頁(yè)面滾動(dòng)、在輸入框中輸入文本、改變窗口大小等等。

重流和重繪并不一定一起發(fā)生，重流必然導(dǎo)致重繪，重繪不一定需要重流。比如改變?cè)仡伾?，只?huì)導(dǎo)致重繪，而不會(huì)導(dǎo)致重流；改變?cè)氐牟季郑瑒t會(huì)導(dǎo)致重繪和重流。

大多數(shù)情況下，瀏覽器會(huì)智能判斷，將重流和重繪只限制到相關(guān)的子樹上面，最小化所耗費(fèi)的代價(jià)，而不會(huì)全局重新生成網(wǎng)頁(yè)。

作為開發(fā)者，應(yīng)該盡量設(shè)法降低重繪的次數(shù)和成本。比如，盡量不要變動(dòng)高層的DOM元素，而以底層DOM元素的變動(dòng)代替；再比如，重繪table布局和flex布局，開銷都會(huì)比較大。

var foo = document.getElementById('foobar');

foo.style.color = 'blue';
foo.style.marginTop = '30px';

上面的代碼只會(huì)導(dǎo)致一次重繪，因?yàn)闉g覽器會(huì)累積DOM變動(dòng)，然后一次性執(zhí)行。

下面是一些優(yōu)化技巧。

讀取DOM或者寫入DOM，盡量寫在一起，不要混雜
緩存DOM信息
不要一項(xiàng)一項(xiàng)地改變樣式，而是使用CSS class一次性改變樣式
使用document fragment操作DOM
動(dòng)畫時(shí)使用absolute定位或fixed定位，這樣可以減少對(duì)其他元素的影響
只在必要時(shí)才顯示元素
使用window.requestAnimationFrame()，因?yàn)樗梢园汛a推遲到下一次重流時(shí)執(zhí)行，而不是立即要求頁(yè)面重流
使用虛擬DOM（virtual DOM）庫(kù)

下面是一個(gè)window.requestAnimationFrame()對(duì)比效果的例子。

// 重繪代價(jià)高
function doubleHeight(element) {
  var currentHeight = element.clientHeight;
  element.style.height = (currentHeight * 2) + 'px';
}

all_my_elements.forEach(doubleHeight);

// 重繪代價(jià)低
function doubleHeight(element) {
  var currentHeight = element.clientHeight;

  window.requestAnimationFrame(function () {
    element.style.height = (currentHeight * 2) + 'px';
  });
}

all_my_elements.forEach(doubleHeight);

JavaScript引擎

JavaScript引擎的主要作用是，讀取網(wǎng)頁(yè)中的JavaScript代碼，對(duì)其處理后運(yùn)行。

JavaScript是一種解釋型語(yǔ)言，也就是說，它不需要編譯，由解釋器實(shí)時(shí)運(yùn)行。這樣的好處是運(yùn)行和修改都比較方便，刷新頁(yè)面就可以重新解釋；缺點(diǎn)是每次運(yùn)行都要調(diào)用解釋器，系統(tǒng)開銷較大，運(yùn)行速度慢于編譯型語(yǔ)言。

為了提高運(yùn)行速度，目前的瀏覽器都將JavaScript進(jìn)行一定程度的編譯，生成類似字節(jié)碼（bytecode）的中間代碼，以提高運(yùn)行速度。

早期，瀏覽器內(nèi)部對(duì)JavaScript的處理過程如下：

讀取代碼，進(jìn)行詞法分析（Lexical analysis），將代碼分解成詞元（token）。
對(duì)詞元進(jìn)行語(yǔ)法分析（parsing），將代碼整理成“語(yǔ)法樹”（syntax tree）。
使用“翻譯器”（translator），將代碼轉(zhuǎn)為字節(jié)碼（bytecode）。
使用“字節(jié)碼解釋器”（bytecode interpreter），將字節(jié)碼轉(zhuǎn)為機(jī)器碼。

逐行解釋將字節(jié)碼轉(zhuǎn)為機(jī)器碼，是很低效的。為了提高運(yùn)行速度，現(xiàn)代瀏覽器改為采用“即時(shí)編譯”（Just In Time compiler，縮寫JIT），即字節(jié)碼只在運(yùn)行時(shí)編譯，用到哪一行就編譯哪一行，并且把編譯結(jié)果緩存（inline cache）。通常，一個(gè)程序被經(jīng)常用到的，只是其中一小部分代碼，有了緩存的編譯結(jié)果，整個(gè)程序的運(yùn)行速度就會(huì)顯著提升。不同的瀏覽器有不同的編譯策略。有的瀏覽器只編譯最經(jīng)常用到的部分，比如循環(huán)的部分；有的瀏覽器索性省略了字節(jié)碼的翻譯步驟，直接編譯成機(jī)器碼，比如chrome瀏覽器的V8引擎。

字節(jié)碼不能直接運(yùn)行，而是運(yùn)行在一個(gè)虛擬機(jī)（Virtual Machine）之上，一般也把虛擬機(jī)稱為JavaScript引擎。因?yàn)镴avaScript運(yùn)行時(shí)未必有字節(jié)碼，所以JavaScript虛擬機(jī)并不完全基于字節(jié)碼，而是部分基于源碼，即只要有可能，就通過JIT（just in time）編譯器直接把源碼編譯成機(jī)器碼運(yùn)行，省略字節(jié)碼步驟。這一點(diǎn)與其他采用虛擬機(jī)（比如Java）的語(yǔ)言不盡相同。這樣做的目的，是為了盡可能地優(yōu)化代碼、提高性能。下面是目前最常見的一些JavaScript虛擬機(jī)：

Chakra(Microsoft Internet Explorer)
Nitro/JavaScript Core (Safari)
Carakan (Opera)
SpiderMonkey (Firefox)
V8 (Chrome, Chromium)

參考鏈接

John Dalziel, The race for speed part 2: How JavaScript compilers work
Jake Archibald，Deep dive into the murky waters of script loading
Mozilla Developer Network, window.setTimeout
Remy Sharp, Throttling function calls
Ayman Farhat, An alternative to Javascript’s evil setInterval
Ilya Grigorik, Script-injected “async scripts” considered harmful
Axel Rauschmayer, ECMAScript 6 promises (1/2): foundations
Daniel Imms, async vs defer attributes
Craig Buckler, Load Non-blocking JavaScript with HTML5 Async and Defer
Domenico De Felice, How browsers work

以上內(nèi)容是否對(duì)您有幫助：

← JavaScript Mutation Observer API

JavaScript window對(duì)象 →

寫筆記

我要補(bǔ)充