摘要:瀏覽器在解析文檔流的時候,如果遇到一個標(biāo)簽,則會等到這個代碼塊都加載完之后再對代碼進(jìn)行預(yù)編譯,然后在執(zhí)行。執(zhí)行完畢后,瀏覽器會繼續(xù)解析西門的文檔流,同時也準(zhǔn)備好處理下一個代碼塊。同時,也避開了文檔流對執(zhí)行的限制。
在 html 文檔中的執(zhí)行順序本文章記錄本人在學(xué)習(xí) JavaScript 中看書理解到的一些東西,加深記憶和并且整理記錄下來,方便之后的復(fù)習(xí)。
js代碼執(zhí)行順序比較的形象,用戶可以直觀的感受這種執(zhí)行順序。但是,js代碼的執(zhí)行順序是比較復(fù)雜的。有時候我們會把js代碼寫在html里面,而html文檔在瀏覽器中解析的過程是這樣:瀏覽器按照文檔流從上到下逐步解析頁面結(jié)構(gòu)和信息。js代碼作為嵌入的腳本也算做html文檔的組成部分,因此,js代碼在裝載時的執(zhí)行順序也是根據(jù)腳本標(biāo)簽的出現(xiàn)來順序來決定。(下面一個栗子)
Document
還有對于通過腳本標(biāo)簽的src屬性導(dǎo)入的外部js文件腳本,它也將按照其語句出現(xiàn)的順序來執(zhí)行,而且執(zhí)行過程是文檔裝載的一部分,不會因?yàn)槭峭獠?b>js文件而延期執(zhí)行。
// 先加載 b.js 并且執(zhí)行里面的代碼 // 然后在按順序執(zhí)行下面的代碼預(yù)編譯
當(dāng)js引擎解析的時候,它會在預(yù)編譯對所有聲明的變量和函數(shù)進(jìn)行處理。
變量提升
Javascriptconsole.log(a); // undefined var a = 1; console.log(a); // 1
預(yù)解析函數(shù)
JavaScriptf(); // 1 function f() { console.log(1); };
詳細(xì):javascript變量聲明提升(hoisting)
分塊執(zhí)行代碼js是按塊執(zhí)行代碼的,所謂代碼塊就是使用標(biāo)簽分隔的代碼段。(下面一個栗子)
因?yàn)?b>js是按代碼塊來執(zhí)行的。瀏覽器在解析html文檔流的時候,如果遇到一個標(biāo)簽,則js會等到這個代碼塊都加載完之后再對代碼進(jìn)行預(yù)編譯,然后在執(zhí)行。執(zhí)行完畢后,瀏覽器會繼續(xù)解析西門的html文檔流,同時js也準(zhǔn)備好處理下一個代碼塊。
有個小坑,由于js是按塊執(zhí)行的,因此在一個js塊中調(diào)用后面塊聲明的變量或者函數(shù)就會提示語法錯誤。但是不同塊都屬于一個全局作用域,也就是說,塊之間的變量和函數(shù)是可以共享的。(下面一個栗子)
由于js是按塊處理代碼,同時又遵循html文檔流的解析順序,因此在上面的栗子中會看到語法錯誤。但是,在文檔流加載完畢后再次訪問就不會出現(xiàn)這種錯誤了。(下面一個栗子)
還有為了安全起見,一般在頁面初始化完畢之后才允許js代碼執(zhí)行,這樣就可以避免一些網(wǎng)速對js執(zhí)行的影響。同時,也避開了html文檔流對js執(zhí)行的限制。
最后,如果文章有什么錯誤和疑問的地方,請指出。與sf各位共勉!
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/85741.html
摘要:版本以及之前,本身還沒有異步執(zhí)行代碼的能力,宿主環(huán)境傳遞給引擎,然后按順序執(zhí)行,由宿主發(fā)起任務(wù)。采納引擎術(shù)語,把宿主發(fā)起的任務(wù)稱為宏觀任務(wù),把引擎發(fā)起的任務(wù)稱為微觀任務(wù)?;居梅ㄊ纠幕卣{(diào)是一個異步的執(zhí)行過程。 筆記說明 重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄,每天10分鐘,重構(gòu)你的前端知識體系,筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟,完整的...
摘要:版本以及之前,本身還沒有異步執(zhí)行代碼的能力,宿主環(huán)境傳遞給引擎,然后按順序執(zhí)行,由宿主發(fā)起任務(wù)。采納引擎術(shù)語,把宿主發(fā)起的任務(wù)稱為宏觀任務(wù),把引擎發(fā)起的任務(wù)稱為微觀任務(wù)。基本用法示例的回調(diào)是一個異步的執(zhí)行過程。 筆記說明 重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄,每天10分鐘,重構(gòu)你的前端知識體系,筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟,完整的...
摘要:版本以及之前,本身還沒有異步執(zhí)行代碼的能力,宿主環(huán)境傳遞給引擎,然后按順序執(zhí)行,由宿主發(fā)起任務(wù)。采納引擎術(shù)語,把宿主發(fā)起的任務(wù)稱為宏觀任務(wù),把引擎發(fā)起的任務(wù)稱為微觀任務(wù)?;居梅ㄊ纠幕卣{(diào)是一個異步的執(zhí)行過程。 筆記說明 重學(xué)前端是程劭非(winter)【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄,每天10分鐘,重構(gòu)你的前端知識體系,筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟,完整的...
摘要:關(guān)于作用域?qū)崿F(xiàn)的描述任何執(zhí)行上下文時刻的作用域,都是由作用域鏈來實(shí)現(xiàn)的。在一個函數(shù)被定義的時候,會將它此時的作用域鏈鏈接到這個函數(shù)對象的屬性。參考資料鳥哥作用域原理理解作用域和作用域鏈阮一峰老師微博上的關(guān)于作用域的一道題 javascript作用域原理學(xué)習(xí) 在每次調(diào)用一個函數(shù)的時候,就會進(jìn)入一個函數(shù)內(nèi)的作用域,當(dāng)從函數(shù)返回 以后,就會返回調(diào)用前的作用域。 ECMA262關(guān)于作...
閱讀 1952·2021-09-24 09:48
閱讀 3285·2021-08-26 14:14
閱讀 1778·2021-08-20 09:36
閱讀 1543·2019-08-30 15:55
閱讀 3687·2019-08-26 17:15
閱讀 1514·2019-08-26 12:09
閱讀 676·2019-08-26 11:59
閱讀 3384·2019-08-26 11:57