停更了基本上半年的时间了，今天继续写这个面试的内容吧。
今天从几份我收藏的面试题开始说起把，如果这些面试题搞懂了，我感觉去参加BAT的面试还是可以搏一搏的。
1.1 有一个长度未知的数组a，如果它的长度为0就把数字1添加到数组里面，否则按照先进先出的队列规则让第一个元素出列。（代码量小于30个字）。
这个网上给出了明确的答案。这是对数组的队列方法和栈方法，此题使用三元运算符比较好。
答案: a.length === 0 ? a.push(1): a.shift();
1.2 防抖动与节流
针对一些会频繁触发的事件如scroll、resize，如果正常绑定事件处理函数的话，很可能在很短的时间内多次连续触发事件，非常影响性能。
因此针对此类事件要进行防抖动或者节流处理。
它的做法就是限制下次函数调用之前必须等待的时间间隔。正确实现debouncing的方法是将若干个函数调用合成一次，并在给定事件过去之后仅被调用一次。
1.2.1 防抖动
function debounce(fn, delay) {
let timer = null;
let context = this;
let args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
}
// 当用户滚动时被调用的函数
function foo() {
console.log("You are scrolling");
}
let elem = document.getElementById("container");
elem.addEventListener("click", debounce(f00, 2000));
- 首先我们为click事件绑定处理函数debounce，当点击时会立即调用，因此click事件触发的是foo函数
- 每一次事件被触发，都会清除当前的timer然后重新设置超时调用。这就会导致每一次高频事件都会取消前一次的超时调用，导致事件处理程序不能被触发。
- 只有当高频事件停止时，最后一次事件触发的超时调用才能在delay时间后执行。
1.2.2 节流
节流是另一种处理类似问题的解决方法。节流函数允许在一个函数在规定的时间内只执行一次。它和防抖动最大的区别是，节流函数不管事件触发的有多频繁，都会保证在规定时间内一定会执行一次真正的处理函数。
比如： 在页面的无限加载的场景下，我们需要用户滚动页面时，每隔一段时间发一次Ajax请求，而不是在用户停下滚动页面操作时采取请求数据。这样的场景，就适合用节流阀技术来实现。
实现方式有两种: 时间戳、定时器
- 时间戳的实现:
var throttle = function(func, delay) {
var prev = Date.now();
return function() {
var context = this;
var args = arguments;
var now = Date.now();
if(now->prev == delay) {
func.apply(context, args);
prev = Date.now();
}
}
}
当高频事件触发时，第一次应该会立即执行，而后再怎么高频触发事件，也都是每delay秒才会执行一次。而当最后一次事件触发完毕后，事件也不会再被执行了。
- 定时器实现：
当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行了，直到delay后，定时器执行处理函数，清空定时器，这样就可以设置下一个定时器。
var throttle = functon(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if(!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
}
}
1.2.3 总结
其实上面的方式都可以进行调整，看自己的思路了。防止一个事件频繁触发回调函数的方式：
- 防抖动
- 节流
趁着一点时间更新几道题目
1.3 浮动为什么会造成高度塌陷？如何解决？
这个问题其实很多面试题都会在问，其实就是这个知识点，没有太多的东西。好的，现在咱们先高清一些概念吧。
1.3.1 清除浮动
清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；代码如下看效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix {
clear: both;
height: 0;
}
.demo1 {
width: 300px;
/*height: auto;*/
border: 1px solid red;
}
.div1 {
width: 100px;
height: 100px;
background: red;
float: left;
}
.div2 {
width: 100px;
height: 100px;
background: blue;
float: right;
}
/**/
.demo2 {
width: 100px;
height: 50px;
background: yellow;
}
</style>
</head>
<body>
<!-- 虽然下面清除了浮动，里面的元素依然不能将demo1的高度撑开 -->
<div class="demo1">
<div class="div1"></div>
<div class="div2"></div>
</div>
<!-- 清除浮动 -->
<div class="clearfix"></div>
<!-- 上面清除浮动，下面的排列正常 -->
<div class="demo2"></div>
</body>
</html>
1.3.2 闭合浮动
更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。代码如下，看相应的效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix {
clear: both;
height: 0;
}
.demo1 {
width: 300px;
/*height: auto;*/
border: 5px solid blue;
}
.div1 {
width: 100px;
height: 100px;
background: red;
float: left;
}
.div2 {
width: 100px;
height: 100px;
background: blue;
float: left;
}
.demo1::after {
clear: both;
content: "";
display: block;
height: 0;
}
/**/
.demo2 {
width: 100px;
height: 50px;
background: yellow;
}
</style>
</head>
<body>
<!-- 虽然下面清除了浮动，里面的元素依然不能将demo1的高度撑开 -->
<div class="demo1">
<div class="div1"></div>
<div class="div2"></div>
</div>
<!-- 上面清除浮动，下面的排列正常 -->
<div class="demo2"></div>
</body>
</html>
1.3.3 总结
通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，虽然设置了新标签来清除浮动但并不能解决wrap高度塌陷的问题。
用闭合浮动比清除浮动更加严谨，因此称之为：“闭合浮动”会更加严谨。
1.3.3 为什么要闭合浮动？
其实这个问题很简单，是因为浮动会给你的布局带来影响，否则闭合浮动干什么！！！不过还得需要认识两个概念，普通流和浮动。
1）普通流：很多人或者文章称之为文档流或者普通文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ，但标准里只有另一个词，叫做 普通流或者称之为常规流。但似乎大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。比如《CSS Mastery》，英文原书中至始至终都只有普通流 normal flow（普通流） 这一词，从来没出现过document flow （文档流）
2）浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
1.3.4 最后就是怎么闭合浮动和原理？
这个问题之前咱们都已经谈论过怎么闭合浮动了，至于原理需要移步对BFC的了解。希望同学们可以自己去查询。
1.4 img 3像素或者4像素的问题？
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img三像素问题</title>
<style>
img {
/*vertical-align: top;*/
}
</style>
</head>
<body>
<div><img src="1.png" alt=""></div>
</body>
</html>
执行结果如下:
1.4.1这是什么原因？
从图中可以看到，baseline和bottom之间有一定的距离。实际上，inline的图片下面空白正是baseline和bottom之间的这段距离。即使只有图片没有文字，只要是inline的图片这段空白都会存在。
因此，想要去掉这段空白，最直接的方法是将图片的vertical-align设置为其他的值。或者咱们知道top和bottom直接的距离就是line-height的高度，当你设置外层div的行高为0时，也就意味这baseline和bottom之间的距离为0，那么空白也就会消失了。因此代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img三像素问题</title>
<style>
div {
/*解决方案一：在div上增加line-height:0*/
/*line-height: 0;*/
}
img {
/*解决方案二: 设置img的vertical-align为其他值*/
vertical-align: middle;
}
</style>
</head>
<body>
<div><img src="1.png" alt=""></div>
</body>
</html>
