前端面试总结

前段时间去了几家比较一线互联网公司面试。面试过程不是那么顺利，记录一下遇到的一些面试问题。积累学习。

1、什么是基线，什么是行高

答：（1）基线是一个英文字母的底端线，即字母的下端沿。

　　（2）行高是上一行文字与下一行文字底端之间的高度，也可以认为是相邻行之间基线的距离。

2、什么是BFC（转自作者：山边小溪） ?

答： BFC，即Block Formating Context(块级格式化上下文),是一个独立的渲染区域，这个区域与外面的box毫无关联。

BFC有一些布局规则：

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算      

如何会触发BFC：

　　1. 设为float 的元素

　　2. overflow不为 visible的元素

　　3.position 设置为absolute 或者fixed

　　4. display为inline-block, table-cell, table-caption, flex, inline-flex

　　5. 根元素

3、浏览器的缓存机制是什么？

　答：浏览器缓存就是浏览器在请求服务器后，会将当前的网页显示在页面上，并在本地保存一个此网页的副本，以便下次再输入相同的url时，可以直接用本地的副本，而不用再去向浏览器请求获取资源。这样做的目的是：1、减少http请求，降低带宽成本。2、降低服务器压力。3、增快页面打开速度，为用户提供更好的浏览体验。即便是浏览器在本地存有副本，但是当用户输入url,请求网站资源时，浏览器还是会根据缓存机制来决定是用副本，还是从服务器请求资源。

　　而浏览器的缓存机制主要参考两个值： 新鲜度与校验值。新鲜度用于判断当前副本是否仍在保质期内，是否仍有效。这个主要用头部的meata标签的Expires来标记副本的保存时间，用服务器头信息返回的Etag来标记校验值。

4. setTimeOut （主要考js单线程的事件机制）

function printNum() {

　　for(var i = 0; i < 3; i++) {

　　　　setTimeOut(function(){

　　　　　　console.log(i);

　　　　},0)

　　}

}

问， 输出什么？ 

正确答案：  3，3，3

原因： javascript是单线程单，维护了一个事件队列。每次来任务，都会把任务放进事件队列当中。js虽然是单线程的，但是浏览器是多线程的。浏览器有很多线程，比如事件触发器，网络请求，定时器等。当javacscript执行到涉及其他线程到任务时，就会把当前任务给其他线程来做，javascript继续执行它的事件队列。等到其他线程将任务处理完成以后，会在javascript的事件队列中添加该任务，等到javascript空闲的时候，就去执行该任务。

那么问题来了，如何让该函数连续输入1，2，3？这个做个疑问，暂不回答。