前端高频面试题及答案汇总

浏览器

关于微任务和宏任务在浏览器的执行顺序是这样的：

执行一个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 及其应用。