一、数组乱序实现
方法一：实现算法性能不好
ary.sort(function(){
return Math.random()>0.5?1:-1
})
方法二：
var len = ary.length;
for (var i = 0; i < len - 1; i++) {
var index = parseInt(Math.random() * (len - i));
var temp = ary[index];
ary[index] = ary[len - i - 1];
ary[len - i - 1] = temp;
};
用两个栈模拟队列
function push(node)
{
while(stack2.length !== 0){
stack1.push(stack2.pop());
}
stack1.push(node);
}
function pop()
{
while(stack1.length !== 0){
stack2.push(stack1.pop());
}
return stack2.pop();
}
二、懒加载图片源码
首先，介绍一下clientHeight和screenHeight、scrollTop、offsetTop
网页可见区域高：document.body.clientHeight
网页被卷去的高：document.body.scrollTop
屏幕分辨率高：window.screen.height
offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。
var lazyload = function(){
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var winTop = window.innerHeight;
for(var i=0;i < imgs.length;i++){
if(imgs[i].offsetTop < scrollTop + winTop ){
imgs[i].src = imgs[i].getAttribute('data-src');
}
}
}
三、CSS
1、bacground-image属性解读
background-image :url("")用来展示背景图片，默认repeat重复展示。
.bg{
width:50%;
height:900px;
background-image: url("bg.JPG");
/*background-size:200px 200px;*/
font-size: 8px;
color:#fff;
background-repeat:no-repeat;
background-position: 50% 50%;
background-size:contain;
background-origin:padding-box;
}
(1)background-origin:属性规定 background-position 属性相对于什么位置来定位。
background-origin: padding-box|border-box|content-box;
padding-box 背景图像相对于内边距框来定位。默认
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位
(2)background-size 属性规定背景图像的尺寸。默认值auto
background-size: length|percentage|cover|contain;
2、BFC的作用（块级格式化上下文）
形成 BFC 的条件
| 浮动元素，float 除 none 以外的值； | 绝对定位元素，position（absolute，fixed）； |
| display 为以下其中之一的值 inline-blocks，table-cells，table-captions； | overflow 除了 visible 以外的值（hidden，auto，scroll） |
作用：（1）父元素高度塌陷问题：场景为：子元素为浮动元素，导致父元素的高度为0.BFC可以解决高度塌陷问题，overflow: hidden；
(2)、解决margin合并问题：场景为：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用overflow：hidden产生bfc来解决。
(3)、BFC里面的元素内容不会影响影响到外面的元素
补充：清除浮动的方式：可以给父元素height;给父元素overflow:hidden;也可以给浮动元素最后加空div标签，添加样式：clear:both；
3、让chorme支持小于12Px的字
p{
font-size:10px;
-webkit-transform:scale(0.8);
}
transform:常见的属性值
transform:translateY(100px) rotate(7deg) scale(0.6);
5、宏观任务和微观任务有哪些
宏观任务：宿主发起的任务为宏观任务，如setTimeout、setInterval、setImmediate，I/O
微观任务：JavaScript引擎发起的任务为微观任务,如Promise
setTimeout(function(){
console.log('1')
});
new Promise(function(resolve){
console.log('2');
resolve();
}).then(function(){
console.log('3')
});
console.log('4');
运行结果：2，4，3，1。
原理解读：
同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。
先运行主线程，主线程完了找微队列，微队列结束之后再执行宏队列第一个，再检测微队列有没有，如此循环
6、http缓存
前端缓存可分为两大类：http缓存和浏览器缓存。
当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。
强制缓存：在缓存数据未失效的情况下（即Cache-Control的max-age没有过期或者Expires的缓存时间没有过期），那么就会直接使用浏览器的缓存数据，不会再向服务器发送任何请求。强制缓存生效时，http状态码为200。
强缓存是利用http的返回头中的Expires或者Cache-Control两个字段来控制的，用来表示资源的缓存时间。
协商缓存：当第一次请求时服务器返回的响应头中没有Cache-Control和Expires或者Cache-Control和Expires过期还或者它的属性设置为no-cache时(即不走强缓存)，那么浏览器第二次请求时就会与服务器进行协商，与服务器端对比判断资源是否进行了修改更新。如果服务器端的资源没有修改，那么就会返回304状态码，告诉浏览器可以使用缓存中的数据，这样就减少了服务器的数据传输压力。如果数据有更新就会返回200状态码，服务器就会返回更新后的资源并且将缓存信息一起返回。跟协商缓存相关的header头属性有（ETag/If-Not-Match 、Last-Modified/If-Modified-Since）请求头和响应头需要成对出现
对于协商缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。
7、position float display三者的优先级
如果'display'值为'none'，则'position' 和 'float'无作用。这种情况下，不生成box。
如果'display'值不为'none'，position 优先级最高，float被忽略
8、addEventListener的第三个参数默认为false,即事件为冒泡方式。
target.addEventListener('click', function() {
// do something...
}, false);
当第三个参数为false时（不传参数时，默认也是这种冒泡方式）
如何阻止事件冒泡？
evt.stopPropagation();
9、cookie
cookie的path属性
path字段为可以访问此cookie的页面路径。 比如domain是abc.com,path是/test，那么只有/test路径下的页面可以读取此cookie。
HttpOnly属性
HttpOnly 属性限制了 cookie 对 HTTP 请求的作用范围。特别的，该属性指示用户代理忽略那些通过"非 HTTP" 方式对 cookie 的访问（比如浏览器暴露给js的接口）。注意 HttpOnly 属性和 Secure 属性相互独立：一个 cookie 既可以是 HttpOnly 的也可以有 Secure 属性。