最近跳槽季，刷面試，被問到的問題，答不出或覺得答的不好，底下查找資料學(xué)習(xí)下，順便整理一下，跟大家一起學(xué)習(xí)！

一、event loop事件循環(huán)及線程問題

其實(shí)兩者是有關(guān)聯(lián)的。就因?yàn)镴S是單線程，所以所有的任務(wù)就得排隊(duì)執(zhí)行，js代碼始終在一個(gè)線程上執(zhí)行，此線程被稱為js引擎線程。（為什么單線程，舉別人舉的例子：假定JavaScript同時(shí)有兩個(gè)線程，一個(gè)線程在某個(gè)DOM節(jié)點(diǎn)上添加內(nèi)容，另一個(gè)線程刪除了這個(gè)節(jié)點(diǎn)，這時(shí)瀏覽器應(yīng)該以哪個(gè)線程為準(zhǔn)？），前一個(gè)任務(wù)結(jié)束，才會(huì)執(zhí)行后一個(gè)任務(wù)。

說到任務(wù)，也分同步和異步任務(wù)。所有的同步任務(wù)在主線程排隊(duì)執(zhí)行，形成一個(gè)執(zhí)行棧。異步任務(wù)會(huì)被主線程掛起，不會(huì)進(jìn)入主線程，而是進(jìn)入消息隊(duì)列，也叫任務(wù)隊(duì)列或事件隊(duì)列。隊(duì)列都是先進(jìn)先出，最先進(jìn)入的任務(wù)最先執(zhí)行。同時(shí)，異步任務(wù)需要指定回調(diào)函數(shù)，一個(gè)異步過程包括兩個(gè)要素：注冊(cè)函數(shù)和回調(diào)函數(shù)，其中注冊(cè)函數(shù)用來發(fā)起異步過程，回調(diào)函數(shù)用來處理結(jié)果。

js是單線程而瀏覽器是多線程

一下一張來自網(wǎng)上的圖，大致有以下線程

1、ui渲染線程主要用來渲染頁面。(js可以操作dom，影響渲染，所以js引擎線程和UI線程是互斥的。js執(zhí)行時(shí)會(huì)阻塞頁面的渲染。)

2、js引擎線程，即上面說的單線程

異步任務(wù)需要瀏覽器執(zhí)行事件觸發(fā)線程或定時(shí)器觸發(fā)線程或http請(qǐng)求線程，所以異步是瀏覽器的兩個(gè)或者兩個(gè)以上線程共同完成的。

?

了解了以上，我們來說下event loop事件循環(huán)

詳細(xì)步驟如下：

　　1、所有同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧

　　2、主線程之外，還存在一個(gè)"消息隊(duì)列"。只要異步操作執(zhí)行完成，就到消息隊(duì)列中排隊(duì)

　　3、一旦執(zhí)行棧中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會(huì)按次序讀取消息隊(duì)列中的異步任務(wù)，于是被讀取的異步任務(wù)結(jié)束等待狀態(tài)，進(jìn)入執(zhí)行棧，開始執(zhí)行

　　4、主線程不斷重復(fù)上面的第三步

由于主線程不斷的重復(fù)獲得消息、執(zhí)行消息、再取消息、再執(zhí)行。所以，這種機(jī)制被稱為事件循環(huán)

實(shí)例說明：

console.log(1) div.onclick = () => {console.log('click')} console.log(2) setTimeout(() => {console.log('timeout')},1000)

1、執(zhí)行第一行代碼，第一行是一個(gè)同步任務(wù)，控制臺(tái)顯示1

2、執(zhí)行第二行代碼，第二行是一個(gè)異步任務(wù)，發(fā)起異步請(qǐng)求，可以在任意時(shí)刻執(zhí)行鼠標(biāo)點(diǎn)擊的異步操作

3、執(zhí)行第三行代碼，第三行是一個(gè)同步任務(wù)，控制臺(tái)顯示2

4、執(zhí)行第四行代碼，第四行是一個(gè)異步任務(wù)，發(fā)起異步請(qǐng)求，1s后執(zhí)行定時(shí)器任務(wù)

5、假設(shè)從執(zhí)行第四行代碼的1s內(nèi)，執(zhí)行了鼠標(biāo)點(diǎn)擊，則鼠標(biāo)任務(wù)在消息隊(duì)列中排到首位

6、從執(zhí)行第四行代碼1s后，定時(shí)器任務(wù)到消息隊(duì)列中排到第二位

7、現(xiàn)在同步任務(wù)已經(jīng)執(zhí)行完畢，則從消息隊(duì)列中按照次序把異步任務(wù)放到執(zhí)行棧中執(zhí)行

8、則控制臺(tái)依次顯示'click‘、'timeout'

9、過了一段時(shí)間后，又執(zhí)行了一次鼠標(biāo)點(diǎn)擊，由于消息隊(duì)列中已經(jīng)空了，則鼠標(biāo)任務(wù)在消息隊(duì)列中排到首位

10、同步任務(wù)執(zhí)行完畢后，再從消息隊(duì)列中按照次序把異步任務(wù)放到執(zhí)行棧中執(zhí)行

11、?則控制臺(tái)顯示'click'

二、this指向問題

this 指的是當(dāng)前對(duì)象，如果在全局范圍內(nèi)使用this，則指代當(dāng)前頁面window；如果在函數(shù)中使用this，則this指代什么是根據(jù)當(dāng)前函數(shù)是在什么對(duì)象上調(diào)用。函數(shù)中的this是在運(yùn)行時(shí)候決定的，而不是函數(shù)定義時(shí)。可以使用call和apply改變函數(shù)中this的具體指向。

function dog(){console.log(this.name); } var name = "哈士奇"; dog(); //哈士奇var o = {name: "金毛" }; dog.call(o); //金毛

?

三、瀏覽器內(nèi)核

瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁的語法解釋會(huì)有不同，所以渲染的效果也不相同。通常最開始渲染引擎和 JS 引擎并沒有區(qū)分的很明確，后來 JS 引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。常見的瀏覽器內(nèi)核有：Trident(IE內(nèi)核)、Gecko(Firefox 內(nèi)核)、谷歌Blink內(nèi)核、weblit內(nèi)核

四、margin-top/top的百分比是相對(duì)于父元素的寬度計(jì)算的。

五、彈性布局的了解

六、閉包

轉(zhuǎn)載于:https://www.cnblogs.com/wuzhiquan/p/10381173.html

總結(jié)

以上是生活随笔為你收集整理的整理最近面试问道的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。