踩坑面试题一

1、link和@import的区别

答：页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：link和@import。外部引用CSS两种方式link和@import的方式分别是：

link方式：

<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   

@import方式：

<style type="text/css" media="screen"> 
@import url("CSS文件");   
</style>  

两者都是外部引用CSS的方式，但是存在一定的区别：

　　区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，IE5以上才识别。

　　区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
　　link权重大于import

@import建议书写方式

@import url(style.css) 和@import url("style.css")

---

2、行内元素、块级元素、空元素分别都有哪些？

答：
　　

行内元素：a、abbr、audio、acronym、b、bdo、big、br、cite、code、em、i、img、input、kbd、label、q、select、small、span、strong、sub、sup、textarea、tt、var

块级元素：address、【table、caption、thead、tbody、tfood、th、tr、td】、【ol、ul、li】、【dl、dt、dd】、【fieldset、legend、noframes】、form、h1-6、hr、noscript、p、pre

可变元素：button、del、iframe、ins、map、object、script

空元素：br、hr、link、meta、input、img

---

3、介绍一下盒子模型

答：分为两种，一种是IE盒子模型，它的content包括了padding和border；另一种是标准盒子模型。
盒子模型：content、padding、border、margin

---

4、如何居中一个div？

答：

margin: 0 auto;

---

5、如何居中一个浮动元素？

答：

position: absolute;
left: 50%;
margin-left: 元素的width的一半；

或者

position: relative;
margin-left: 50%;
left: 元素的width的一半;

---

6、介绍一下js的基本数据类型

答：

基本类型: Number、String、Boolean、Object、Null、Undefined
typeof: number、string、boolean、Object、Object、undefined

引用类型Array、Function、Object、RegEp,其中Function的实例typeof值为function；

基本的包装类型Number、String、Boolean

---

7、js中如何实现继承

答：
　　1、原型链继承
　　2、借用构造函数继承。在子构造函数调用父构造函数。
　　3、组合继承（原型链继承+借用构造函数继承）
　　4、原型继承
　　5、寄生继承

---

8、jQuery中如何将数组转为json字符串，然后再转化回来？

答：

转为json: array.serializeArray();
转为数组:JSON.parse(json);//jQuery本身没有转换回来的方法，这里调用浏览器的JSON.parse方法

---

9、如何判断脚本运行在浏览器还是node环境中？

答：通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中

---

10、如何管理项目？

答：

---

11、一个页面从输入url到页面加载完成，这个过程都发生了什么？

答：
分为4个步骤：
（1），当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。
（2）， 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
（3），一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。
（4），此时，Web服务器提供资源服务，客户端开始下载资源。

请求返回后，便进入了我们关注的前端模块
简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而javascript又可以根据DOM API操作DOM

---

12、http状态码有哪些？分别代表什么意思？

答：

　一、200状态码： 
　　成功2××： 成功处理了请求的状态码。 
　　1、200 ：服务器已成功处理了请求并提供了请求的网页。 
　　2、204： 服务器成功处理了请求，但没有返回任何内容。 
　　二、300状态码： 
　　重定向3×× ：每次请求中使用重定向不要超过 5 次。 
　　1、301： 请求的网页已永久移动到新位置。当URLs发生变化时，使用301代码。搜索引擎索引中保存新的URL。 
　　2、302： 请求的网页临时移动到新位置。搜索引擎索引中保存原来的URL。 
　　3、304： 如果网页自请求者上次请求后没有更新，则用304代码告诉搜索引擎机器人，可节省带宽和开销。 
　　三、400状态码： 
　　客户端错误4×× ：表示请求可能出错，妨碍了服务器的处理。 
　　1、400： 语法有误，服务器不理解请求的语法。 
　　2、403： 服务器拒绝请求。 
　　3、404： 服务器找不到请求的网页。服务器上不存在的网页经常会返回此代码。 
　　4、410 ：请求的资源永久删除后，服务器返回此响应。该代码与 404（未找到）代码相似，但在资源以前存在而现在不存在的情况下，有时用来替代404 代码。如果资源已永久删除，应当使用 301 指定资源的新位置。 
　　四、500状态码： 
　　服务器错误5×× ：表示服务器在处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。 
　　1、500 ：服务器遇到错误，无法完成请求。 
　　2、503： 服务器目前无法使用（由于超载或停机维护）。
　　通常，这只是暂时状态。 希望大家在分析日志的时候可以参照一下，根据具体的状态码解决问题。

更多参考

---

13、针对jQuery的优化方法

答：
1、减少DOM操作
2、适当使用原生js
3、用对选择器
4、缓存jQuery对象
5、定义一个可以复用的函数
6、使用链式写法
7、事件的委托处理
8、尽量少生成jQuery对象

---

14、如果需要手动写动画，你认为最小时间间隔是多久，为什么？

答：多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

---