面试总结

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;}

    1. 图片外面用个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;}

    1. 利用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;}

    1. 添加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等。

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

推荐阅读更多精彩内容

  • HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问...
    肖青荣阅读 298评论 1 4
  • 新建一个request.js 文件 首先,建立一个axios.js文件,引入axios,可以在该文件中,前端做请求...
    抽疯的稻草绳阅读 944评论 0 16
  • 1、如何隐藏所有指定元素? 2、如何确认元素是否具有指定的类? 3、如何切换元素的类? 4、如何获取当前页面的滚动...
    抽疯的稻草绳阅读 228评论 0 11
  • 如何理解HTML语义化 让人更容易读懂(增加代码可读性) 让搜索引擎更容易读懂(SEO) 盒模型宽度计算 offs...
    Guoxu_jianshu阅读 154评论 0 2
  • 一、axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise...
    张先觉阅读 314评论 0 7