记一次字节跳动面试题

今天三月份的时候，头脑一热投了几个包括头条和腾讯的大厂，emmmm像我这样的菜鸟结果显而易知。
头条的两个面试题目倒是挺有趣的，简单又容易出错，记录一下。

第一题

var result = [];
var a = 3;
var total = 0;
function foo(a) {
  var i = 0;
  for (; i < 3; i++) {
    result[i] = function() {
      total += i * a;
      console.log(i);
      console.log(total);
    }
  }
}

foo(1);
result[0]();
result[1]();
result[2]();

这题考的是作用域和闭包的知识，不认真想想，很容易做错。

第二题

console.log('begin');
setTimeout(() => {
    console.log('setTimeout 1');
    Promise.resolve().then(() => {
        console.log('promise 1');
        setTimeout(() => {
            console.log('setTimeout2 between promise1&2');
        })
    }).then(() => {
        console.log('promise 2');
    });
}, 0);
console.log('end');

这题考的是js运行机制，事件循环，宏事件微事件。
最近看到另一个比较有趣的代码，和这个类似。

document.getElementById('button').addEventListener('click',function(){
    // 记录任务开始时间
    let now = Date.now();
    // 插入一万条数据
    const total = 10000;
    // 获取容器
    let ul = document.getElementById('container');
    // 将数据插入容器中
    for (let i = 0; i < total; i++) {
        let li = document.createElement('li');
        li.innerText = ~~(Math.random() * total)
        ul.appendChild(li);
    }
    console.log('JS运行时间：',Date.now() - now);
    setTimeout(()=>{
      console.log('总运行时间：',Date.now() - now);
    },0)
 
    // print JS运行时间： 38
    // print 总运行时间： 957 
  })

当我们点击按钮，会同时向页面中加入一万条记录，通过控制台的输出，我们可以粗略的统计到，JS的运行时间为38ms,但渲染完成后的总时间为957ms。
简单说明一下，为何两次console.log的结果时间差异巨大，并且是如何简单来统计JS运行时间和总渲染时间：
在 JS 的Event Loop中，当JS引擎所管理的执行栈中的事件以及所有微任务事件全部执行完后，才会触发渲染线程对页面进行渲染。
第一个console.log的触发时间是在页面进行渲染之前，此时得到的间隔时间为JS运行所需要的时间。
第二个console.log是放到 setTimeout 中的，它的触发时间是在渲染完成，在下一次Event Loop中执行的。
挺神奇的，简单的利用异步可以大致算出页面重新渲染的时间。