前言
題目來自ConardLi的blog
寫的是自己的題解,水平有限,所以僅供參考
代碼會整合在github,覺得有幫助就給個star吧~
正文
一、Javascript基礎
執(zhí)行機制
1队萤、為何try里面放return,finally還會執(zhí)行矫钓,理解其內(nèi)部機制
因JavaScript依靠著語句的Completion Record類型要尔,在語句的復雜嵌套結構中,實現(xiàn)各種控制新娜。
- try就屬于控制型語句赵辕,并且屬于對內(nèi)部有影響的語句
- finally屬于控制型語句,并且屬于對內(nèi)部有影響的語句
- return也屬于控制型語句概龄,但是他屬于對外部有影響的語句
因為finally中的內(nèi)容必須保證執(zhí)行还惠,所以try/catch執(zhí)行完畢,即使得到的結果是非normal型的完成記錄私杜,也必須要執(zhí)行finally
2蚕键、JavaScript如何實現(xiàn)異步編程,可以詳細描述EventLoop機制
異步編程
ES6之前:
- 回調(diào)函數(shù)
- setTimeout
- setInterval
- Promise
- 事件監(jiān)聽
ES6:
- generator
ES6+:
- async await
EventLoop機制:
- JavaScript事件隊列每16ms循環(huán)一次衰粹,先執(zhí)行同步隊列锣光,再執(zhí)行宏任務(第一次是執(zhí)行script里的內(nèi)容),后執(zhí)行微任務
掘金:這一次铝耻,徹底弄懂JavaScript的執(zhí)行機制
js引擎存在monitoring process進程誊爹,會持續(xù)不斷的檢查主線程執(zhí)行棧是否為空,一旦為空瓢捉,就會去Event Queue那里檢查是否有等待被調(diào)用的函數(shù)频丘。
-
setTimeout&&setInterval
不是每過ms秒會執(zhí)行一次fn,而是每過ms秒泡态,會有fn進入Event Queue
3搂漠、宏任務和微任務分別有哪些
宏任務:
- setTimeout
- setInterval
- setTmmediate
- promise中的executor
微任務:
- Promise
- messageChannel
- mutationObersve
- process.nextTick
4、可以快速分析一個復雜的異步嵌套邏輯兽赁,并掌握分析方法
題目一:
async function async1() {
console.log("async1 start");
await async2();
console.log("async1 end");
}
async function async2() {
console.log( 'async2');
}
console.log("script start");
setTimeout(function () {
console.log("settimeout");
},0);
async1();
new Promise(function (resolve) {
console.log("promise1");
resolve();
}).then(function () {
console.log("promise2");
});
console.log('script end');
同步隊列->微任務->宏任務
輸出順序:
script start
async1 start
async2
promise1
script end
async1 end
promise2
settimeout
async await的代碼到底做了些什么状答,我們可以來寫一下
5、使用Promise實現(xiàn)串行
.then調(diào)用
6刀崖、Node與瀏覽器EventLoop的差異
暫時不會
7惊科、如何在保證頁面運行流暢的情況下處理海量數(shù)據(jù)
分頁,worker
8亮钦、冒泡和捕獲的機制
你有沒有想過馆截,在單擊按鈕的同時,你也單擊了按鈕的容器元素蜂莉,甚至也單擊了整個頁面蜡娶。
事件冒泡
IE的事件流叫做事件冒泡(event bubbling),即事件開始時由最具體的元素(文檔中嵌套層次最深的那個節(jié)點)接收映穗,然后逐級向上傳播到較為不具體的節(jié)點(文檔)窖张。
事件捕獲
Netscape Communicator 團隊提出的另一種事件流叫做事件捕獲(event capturing)。其思想是不太具體的節(jié)點應該更早接收到事件蚁滋,而最具體的節(jié)點應該最后接收到事件宿接。事件捕獲的用意在于事件到達預訂目標之前捕獲它。
9辕录、script defer與async
<script src="script.js"></script>
沒有 defer 或 async睦霎,瀏覽器會立即加載并執(zhí)行指定的腳本,“立即”指的是在渲染該 script 標簽之下的文檔元素之前走诞,也就是說不等待后續(xù)載入的文檔元素副女,讀到就加載并執(zhí)行。<script async src="script.js"></script>
有 async蚣旱,加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進行(異步)碑幅。<script defer src="myscript.js"></script>
有 defer,加載后續(xù)文檔元素的過程將和 script.js 的加載并行進行(異步)姻锁,但是 script.js 的執(zhí)行要在所有元素解析完成之后枕赵,DOMContentLoaded 事件觸發(fā)之前完成。
在現(xiàn)實當中位隶, 延遲腳本并不一定會按照順序執(zhí)行拷窜,也不一定會在 DOMContentLoaded 事件觸發(fā)前執(zhí)行, 因此最好只包含一個延遲腳本涧黄。
——澤卡斯(Zakas. Nicholas C.). JavaScript高級程序設計(第3版) (圖靈程序設計叢書) (Kindle 位置 639-641). 人民郵電出版社. Kindle 版本.