前端面试题 及 答案

1、link和@import的区别

1、link是html的标签，不仅可以加载css还可以定义Rss , rel连接属性；@import是css的语法规则，只能引入样式；
2、加载页面时，link是同时加载的，@impor是页面加载完后才加载
3、link没有兼容性的问题，而@import只在较高版本的浏览器才可以识别
4、link可以通过js插入操作dom，@import 不可以！

2、如何理解js中的原型链

1；每个构造函数都有一个原型对象

2；每个原型对象都有一个指向构造函数的指针

3；每个实例函数都有一个指向原型对象的指针。

4；查找方式是一层一层查找，直至顶层。Object.prototype

3.怎么理解js中的内存泄露

定义：程序不需要的内存，由于某些原因其不会返回到操作系统或者可用内存池中。   内存泄露会导致（运行缓慢 ，高延迟，崩溃）的问题

常见的导致内存泄露的原因有：

1；意外的全局变量

2；被遗忘的计时器或回调函数

3；脱离文档的DOM的引用

4；闭包

4、跨域问题

由于浏览器的同源策略会导致跨域，同源策略又分为

一：DOM同源策略：禁止对不同源页面的DOM进行操作，主要是不同域名的ifram是限制互相访问的

二：xmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起http请求，只要域名  协议  端口有一个不同都被当做不同的域之间的请求，即跨域请求

解决方式：

1、CORS跨域资源共享   后端需要设置Access--Control-Allow-Credentials:true

2、jsonp实现跨域：动态创建script，利用src属性进行跨域

3、 nginx代理跨域

4、nodejs中间件代理跨域

5、WebSokect协跨域

6、window.name+ifram跨域

5、vuex：Vue.js应用程序的状态管理模式+库。

1、state

保存vuex中的数据源，通过this.$store.state获取

 
2、getters

用于监听state中的值的变化，返回计算后的结果。getter的返回值会根据它的依赖被缓存起来


3、mutations

是修改store中的值得唯一方式

4、action 

官方建议提交一个actions，在actions中提交mutations再去修改状态值。 this.$store.dispatch('add')

//this.$store.commit('add')

5、modules 模块化

6、vue的生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。

beforeCreate: vue元素的挂载元素el和数据都为undefined，还未初始化；


created：vue实例的数据对象data有了，el还没有；

beforeMount：vue实例的$el和data都初始化了，但是还挂载在之前的虚拟dom节点上，data.message还未替换；

mounted：vue实例挂载完成，data.message成功渲染。

更新前后：data变化时会触发beforeUpdate和updated方法；

销毁前后：beforeDestory和destoryed，在执行destoryed方法后，对data的改变不会触发周期函数，说明vue实例已经解除了事件监听以及dom绑定，但是dom结构依然存在；

vue生命周期的作用：

他的生命周期中有多个事件钩子，让我们控制整个vue实例的过程时更容易形成良好的逻辑。

生命周期钩子的一些使用方法：

beforeCreate：loading事件，在加载实例时触发。

created：初始化完成事件，异步请求。

mounted：挂载元素，获取dom节点

uptaded：对数据统一处理

beforeDestory：确认事件停止。

nextTick：更新数据后立即操作dom。

7、json和xml数据的区别

1、数据体积方面：xml是重量级的，json是轻量级的，传递的速度更快些。。

2、数据传输方面：xml在传输过程中比较占带宽，json占带宽少，易于压缩。

3、数据交互方面：json与javascript的交互更加方便，更容易解析处理，更好的进行数据交互

4、数据描述方面：json对数据的描述性比xml较差

5、xml和json都用在项目交互下，xml多用于做配置文件，json用于数据交互。

8、http和https的区别

Http：超文本传输协议（Http，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。设计Http最初的目的是为了提供一种发布和接收HTML页面的方法。它可以使浏览器更加高效。Http协议是以明文方式发送信息的，如果黑客截取了Web浏览器和服务器之间的传输报文，就可以直接获得其中的信息。

Https：是以安全为目标的Http通道，是Http的安全版。Https的安全基础是SSL。SSL协议位于TCP/IP协议与各种应用层协议之间，为数据通讯提供安全支持。SSL协议可分为两层：SSL记录协议（SSL Record Protocol），它建立在可靠的传输协议（如TCP）之上，为高层协议提供数据封装、压缩、加密等基本功能的支持。SSL握手协议（SSL Handshake Protocol），它建立在SSL记录协议之上，用于在实际的数据传输开始前，通讯双方进行身份认证、协商加密算法、交换加密密钥等。

HTTP与HTTPS的区别

1、HTTP是超文本传输协议，信息是明文传输，HTTPS是具有安全性的SSL加密传输协议。

2、HTTPS协议需要ca申请证书，一般免费证书少，因而需要一定费用。

3、HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样。前者是80，后者是443。

4、HTTP连接是无状态的，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，安全性高于HTTP协议。

https的优点

尽管HTTPS并非绝对安全，掌握根证书的机构、掌握加密算法的组织同样可以进行中间人形式的攻击，但HTTPS仍是现行架构下最安全的解决方案，主要有以下几个好处：

1）使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；

2）HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。

3）HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。

4）谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”。

Https的缺点

1）Https协议握手阶段比较费时，会使页面的加载时间延长近。

2）Https连接缓存不如Http高效，会增加数据开销，甚至已有的安全措施也会因此而受到影响；

3）SSL证书通常需要绑定IP，不能在同一IP上绑定多个域名，IPv4资源不可能支撑这个消耗。

4）Https协议的加密范围也比较有限。最关键的，SSL证书的信用链体系并不安全，特别是在某些国家可以控制CA根证书的情况下，中间人攻击一样可行。

9，undefined和null的区别

null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，
所以你可以认为它是一个特殊的对象值。
undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。

null是javascript的关键字，可以认为是对象类型，它是一个空对象指针，
和其它语言一样都是代表“空值”，不过 undefined 却是javascript才有的。
undefined是在ECMAScript第三版引入的，为了区分空指针对象和未初始化的变量，
它是一个预定义的全局变量。没有返回值的函数返回为undefined，
没有实参的形参也是undefined。

javaScript权威指南：
 null 和 undefined 都表示“值的空缺”，你可以认为undefined是表示系统级的、
 出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺

10，常见的HTTP状态码

2开头 （请求成功）表示成功处理了请求的状态代码。
200   （成功）  服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。 
201   （已创建）  请求成功并且服务器创建了新的资源。 
202   （已接受）  服务器已接受请求，但尚未处理。 
203   （非授权信息）  服务器已成功处理了请求，但返回的信息可能来自另一来源。 
204   （无内容）  服务器成功处理了请求，但没有返回任何内容。 
205   （重置内容） 服务器成功处理了请求，但没有返回任何内容。
206   （部分内容）  服务器成功处理了部分 GET 请求。
3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
300   （多种选择）  针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。 
301   （永久移动）  请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302   （临时移动）  服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303   （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304   （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。 
305   （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。 
307   （临时重定向）  服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
400   （错误请求） 服务器不理解请求的语法。 
401   （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。 
403   （禁止） 服务器拒绝请求。
404   （未找到） 服务器找不到请求的网页。
405   （方法禁用） 禁用请求中指定的方法。 
406   （不接受） 无法使用请求的内容特性响应请求的网页。 
407   （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
408   （请求超时）  服务器等候请求时发生超时。 
409   （冲突）  服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。 
410   （已删除）  如果请求的资源已永久删除，服务器就会返回此响应。 
411   （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。 
412   （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。 
413   （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。 
414   （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。 
415   （不支持的媒体类型） 请求的格式不受请求页面的支持。 
416   （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。 
417   （未满足期望值） 服务器未满足"期望"请求标头字段的要求。
5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。
500   （服务器内部错误）  服务器遇到错误，无法完成请求。 
501   （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。 
502   （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。 
503   （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。 
504   （网关超时）  服务器作为网关或代理，但是没有及时从上游服务器收到请求。 
505   （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

11，优雅降级和渐进增强

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

其实渐进增强和优雅降级并非什么新概念，只是旧的概念换了一个新的说法。在传统软件开发中，
经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容，而优雅降级相当于向下兼容。

12，什么是闭包，如何使用它，为什么要使用它？

闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，
只有函数内部的子函数才能读取局部变量，
因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

使用闭包的注意点：
· 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
· 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

13，请解释一下JavaScript的同源策略。

在客户端编程语言中，如javascript和 ActionScript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。
同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不同的域呢？
当两个域具有相同的协议, 相同的端口，相同的host，那么我们就可以认为它们是相同的域。
同源策略还应该对一些特殊情况做处理，比如限制file协议下脚本的访问权限。
本地的HTML文件在浏览器中是通过file协议打开的，如果脚本能通过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前IE8还有这样的隐患。

14，怎样添加、移除、移动、复制、创建和查找节点？

（1）创建新节点

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

（2）添加、移除、替换、插入

appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

（3）查找

getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

15，display:none和visibility:hidden区别？

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，
在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，
页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，
此时就是回流。所有页面第一次加载时需要产生一次回流），
而visibility切换是否显示时则不会引起回流。

16，如何用原生js给一个按钮绑定两个onclick事件？

//事件监听 绑定多个事件
var btn = document.getElementById("btn");
btn.addEventListener("click",hello1);
btn.addEventListener("click",hello2);
function hello1(){
 alert("hello 1");
}
function hello2(){
 alert("hello 2");
}

17，清除浮动的几种方式（常见问题）

（1）父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 
优点：简单、代码少、容易掌握 
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

（2）父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 
优点：简单、代码少、浏览器支持好

（3）结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度 
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

18，Javascript中的定时器有哪些？他们的区别及用法是什么？

setTimeout 只执行一次
setInterval 会一直重复执行

19，请描述一下 cookies sessionStorage和localstorage区别

（1）相同点：都存储在客户端

不同点：1.存储大小
· cookie数据大小不能超过4k。
· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

（2）有效时间

· localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
· sessionStorage  数据在当前浏览器窗口关闭后自动删除。
· cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

（3）数据与服务器之间的交互方式

· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

20，编写一个方法去掉数组里面重复的内容？

var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];
//定义一个新的数组
var s = [];
//遍历数组
for(var i = 0;i<arr.length;i++){
    if(s.indexOf(arr[i]) == -1){  //判断在s数组中是否存在，不存在则push到s数组中
        s.push(arr[i]);
    }
}
console.log(s);
//输出结果：["abc", "abcd", "sss", "2", "d", "t", "ss", "f", "22"]