面试总结

1. CSS盒模型

IE盒模型：width=content，height=content
w3c标准盒模型：width=content+padding+border，height=content+padding+border
ie的盒模型 设置宽度，只是content 的宽度，不包括边框，内边距，设置高度，也只是content的高度，不包括边框，内边距。
w3c盒模型设置宽度，宽度值是content+padding+border的宽度值的总和，设置高度，高度值是content+padding+border的高度值的总和。
CSS3新增盒子模型转换：
box-sizing:content-box(默认：W3C盒子模型)
border-box(IE盒子模型)

2.margin合并/折叠

兄弟间的合并：
当一个元素出现在兄弟元素上边时，该元素的下边距会与兄弟元素的上边距合并。
父子间的合并：
当一个元素包含在另一个元素里面（假设没有内边距或边框区分外边距），它们的上或下边距会发生合并。
空白元素合并：
有一个空元素，没有边框和填充，上下边距碰到会发生合并。当该空元素的边距碰到另外元素的边距也会发生合并。
关于如何合并：
两个边距都为正边距时，合并结果是两者中较大值
两个边距都是负边距时，合并结果是两者中绝对值较大值
两个边距一正一负时，合并结果是两者之和

如何消除合并：
对于兄弟元素：设置浮动，display:inline-block，或者使父元素BFC（块级格式化上下文）比如设置overflow：hidden
对于父子元素：给父元素设置border，padding
对于空白元素：设置border，padding，overflow:hidden来形成BFC来防止合并

3.如何给未知宽高的图片垂直居中对齐

• 1. 背景法(兼容性好，简单，但不利于动态导入的图片)

html：
<div class="wrap"></div>

css：
.wrap{ width:300px; height:200px; background: url(../img/test.jpg) center center no-repeat;}

• 2. 图片外面用个p标签，通过设置line-height使图片垂直居中(兼容性较好)

html：
<div class="wrap"> <img src="./img/test.jpg"></div>

css：
.wrap{ width: 300px; height: 300px; border: 1px solid #000; text-align: center;}
.wrap p{ width: 300px; height: 300px; line-height: 300px;}
.wrap p img{ *margin-top:expression((300 - this.height )/2); vertical-align: middle;}

• 3. 利用display:table-cell(不兼容IE6、7)

html：
<div class="wrap"> <img src="./img/test.jpg"></div>

css：
.wrap{ width: 300px; height: 200px; border: 1px dashed #ccc; display: table-cell; vertical-align: middle; text-align: center;}

• 4. 添加table标签(兼容性好，但是冗余标签比较多)

html：
<div class="wrap">
<table>
<tr>
<td align="center"><img src="./img/test.jpg"/></td>
</tr>
</table>
</div>

css：
.wrap{ width: 300px; height: 200px; border: 1px dashed #ccc; text-align: center;}
.wrap table{ width: 300px; height: 200px;}

4.JS变量声明提升

JavaScript引擎的工作方式是，解析代码，获取所有的被声明的变量，再一句句执行程序。这造成的结果是，所有变量声明语句都会被提升到代码头部，并且变量被赋值undefined，再执行程序。在一个作用域块中，所有变量都会提升到块的头部声明，但变量的赋值不会提升。
函数的声明前置：在一个作用域下，同var 声明的变量一样，function 声明的函数也会前置。函数的声明前置优先级高于变量的声明前置。

5.JS有哪些数据类型

六种数据类型：
string（字符串），number（数值），null，undefined，boolean（布尔值），object（对象）
原始类型：数值，字符串，布尔值（无法再细分）
复杂类型：对象
一般将null，undefined看成特殊值

6.JSON是什么

JSON：JSON是一种语法用来序列化对象，数值，数组，布尔值，null和字符串。它基于JavaScript语法。一些JavaScript不是JSON，一些JSON不是JavaScript。
JSON对象：json对象就是json的值。json只有一个值，简单类型（数值，布尔值，null和字符串）的值，复杂类型的值（对象，数组），不能是两个值或多个值，只能是一个值。
JSON对象字面量：json对象字面量是json格式的JavaScript对象字面量。
JSON内置对象：由JSON字符串转换成的json对象即经过JSON.parse（）转化的对象。

7.call和apply的区别

• apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数。
  fun.apply(thisArg, [argsArray])

• call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。
  fun.call(thisArg[, arg1[, arg2[, ...]]])
  使用call方法调用函数并且指定上下文的'this'

apply()与 call()非常相似，不同之处在于提供参数的方式。就是call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组。

8.jQery的链式操作

方法链：jQery调用方法时，对象方法返回的是对象本身，因此可以调用对此对象的其他jQery方法实现连续调用多个方法，即链式操作。
例：$(this).siblings().removeClass('active');

9.常用的jQery API有哪些

.addClass() .removeClass() .appendTo() .click() .clone() .each() .attr() .add()

10.DOMContentReady事件是什么

文档元素的加载

11.常见的网站性能优化手段

合并请求：合并请求的主要目的是减少浏览器对服务器发起的请求数，从而减少在发起请求过程中花费的时间。本测试采用了合并JS、合并CSS以及合并小图片（也就是使用CSS精灵）等方式来减少请求。
域名拆分：域名拆分主要是为了增加浏览器下载的并行度，让浏览器能同时发起更多的请求。
开启Gzip：Gzip是一种压缩技术，可以将资源在服务端进行压缩，然后发送给浏览器后再进行解压，这种方式会降低传输大小，提高网页加载性能。
开启keepalive：开启KeepAlive能够减少浏览器与服务器建立连接的次数，从而节省建立连接时间。
Minify：Minify指的是将JS和CSS等文本文件进行最小化处理，一般对于CSS来说就是去除空格去除换行去除注释等，对于JS，除了上述方法外，还可以进行变量名替换，将长变量名替换为短变量名。目前有很多用户做Minify的工具，例如uglifyjs等。

重点是测试自己的站点，衡量自己的收益，用自己的数据指导自己的优化行为，这样才能获得更好的用户体验。