我們每天都在寫(xiě)JS，你是否想過(guò)，計(jì)算機(jī)是怎么識(shí)別你的這一行代碼，并且執(zhí)行相應(yīng)指令？本篇文章為你講述從敲下一行JS代碼到這行代碼可以被執(zhí)行算出正確的結(jié)果，都經(jīng)歷了什么。編譯
學(xué)過(guò)計(jì)算器基礎(chǔ)的，即使學(xué)的不好，大概都知道計(jì)算機(jī)跟人能讀懂的語(yǔ)言是不一樣的，它只認(rèn)識(shí)0101的二進(jìn)制數(shù)。也就是機(jī)器指令碼（machine instruction code ）。一開(kāi)始，人們都是用它來(lái)寫(xiě)程序，可以想到最早的程序員有多痛苦。這種二進(jìn)制碼不易被人類理解和記憶，估計(jì)出錯(cuò)太多，最后終于聰明的人類終于發(fā)明了適合自己學(xué)習(xí)記憶各種高級(jí)計(jì)算機(jī)語(yǔ)言，也包括JS。但是機(jī)器并不能直接理解JS語(yǔ)言，所以這里就需要一個(gè)中介幫忙程序解釋并且將其編譯成機(jī)器指令碼給計(jì)算機(jī)執(zhí)行。這個(gè)過(guò)程就叫編譯。而我們chrome瀏覽器里的V8引擎就是幫我們做這個(gè)事情的中介。但是并不是只有g(shù)oogle一家在做瀏覽器啊，所以市面上還有很多JS引擎。下面是從網(wǎng)上趴的圖：而另前端痛苦不堪的瀏覽器兼容問(wèn)題，就是因?yàn)槭褂玫腏S引擎不同，所以能夠理解的JS語(yǔ)法不同，我們就需要寫(xiě)好幾種兼容語(yǔ)法。所以終極解決兼容問(wèn)題的方法就是：全部瀏覽器都用一種JS引擎，目前v8大有一統(tǒng)天下的趨勢(shì)，不過(guò)這個(gè)東西最終能不能實(shí)現(xiàn)今天就不討論了。編譯原理
無(wú)論是哪種編譯器，原理都差不多。所以我們直接來(lái)看看編譯原理，就知道V8大概是如何工作的了。詞法分析的意思就是，將代碼塊切分成最小的單位。這些最小單位成為token。比如 var a = 2;可以切分成var,a,=,2將詞法單元轉(zhuǎn)換成一個(gè)有層級(jí)，代表程序語(yǔ)法結(jié)構(gòu)的樹(shù)，這就是我們經(jīng)常說(shuō)的AST，抽象語(yǔ)法樹(shù)。注意：詞法分析跟語(yǔ)法不是完全獨(dú)立的，而是交錯(cuò)運(yùn)行的。也就是說(shuō)，并不是等所有的token都生成之后，才用語(yǔ)法分析器來(lái)處理。一般都是每取得一個(gè)token，就開(kāi)始用語(yǔ)法分析器來(lái)處理了。下面我們來(lái)看看一個(gè)add函數(shù)會(huì)生成怎樣的語(yǔ)法樹(shù)：function add (a, b) {
return a + b
}
V8 為什么那么快
JS的編譯過(guò)程發(fā)生在執(zhí)行前的那段時(shí)間，所以對(duì)JS引擎的性能要求特別高，因?yàn)檫@直接影響到頁(yè)面加載的速度。以前的chrome里，網(wǎng)絡(luò)拿到數(shù)據(jù)之后，必須經(jīng)過(guò)chrome主線程轉(zhuǎn)發(fā)到流解析器。但是，當(dāng)網(wǎng)絡(luò)數(shù)據(jù)到達(dá)之后，主線程有可能被其他事情占住，比如HTML解析，布局，其他JS執(zhí)行。這樣這些數(shù)據(jù)就沒(méi)辦法被即使解析。從Chrome 75開(kāi)始，V8可以將腳本直接從網(wǎng)絡(luò)流傳輸?shù)搅鹘馕銎髦校鵁o(wú)需等待chrome主線程。這意味著腳本一旦開(kāi)始加載，V8就會(huì)在單獨(dú)的線程上解析。這樣下載腳本完成后幾乎立即完成解析，從而縮短頁(yè)面加載時(shí)間。首次訪問(wèn)頁(yè)面的時(shí)候，JS代碼會(huì)被編譯成字節(jié)碼。當(dāng)再次訪問(wèn)同一個(gè)頁(yè)面的時(shí)候，會(huì)直接復(fù)用首次解析出來(lái)的字節(jié)碼。這樣就省去了下載，解析，編譯的步驟?？梢允筩hrome節(jié)省大約40%的時(shí)間。如果一個(gè)函數(shù)內(nèi)部調(diào)用其他函數(shù)，那么編譯器會(huì)直接函數(shù)中將要執(zhí)行的內(nèi)容放到主函數(shù)里。function add(a, b) {
return a + b;
}
function calculateTwoPlusFive() {
var sum;
for(var i = 0; i <= 1000000000; i++) {
sum =add(2+5);
}
}
var start = newDate();
calculateTwoPlusFive();
var end = newDate();
var timeTaken = end.valueOf() - start.valueOf();
console.log('Took '+ timeTaken + 'ms');
內(nèi)聯(lián)屬性會(huì)將這個(gè)代碼編譯成function add(a, b) {
return a + b;
}
function calculateTwoPlusFive() {
var sum;
for(var i=0;i<=1000000000;i++){
sum = 2+ 5;
}
}
var start = newDate();
calculateTwoPlusFive();
var end = newDate();
var timeTaken = end.valueOf() - start.valueOf();
console.log('Took '+ timeTaken + 'ms');
functionPerson(name, age) {
this.name = name;
this.age = age;
}
var daisy = newPerson('daisy', 22);
var alice = newPerson('alice', 20);
daisy.email = 'daisy@qq.com';
daisy.job = 'engineer';
alice.job = 'engineer';
alice.email = 'alice@qq.com';
對(duì)于這段代碼，它的隱藏類的生成過(guò)程如下：首先兩個(gè)new Person（）的時(shí)候，生成的隱藏類為C0，因?yàn)榇藭r(shí)沒(méi)有任何屬性。當(dāng)執(zhí)行this.name = name;的時(shí)候多了一個(gè)屬性，于是又生成了C1。后面同理，到C2生成的時(shí)候，daisy跟alice的隱藏類都是一樣的，就是C2，此時(shí)有兩個(gè)屬性。但是后面由于動(dòng)態(tài)添加屬性的順序不同，就造成了屬性在類中的偏移量不同，也會(huì)生成不同的隱藏類。這樣就沒(méi)辦法共享隱藏類，導(dǎo)致浪費(fèi)資源生成新的隱藏類。所以我們動(dòng)態(tài)賦值的時(shí)候，盡量保證順序也是一致的。5、熱點(diǎn)函數(shù)會(huì)被直接編譯成機(jī)器碼v8在運(yùn)行的時(shí)候，會(huì)采集JS代碼運(yùn)行數(shù)據(jù)。當(dāng)發(fā)現(xiàn)某個(gè)函數(shù)被頻繁調(diào)用，那么就會(huì)將它標(biāo)記成熱點(diǎn)函數(shù)，并且認(rèn)為他是一個(gè)類型穩(wěn)定的函數(shù)。這時(shí)候會(huì)將它生成更為高效的機(jī)器碼。但是在后面的運(yùn)行中，萬(wàn)一類型發(fā)生變化，V8又要回退到字節(jié)碼。function add(a, b){
return a + b
}
// 這里使用add的時(shí)候一直傳入number類型
for(var i=0; i<10000; ++i){
add(i, i);
}
// 最后卻傳了string，會(huì)使得性能受損
add('a', 'b');
// 片段 1
var person = {
add: function(a, b){
return a + b;
}
};
obj.name = 'li';
// 片段 2
var person = {
add: function(a, b){
return a + b;
}
name: 'li'
};
答案是2。結(jié)合前面知識(shí)，我們可以知道，方法一中動(dòng)態(tài)添加屬性會(huì)生成一個(gè)新的隱藏類。如果add函數(shù)此時(shí)已經(jīng)被轉(zhuǎn)成機(jī)器碼，那么對(duì)于方法一來(lái)說(shuō)，就沒(méi)辦法復(fù)用了。因?yàn)轭惗际切碌牧恕?/span>所以函數(shù)內(nèi)部參數(shù)類型越穩(wěn)定，V8的效率越高。總結(jié)一下
從敲下一段JS代碼到它最終被計(jì)算機(jī)理解并執(zhí)行，中間經(jīng)歷了詞法分析，語(yǔ)法分析，生成機(jī)器碼，執(zhí)行機(jī)器碼。當(dāng)然這個(gè)編譯的過(guò)程是很復(fù)雜的，尤其js還是動(dòng)態(tài)語(yǔ)言，對(duì)于js引擎的性能要求就很高了。V8做了很多事情來(lái)提升瀏覽器的性能，其中包括但不限于：下載的同時(shí)就已經(jīng)在解析，節(jié)省時(shí)間訪問(wèn)同一個(gè)頁(yè)面的時(shí)候直接復(fù)用之前的字節(jié)碼，不在重新編譯生成將主函數(shù)中調(diào)用的函數(shù)，直接換成將要執(zhí)行的語(yǔ)句通過(guò)隱藏類快速定位到動(dòng)態(tài)加入的屬性注意：動(dòng)態(tài)加入的屬性順序不一樣，會(huì)造成生成不同的隱藏類，我們動(dòng)態(tài)賦值同一個(gè)構(gòu)造函數(shù)對(duì)象的時(shí)候，盡量保證順序也是一致的。將常用的函數(shù)直接一步到位編成機(jī)器碼。注意：常用的函數(shù)傳入的類型保持固定。并且對(duì)象的屬性越穩(wěn)定，越有利于性能。參考文檔
https://juejin.im/post/5ada727c518825670b33a584 https://the-super-tiny-compiler.glitch.me/intro https://blog.csdn.net/weixin34184561/article/details/87999100 https://segmentfault.com/a/1190000016231512#comment-area https://blog.csdn.net/weixin34184561/article/details/87999100 https://s0v80dev.icopy.site/blog/v8-release-78 https://blog.csdn.net/weixin_34184561/article/details/87999100 https://juejin.im/post/5c36fc33518825253b5e94e3
本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)
點(diǎn)擊舉報(bào)。
