前端之路

不起眼的开始

http://www.jianshu.com/p/d1c830d1503e招聘前端工程师，尤其是中高级前端工程师，扎实的 JS 基础绝对是必要条件，基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候，我经常会提供下面这段代码，然后让候选人分析它实际运行的结果：

for (var i = 0; i < 5; i++) {    setTimeout(function() {        console.log(new Date, i);    }, 1000);}console.log(new Date, i);

这段代码很短，只有 7 行，我想，能读到这里的同学应该不需要我逐行解释这段代码在做什么吧。候选人面对这段代码时给出的结果也不尽相同，以下是典型的答案：

• A. 20% 的人会快速扫描代码，然后给出结果：0,1,2,3,4,5；
• B. 30% 的人会拿着代码逐行看，然后给出结果：5,0,1,2,3,4；
• C. 50% 的人会拿着代码仔细琢磨，然后给出结果：5,5,5,5,5,5；

只要你对 JS 中同步和异步代码的区别、变量作用域、闭包等概念有正确的理解，就知道正确答案是 C，代码的实际输出是：

2017-03-18T00:43:45.873Z 52017-03-18T00:43:46.866Z 52017-03-18T00:43:46.868Z 52017-03-18T00:43:46.868Z 52017-03-18T00:43:46.868Z 52017-03-18T00:43:46.868Z 5

接下来我会追问：如果我们约定，用箭头表示其前后的两次输出之间有 1 秒的时间间隔，而逗号表示其前后的两次输出之间的时间间隔可以忽略，代码实际运行的结果该如何描述？会有下面两种答案：

• A. 60% 的人会描述为：5 -> 5 -> 5 -> 5 -> 5，即每个 5 之间都有 1 秒的时间间隔；
• B. 40% 的人会描述为：5 -> 5,5,5,5,5，即第 1 个 5 直接输出，1 秒之后，输出 5 个 5；

这就要求候选人对 JS 中的定时器工作机制非常熟悉，循环执行过程中，几乎同时设置了 5 个定时器，一般情况下，这些定时器都会在 1 秒之后触发，而循环完的输出是立即执行的，显而易见，正确的描述是 B。

如果到这里算是及格的话，100 个人参加面试只有 20 人能及格，读到这里的同学可以仔细思考，你及格了么？

追问 1：闭包

如果这道题仅仅是考察候选人对 JS 异步代码、变量作用域的理解，局限性未免太大，接下来我会追问，如果期望代码的输出变成：5 -> 0,1,2,3,4，该怎么改造代码？熟悉闭包的同学很快能给出下面的解决办法：

for (var i = 0; i < 5; i++) {    (function(j) {  // j = i        setTimeout(function() {            console.log(new Date, j);        }, 1000);    })(i);}console.log(new Date, i);

巧妙的利用 IIFE（Immediately Invoked Function Expression：声明即执行的函数表达式）来解决闭包造成的问题，确实是不错的思路，但是初学者可能并不觉得这样的代码很好懂，至少笔者初入门的时候这里琢磨了一会儿才真正理解。

增补：如果有同学给出如下的解决方案，则说明他是一个仔细看API 文档的人，这种习惯会让他学习的时候少走弯路，具体代码如下：

for (var i = 0; i < 5; i++) {    setTimeout(function(j) {        console.log(new Date, j);    }, 1000, i);}console.log(new Date, i);

有没有更符合直觉的做法？答案是有，我们只需要对循环体稍做手脚，让负责输出的那段代码能拿到每次循环的 i 值即可。该怎么做呢？利用 JS 中基本类型（Primitive Type）的参数传递是按值传递（Pass by Value）的特征，不难改造出下面的代码：

var output = function (i) {    setTimeout(function() {        console.log(new Date, i);    }, 1000);};for (var i = 0; i < 5; i++) {    output(i);  // 这里传过去的 i 值被复制了}console.log(new Date, i);

能给出上述 2 种解决方案的候选人可以认为对 JS 基础的理解和运用是不错的，可以各加 10 分。当然实际面试中还有候选人给出如下的代码：

for (let i = 0; i < 5; i++) {    setTimeout(function() {        console.log(new Date, i);    }, 1000);}console.log(new Date, i);

细心的同学会发现，这里只有个非常细微的变动，即使用 ES6 块级作用域（Block Scope）中的 let 替代了 var，但是代码在实际运行时会报错，因为最后那个输出使用的 i 在其所在的作用域中并不存在，i 只存在于循环内部。

能想到 ES6 特性的同学虽然没有答对，但是展示了自己对 ES6 的了解，可以加 5 分，继续进行下面的追问。

追问 2：ES6

有经验的前端同学读到这里可能有些不耐烦了，扯了这么多，都是他知道的内容，先别着急，挑战的难度会继续增加。

接着上文继续追问：如果期望代码的输出变成 0 -> 1 -> 2 -> 3 -> 4 -> 5，并且要求原有的代码块中的循环和两处 console.log 不变，该怎么改造代码？新的需求可以精确的描述为：代码执行时，立即输出 0，之后每隔 1 秒依次输出 1,2,3,4，循环结束后在大概第 5 秒的时候输出 5（这里使用大概，是为了避免钻牛角尖的同学陷进去，因为 JS 中的定时器触发时机有可能是不确定的，具体可参见 How Javascript Timers Work）。

看到这里，部分同学会给出下面的可行解：

for (var i = 0; i < 5; i++) {    (function(j) {        setTimeout(function() {            console.log(new Date, j);        }, 1000 * j);  // 这里修改 0~4 的定时器时间    })(i);}setTimeout(function() { // 这里增加定时器，超时设置为 5 秒    console.log(new Date, i);}, 1000 * i);

不得不承认，这种做法虽粗暴有效，但是不算是能额外加分的方案。如果把这次的需求抽象为：在系列异步操作完成（每次循环都产生了 1 个异步操作）之后，再做其他的事情，代码该怎么组织？聪明的你是不是想起了什么？对，就是 Promise。

可能有的同学会问，不就是在控制台输出几个数字么？至于这样杀鸡用牛刀？你要知道，面试官真正想考察的是候选人是否具备某种能力和素质，因为在现代的前端开发中，处理异步的代码随处可见，熟悉和掌握异步操作的流程控制是成为合格开发者的基本功。

顺着下来，不难给出基于 Promise 的解决方案（既然 Promise 是 ES6 中的新特性，我们的新代码使用 ES6 编写是不是会更好？如果你这么写了，大概率会让面试官心生好感）：

const tasks = [];for (var i = 0; i < 5; i++) {   // 这里 i 的声明不能改成 let，如果要改该怎么做？    ((j) => {        tasks.push(new Promise((resolve) => {            setTimeout(() => {                console.log(new Date, j);                resolve();  // 这里一定要 resolve，否则代码不会按预期 work            }, 1000 * j);   // 定时器的超时时间逐步增加        }));    })(i);}Promise.all(tasks).then(() => {    setTimeout(() => {        console.log(new Date, i);    }, 1000);   // 注意这里只需要把超时设置为 1 秒});

相比而言，笔者更倾向于下面这样看起来更简洁的代码，要知道编程风格也是很多面试官重点考察的点，代码阅读时的颗粒度更小，模块化更好，无疑会是加分点。

const tasks = []; // 这里存放异步操作的 Promiseconst output = (i) => new Promise((resolve) => {    setTimeout(() => {        console.log(new Date, i);        resolve();    }, 1000 * i);});// 生成全部的异步操作for (var i = 0; i < 5; i++) {    tasks.push(output(i));}// 异步操作完成之后，输出最后的 iPromise.all(tasks).then(() => {    setTimeout(() => {        console.log(new Date, i);    }, 1000);});

读到这里的同学，恭喜你，你下次面试遇到类似的问题，至少能拿到 80 分。

我们都知道使用 Promise 处理异步代码比回调机制让代码可读性更高，但是使用 Promise 的问题也很明显，即如果没有处理 Promise 的 reject，会导致错误被丢进黑洞，好在新版的 Chrome 和 Node 7.x 能对未处理的异常给出 Unhandled Rejection Warning，而排查这些错误还需要一些特别的技巧（浏览器、Node.js）。

追问 3：ES7

既然你都看到这里了，那就再坚持 2 分钟，接下来的内容会让你明白你的坚持是值得的。

多数面试官在决定聘用某个候选人之前还需要考察另外一项重要能力，即技术自驱力，直白的说就是候选人像有内部的马达在驱动他，用漂亮的方式解决工程领域的问题，不断的跟随业务和技术变得越来越牛逼，究竟什么是牛逼？建议阅读程序人生的这篇剖析。

回到正题，既然 Promise 已经被拿下，如何使用 ES7 中的 async/await 特性来让这段代码变的更简洁？你是否能够根据自己目前掌握的知识给出答案？请在这里暂停 1 分钟，思考下。

下面是笔者给出的参考代码：

// 模拟其他语言中的 sleep，实际上可以是任何异步操作const sleep = (timeountMS) => new Promise((resolve) => {    setTimeout(resolve, timeountMS);});(async () => {  // 声明即执行的 async 函数表达式    for (var i = 0; i < 5; i++) {        if (i > 0) {            await sleep(1000);        }        console.log(new Date, i);    }    await sleep(1000);    console.log(new Date, i);})();

总结

感谢你花时间读到这里，相信你收获的不仅仅是用 JS 精确控制数字输出的各种技巧，而是各种技巧背后的知识，从宏观层面，则要明确合格前端工程师应该具备的特征：扎实的语言基础、与时俱进的能力、强大的技术自驱力，后续文章见。

One More Thing

本文作者王仕军，商业转载请联系作者获得授权，非商业转载请注明出处。如果你觉得本文对你有帮助，请点赞！如果对文中的内容有任何疑问，欢迎留言讨论。想知道我接下来会写些什么？欢迎订阅的掘金专栏或知乎专栏：《前端周刊：让你在前端领域跟上时代的脚步》。

共 7384 字，读完需 10 分钟。本文为《破解前端面试（80% 应聘者不及格系列）》文章的第二篇，包含 DOM、Event、浏览器端优化、数据结构和算法功底的考察。可能有同学会问 DOM 有什么好聊的，不就是节点的各种操作么？DOM 是网页构建的基石，熟练掌握各种操作、知晓可能的问题、熟悉优化手段，才能做到在工程实践中从容不迫。系列文章链接：闭包篇。下面开始聊 DOM 的话题。

如何修改页面内容？

考察候选人对 DOM 基础知识的掌握程度时，笔者常抛出这样的问题：页面上有个空的无序列表节点，用 <ul></ul> 表示，要往列表中插入 3 个 <li>，每个列表项的文本内容是列表项的插入顺序，取值 1, 2, 3，怎么用原生的 JS 实现这个需求？同时约定，为方便获取节点引用，可以根据需要为 <ul> 节点加上 id 或者 class 属性。

超过 80% 的候选人能完成需求，先为 ul 加上选择符：

<ul id="list"></ul>

然后给出节点创建代码：

var container = document.getElementById('list');for (var i = 0; i < 3; i++) {    var item = document.createElement('li');    item.innerText = i + 1;    container.appendChild(item);}

也有候选人给出下面的代码：

var container = document.getElementById('list');var html = [];for (var i = 0; i < 3; i++) {    html.push('<li>' + (i + 1) + '</li>');}container.innerHTML = html.join('');

这个都写不出来的同学要去面壁了（可能你能用各种库、框架能写出来，但是等你需要调试 bug，分析问题，就会捉襟见肘）。你也可能在心里嘀咕，上来就写代码，还是面试么？可以说代码是工程师最主要的产出，看着候选人编码能让你熟悉他的思考方式、编码风格、代码习惯，很容能看出来是不是“对味儿”的候选人。

坦率的说，上面的两份代码只能说满足了需求，但是如果做到了以下几点，会有加分：

1. 变量命名：节点类的变量，加上 nd 前缀，会更加容易辨识，当然，也有同学习惯借用 jquery 中的 $，关于变量命名的更多内容可以去阅读《可读代码的艺术》；
2. 选择符命名：给 CSS 用和 JS 用的选择符分开，给 JS 用的选择符建议加上 js- 或 J- 前缀，提高可读性，还有没有其他好处，请思考；
3. 容错能力：应该对节点的存在性做检查，这样代码才能更健壮，实际工作中，很可能你的这段代码会把其他功能搞砸，因为单个地方 JS 报错是可能导致后续代码不执行的，为啥要这样做？不理解的同学可以去看看防御性编程；
4. 最小作用域原则：应该把代码段包在声明即执行的函数表达式（IIFE）里，不产生全局变量，也避免变量名冲突的风险，这是维护遗留代码必须谨记的。

下面是综合上面四点的改良版（只针对第1份代码）：

(() => {    var ndContainer = document.getElementById('js-list');    if (!ndContainer) {        return;    }    for (var i = 0; i < 3; i++) {        var ndItem = document.createElement('li');        ndItem.innerText = i + 1;        ndContainer.appendChild(ndItem);    }})();

在候选人给出代码之后，笔者常顺便追问：选取节点是否有其他方法？还有哪些？这个问题留给你自己。

追问1：如何绑定事件？

现在页面上有了内容，接下来添加交互。问题：要当每个 <li> 被单击的时候 alert 里面的内容，该怎么做？部分候选人不假思索地给出如下代码：

//...for (var i = 0; i < 3; i++) {    var ndItem = document.createElement('li');    ndItem.innerText = i + 1;    ndItem.addEventListener('click', function () {        alert(i);    });    ndContainer.appendChild(ndItem);}//...

或下面的代码：

//...for (var i = 0; i < 3; i++) {    var ndItem = document.createElement('li');    ndItem.innerText = i + 1;    ndItem.addEventListener('click', function () {        alert(ndItem.innerText);    });    ndContainer.appendChild(ndItem);}//...

如果你对闭包和作用域理解没问题，就很容易发现问题：alert 出来的内容其实都是 3，而不是每个 <li> 的文本内容。上面两段代码都不能满足需求，因为 i 和 ndItem 的作用域范围是相同的。使用 ES6 的块级作用域能把问题解决：

//...for (let i = 0; i < 3; i++) {    const ndItem = document.createElement('li');    ndItem.innerText = i + 1;    ndItem.addEventListener('click', function () {        alert(i);    });    ndContainer.appendChild(ndItem);}//...

而熟悉 addEventListener 文档的候选人会给出下面的方法：

//...for (var i = 0; i < 3; i++) {    var ndItem = document.createElement('li');    ndItem.innerText = i + 1;    ndItem.addEventListener('click', function () {        alert(this.innerText);    });    ndContainer.appendChild(ndItem);}//...

因为 EventListener 里面默认的 this 指向当前节点，比较喜欢使用箭头函数的同学则需要格外注意，因为箭头函数会强制改变函数的执行上下文。笔者的判断标准是到这里算及格，你及格了么？

聊到这里，笔者有时候还会追问：绑定事件除了 addEventListener 还有其他方式么？如果使用 onclick 会存在什么问题？

追问2：数据量变大之后？

貌似上面的问题都没啥挑战，别着急，难度继续增加。如果要插入的 <li> 是 300 个，该怎么解决？

部分同学会粗暴的把循环终止条件修改为 i < 300，这样没有明显的问题，但细想你会发现，在 DOM 中注册的事件监听函数增加了 100 倍，有更好的办法么？读到这里你肯定已经想到了，对，就是事件委托（英文 Event Delegation，亦称事件代理）。

使用事件委托能有效的减少事件注册的数量，并且在子节点动态增减是无需修改代码，使用事件委托的代码如下：

(() => {    var ndContainer = document.getElementById('js-list');    if (!ndContainer) {        return;    }    for (let i = 0; i < 300; i++) {        const ndItem = document.createElement('li');        ndItem.innerText = i + 1;        ndContainer.appendChild(ndItem);    }    ndContainer.addEventListener('click', function (e) {        const target = e.target;        if (target.tagName === 'LI') {            alert(target.innerHTML);        }    });})();

如果你不知道事件委托是什么、实现原理是什么、使用它有什么好处，请花点时间去研究下，能让你写出更好的代码，遇到没听过事件委托的候选人我会追问“标准 DOM 事件的发生流程”，如果熟悉，再引导他理解事件委托，直到写出代码，这个过程能看出来候选人思维是否灵活。

回到正题，相当部分的代码在数据量变大之后容易出各种问题。如果要在 <ul> 中插入 30000 个 <li>，会有什么问题？代码需要怎么改进？几乎可以肯定，页面体验不再流畅，甚至会出现明显的卡顿感，该怎么解决？

出现卡顿感的主要原因是每次循环都会修改 DOM 结构，外加大循环执行时间过长，浏览器的渲染帧率（FPS）过低。而实际上，包含 30000 个 <li> 的长列表，用户不会立即看到全部，大部分甚至根本都不会看，那部分都没有渲染的必要，好在现代浏览器提供了 requestAnimationFrame API 来解决非常耗时的代码段对渲染的阻塞问题，不知道 requestAnimationFrame 用法和原理的请研究下这篇文章，该技术在 React 和 Angular 里面都有使用，如果你理解了 requestAnimationFrame 的原理，就很容易理解最新的 React Fiber 算法。

综合上面的分析，可以从减少 DOM 操作次数、缩短循环时间两个方面减少主线程阻塞的时间。减少 DOM 操作次数的良方是 DocumentFragment；而缩短循环时间则需要考虑使用分治的思想把 30000 个 <li> 分批次插入到页面中，每次插入的时机是在页面重新渲染之前。由于 requestAnimationFrame 并不是所有的浏览器都支持，Paul Irish 给出了对应的 polyfill，这个 Gist 也非常值得你学习。

下面是完整的代码示例：

(() => {    const ndContainer = document.getElementById('js-list');    if (!ndContainer) {        return;    }    const total = 30000;    const batchSize = 4; // 每批插入的节点次数，越大越卡    const batchCount = total / batchSize; // 需要批量处理多少次    let batchDone = 0;  // 已经完成的批处理个数    function appendItems() {        const fragment = document.createDocumentFragment();        for (let i = 0; i < batchSize; i++) {            const ndItem = document.createElement('li');            ndItem.innerText = (batchDone * batchSize) + i + 1;            fragment.appendChild(ndItem);        }        // 每次批处理只修改 1 次 DOM        ndContainer.appendChild(fragment);        batchDone += 1;        doBatchAppend();    }    function doBatchAppend() {        if (batchDone < batchCount) {            window.requestAnimationFrame(appendItems);        }    }    // kickoff    doBatchAppend();    ndContainer.addEventListener('click', function (e) {        const target = e.target;        if (target.tagName === 'LI') {            alert(target.innerHTML);        }    });})();

读到这里的同学，应该已经理解这一节讨论的要点：大批量 DOM 操作对页面渲染的影响以及优化的手段，性能对用户来说是功能不可分割的部分。

追问3：DOM 树的遍历？

数据结构和算法在很多人前端同学看来是没啥用的东西，实际上他们掌握的也不好，但不论前端还是后端，扎实的 CS 基础是工程师必备的知识储备，有了这种储备在面临复杂的问题，才能彰显出工程师的价值。JS 中的 DOM 可以天然的跟树这种数据结构联系起来，相信大家都不陌生，比如给定下面的 HTML 片段：

<div class="root">    <div class="container">        <section class="sidebar">            <ul class="menu"></ul>        </section>        <section class="main">            <article class="post"></article>            <p class="copyright"></p>        </section>    </div></div>

对这颗 DOM 树，期望给出广度优先遍历（BFS）的代码实现，遍历到每个节点时，打印出当前节点的类型及类名，例如上面的树广度优先遍历结果为：

DIV .rootDIV .containerSECTION .sidebarSECTION .mainUL .menuARTICLE .postP .copyright

这要求候选人对 DOM 树中节点关系的表示方式比较清楚，关键属性是 childNodes 和children，两者有细微的差别。如果是深度优先的遍历（DFS），使用递归非常容易写出来，但是广度优先则需要使用队列这种数据结构来管理待遍历的节点，读到这里，请你找出纸笔，思考 1 分钟，看能不能自己写出来。

下面给出一种参考的实现，代码比较简单，就不多做解释：

const traverse = (ndRoot) => {    const stack = [ndRoot];    while (stack.length) {        const node = stack.shift();        printInfo(node);        if (!node.children.length) {            continue;        }        Array.from(node.children).forEach(x => stack.push(x));    }};const printInfo = (node) => {    console.log(node.tagName, `.${node.className}`);};// kickofftraverse(document.querySelector('.root'));

如果你对树和树的遍历理解不清，请仔细看上文的外链。最后，再追问一个问题，如果要在打印节点的时候输出节点在树中的层次，该怎么解决？

总结和思考题

本文以基本的 DOM 操作为出发点，接下来聊到事件绑定，和渲染性能优化，最后聊到工程师避不开的数据结构和算法。如果你是面试官，你会怎么跟候选人聊？如果你想学好 DOM，只看这篇文章远远不够，文中给大家留了 3 道思考题，也外链超过 10 个学习资料，希望对大家有用。

One More Thing

本文作者王仕军，商业转载请联系作者获得授权，非商业转载请注明出处。如果你觉得本文对你有帮助，请点赞！如果对文中的内容有任何疑问，欢迎留言讨论。想知道我接下来会写些什么？欢迎订阅我的掘金专栏或知乎专栏：《前端周刊：让你在前端领域跟上时代的脚步》。