总结今日面试题。
1、如何让一个物体水平垂直居中某个区域？
这是一个老生常谈了。分物体不确定宽高和确定宽高。
不确定宽高：利用flex布局
<div class="wraper">
<div class="inner">内容</div>
</div>
.wraper{
400px;
height: 400px;
border: solid 1px red;
display: flex;
justify-content: center;
align-items: center;
}
不确定宽高：利用CSS3的transform属性和绝对定位配合。
.wraper{ 400px; height: 400px; border: solid 1px red; position: relative; } .inner{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
不确定宽高：利用table、table-cell。这里需要嵌套三层。
<div class="wraper">
<div class="ok">
<span class="innerBox">内容</span>
</div>
</div>
.wraper{
display: table;
}
.wraper .ok{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.wraper .innerBox{
background: blue;
}
确定宽高：绝对定位四个方向设为0；margin设为auto。
.wraper{ 400px; height: 400px; border: solid 1px red; position: relative; } .inner{ 100px; height: 100px; background: yellow; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
确定宽高：利用负margin值，margin负值为元素宽高的一半。和transform有相通之处。
.wraper{ 400px; height: 400px; border: solid 1px red; position: relative; } .inner{ 100px; height: 100px; background: yellow; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; }
2、什么是盒模型？
盒模型本质就是指一个盒子，它包括元素内容、内边距、边框、外边距。
盒模型有两种：标准盒模型和怪异盒模型（IE）。
标准盒模型：box-sizing:content-box; 也是默认的，此时设置的width/height就只是content的宽度和高度。
怪异盒模型：box-sizing:border-box; 此时设置的width/height包括content+padding+border。
3、说明= 、==、===、的区别？
= ：是赋值操作。
== ：先转换类型再比较。
类型相同则比较大小。
null == undefined 返回true
一个字符串一个数值，则会把字符串转化为数值型在进行比较。
如果一方为true则转化为1，为false则转化为0，再比较。
如果一个是对象一个是字符串或者数值，则会把对象转化为基础类再进行比较。
其他比较都不相等。
=== ：类型不同，不相等。
都是数值，值相同则相等。
类型一样，值一样 才相等。
对于引用类型，引用同一个对象或者函数才相等。
都为null 或者都为undefined ，相等。
都为NaN不相等，因为每一个NaN都不相等，只能用isNaN判断NaN。isNaN(NaN)返回true。
4、JavaScript中undefined和not defined的区别？
undefined并不是程序报错，而是程序允许的一个值。它是js语言中定义的五个原始类中的一个。这个类中只有一个值就是undefined
not defined 是运行代码时，遇到没有定义就拿来运算的变量时，抛出的错误。如下代码：
1 var a; 2 console.log(a) 3 console.log(typeof a) 4 console.log(typeof b) 5 console.log(b)
第一个返回undefined值。第二个返回的是undefined是这个类，第三个也是undefined这个类，第四个会报错。
5、写出下面代码的结果。
console.log([]==true) // false console.log(null==undefined) // true console.log(0 === -0) // true console.log(1/0 === 1/-0) // false console.log(true=='1') // true console.log((12,5,6,7,13)) // 这里考察的是逗号运算符。 // 逗号运算符多用于声明多个变量。 var num1 = 1, num2 = 2; // 此外还可以用于赋值。 // 用于赋值时，总返回表达式的最后一项 // 因此输出 13
function show(a){ var b = a(); return b(); } var a = function () { console.log('test'); return function(){ console.log('show'); // return 2; } } console.log(show(a))
上面代码会先 console一个 test 然后是 show 最后是 undefined。
函数show执行时，给它传了一个函数a作为参数，a执行返回一个函数赋给b，并且console出 test，show 把函数b的执行结果返回出来，b执行结果会console出 show，但是由于没有return返回值，因此会返回一个undefined。函数没有返回值时会返回一个undefined。
如果加上return 2，结果就会是 test 、show 、2。
var a= function () { console.log('test'); } function show(a){ console.log(a); return function(){ console.log(2); } } console.log(show(a)())
结果是先console出 函数a，然后是2，然后是undefined。过程和上面类似。
var json = { a:1, b:2, c:function(){console.log('test');return 10;} }; var arr = [3,2,1]; function show(a){ console.log(a[0]+json.a+arguments[1].c()); return arguments[1].c()+arguments[0][0]; } console.log(show(arr,json))
先说结果是：test、14、test、13。
首先来说，JavaScript函数有个内置的对象arguments对象。它包含了函数调用的参数数组。在函数show里console一下就可以直到了。
因此，arguments[0] 就是 arr arguments[1] 就是 json，所以里面的两个数据就可以使用了。
6、document.write() 和 innerHTML 的区别？
document.write() 是直接写入到页面的内容流，会导致页面的重绘。
innerHTML 是页面DOM元素的一个属性，可以精确到某一个元素身上进行修改，只是重绘页面的一部分。
7、什么是图片预加载和懒加载？
预加载：就是在页面加载完成之前，提前加载图片。当用户需要查看时直接从本地缓存中渲染，从而减少用户等待时间，提高体验效果。这种做法是牺牲服务器性能换取更好的用户体验。
懒加载：就是延迟加载图片或符合某些条件才加载图片。好处是：减少不必要的访问数据库次数。主要目的是作为服务器前端优化，减少请求数。
8、cookie、sessionStorage、localStorage 的区别？
cookie：保存在浏览器端，只能保存字符串类型，以文本的方式，存储较小，安全性低（cookie欺骗，cookie截获）。始终在同源的HTTP请求中携带。
sessionStorage(会话存储)：关闭浏览器窗口即销毁。
localStorage(本地存储)：长期有效，用户不删除就会一直存在。
上面两个是H5 webstorage提供：存储数据大小差不多，都是存在客户端，不与服务端交互通信。只能存储字符串类型，对于复杂对象可以使用JSON对象的stingfy和parse来处理。
三个的共同点：都是保存在浏览器端，都是同源的。
9、Ajax是什么？同步异步的区别？
Ajax是一种无需重新加载整个页面就可以进行局部页面刷新的技术。它是异步的JavaScript和xml技术。
Ajax原理：简单来说就是通过XmlHttpRequest对象向服务器发送异步请求，从服务器获取数据，然后通过JavaScript来操作DOM而更新页面。
XmlHttpRequest是Ajax的核心机制.
Ajax优点：页面无刷新、异步方式与服务器通信。
Ajax缺点：干掉了back按钮，即对浏览器后退机制的破坏。安全问题、如跨站点脚本攻击、SQL注入等。对搜索引擎支持较弱。
同步和异步：
JavaScript是单线程的。也就意味着执行完一个任务之后才会执行另一个任务。所有任务分为两种，一种是同步任务，一种是异步任务。
同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕才能执行后一个任务；异步任务是不进入主线程，而是在任务队列，主线程执行完毕，任务队列请求执行，该任务才会进入主线程执行。
10、事件委托、事件冒泡、事件捕获。
事件委托：利用事件冒泡来给父元素绑定事件，监听子元素的事件行为，并确定是哪个子元素的事件。优点：能够减少dom操作、提高代码性能。
事件冒泡：IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到不具体的节点。由内到外。所有现代浏览器都支持事件冒泡。
事件捕获：它的思想是从不具体的节点应该更早的接收事件，而最具体的节点应该最后接收到事件。由外到内。