前端高頻面試題及答案彙總

瀏覽器

關於微任務和宏任務在瀏覽器的執行順序是這樣的：

執行一個task（宏任務）
執行完micro-task隊列 （微任務）
如此循環往復下去

Node

Node的事件循環是libuv實現的，引用一張官網的圖：

大致的task（宏任務）執行順序是這樣的：

timers定時器：本階段執行已經安排的 setTimeout() 和 setInterval() 的回調函數。
pending callbacks待定回調：執行延遲到下一個循環迭代的 I/O 回調。
idle, prepare：僅系統內部使用。
poll 輪詢：檢索新的 I/O 事件;執行與 I/O 相關的回調（幾乎全部狀況下，除了關閉的回調函數，它們由計時器和 setImmediate() 排定的以外），其他狀況 node 將在此處阻塞。
check 檢測：setImmediate() 回調函數在這裏執行。
close callbacks 關閉的回調函數：一些準備關閉的回調函數，如：socket.on('close', …)。
微任務和宏任務在Node的執行順序

Node 10之前：

執行完一個階段的全部任務
執行完nextTick隊列裏面的內容
而後執行完微任務隊列的內容
Node 11之後：
和瀏覽器的行爲統一了，都是每執行一個宏任務就執行完微任務隊列。

未完待續，點擊查看更多細節：https://github.com/Advanced-F...

介紹模塊化發展歷程
可從IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、<script type="module"> 這幾個角度考慮。

解答：

模塊化主要是用來抽離公共代碼，隔離做用域，避免變量衝突等。

IIFE： 使用自執行函數來編寫模塊化，特色：在一個單獨的函數做用域中執行代碼，避免變量衝突。

AMD： 使用requireJS 來編寫模塊化，特色：依賴必須提早聲明好。

CMD：

使用seaJS 來編寫模塊化，特色：支持動態引入依賴文件。

CommonJS： nodejs 中自帶的模塊化。

var fs = require('fs');
UMD：兼容AMD，CommonJS 模塊化語法。

webpack(require.ensure)：webpack 2.x 版本中的代碼分割。

ES Modules： ES6 引入的模塊化，支持import 來引入另外一個 js 。

import a from 'a';

全局做用域中，用 const 和 let 聲明的變量不在 window 上，那到底在哪裏？如何去獲取？。
在ES5中，頂層對象的屬性和全局變量是等價的，var 命令和 function 命令聲明的全局變量，天然也是頂層對象。

var a = 12;
function f(){};

console.log(window.a); // 12
console.log(window.f); // f(){}

但ES6規定，var 命令和 function 命令聲明的全局變量，依舊是頂層對象的屬性，但 let命令、const命令、class命令聲明的全局變量，不屬於頂層對象的屬性。

    let aa = 1;
const bb = 2;

console.log(window.aa); // undefined
console.log(window.bb); // undefined

在哪裏？怎麼獲取？經過在設置斷點，看看瀏覽器是怎麼處理的：

經過上圖也能夠看到，在全局做用域中，用 let 和 const 聲明的全局變量並無在全局對象中，只是一個塊級做用域（Script）中

怎麼獲取？在定義變量的塊級做用域中就能獲取啊，既然不屬於頂層對象，那就不加 window（global）唄。

let aa = 1;
const bb = 2;

console.log(aa); // 1
console.log(bb); // 2

介紹下 BFC 及其應用。