前端常见面试题

display 和 visibility

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。v-show

visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。v-if

get 和 post 的区别

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在1024字节，Get是通过地址栏来传值。

POST：一般用于修改服务器上的资源，对所发送的信息没有限制。（常用于发送表单数据，新建、修改等），Post是通过提交表单来传值。

渐进增强和优雅降级

渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

call、apply、bind 的区别

三者都是用来改变函数的this对象的指向的。
三者第一个参数都是this要指向的对象，也就是想指定的上下文。
call 传入的参数数量不固定，第二部分参数要一个一个传，用，隔开。
apply 接受两个参数，第二个参数为一个带下标的集合，可以为数组，也可以为类数组。
bind 是返回一个改变了上下文的函数副本，便于稍后调用；apply 、call 则是立即调用 。

cookies，sessionStorage 和 localStorage 的区别

cookie：保存在浏览器端,如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束,如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失，存储大小4KB;
session：保存在服务器端,当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端,存储大小5MB;
localStorage：将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用，localStorage除非主动删除数据，否则数据永远不会消失,存储大小5MB。

应用场景：

cookie：（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。
　　　　（2）保存上次登录的时间等信息。
　　　　（3）保存上次查看的页面
　　　　（4）浏览计数

session：Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。
　　（1）网上商城中的购物车
　　（2）保存用户登录信息
　　（3）将某些数据放入session中，供同一用户的不同页面使用
　　（4）防止用户非法登录

promise

Promise 是异步编程的一种解决方案;
Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成）和Rejected（已失败）;
一旦状态改变，就不会再变，任何时候都可以得到这个结果。

三次握手和四次挥手

1、客户端发送了一个带有SYN的Tcp报文到服务器，这个三次握手中的开始。表示客户端想要和服务端建立连接。 主机A发送位码为syn＝1,随机产生seq number=1234567的数据包到服务器，主机B由SYN=1知道，A要求建立联机。
2、服务端接收到客户端的请求，返回客户端报文，这个报文带有SYN和ACK标志，询问客户端是否准备好。 主机B收到请求后要确认联机信息，向A发送ack number=(主机A的seq+1),syn=1,ack=1,随机产生seq=7654321的包。
3、客户端再次响应服务端一个ACK，表示我已经准备好。主机A收到后检查ack number是否正确，即第一次发送的seq number+1,以及位码ack是否为1，若正确，主机A会再发送ack number=(主机B的seq+1),ack=1，主机B收到后确认seq值与ack=1则连接建立成功。

1、TCP发送一个FIN，用来关闭客户到服务端的连接。
2、服务端收到这个FIN，他发回一个ACK，确认收到序号为收到序号+1，和SYN一样，一个FIN将占用一个序号。
3、服务端发送一个FIN到客户端，服务端关闭客户端的连接。
4、客户端发送ACK报文确认，并将确认的序号+1，这样关闭完成。

原型与 prototype 属性

在 JavaScript 中，每当定义一个对象（函数也是对象）时候，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象;
每个对象都有 __proto__ 属性，但只有函数对象才有 prototype 属性

什么是跨域？为什么会出现跨域？怎么解决跨域问题？

当前页面url	               被请求页面url	                  是否跨域	原因
http://www.test.com/	    http://www.test.com/index.html	否	    同源（协议、域名、端口号相同）
http://www.test.com/	    https://www.test.com/index.html	跨域	协议不同（http/https）
http://www.test.com/	    http://www.baidu.com/	        跨域	主域名不同（test/baidu）
http://www.test.com/	    http://blog.test.com/	        跨域	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	    跨域	端口号不同（8080/7001）

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域;
浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源;

1.因为浏览器是通过document.domain属性来检查两个页面是否同源，因此只要通过设置相同的document.domain，两个页面就可以共享Cookie（此方案仅限主域相同，子域不同的跨域应用场景。
2.JSONP 是服务器与客户端跨源通信的常用方法。最大 特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。
核心思想：网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

什么是闭包？闭包的作用？

闭包是指有权访问另外一个函数作用域中的变量的函数.可以理解为(能够读取其他函数内部变量的函数)；
正常函数执行完毕后,里面声明的变量被垃圾回收处理掉,但是闭包可以让作用域里的 变量,在函数执行完之后依旧保持没有被垃圾回收处理掉

你有哪些优化性能的方法？

  （1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

  （2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

  （3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

  （4） 当需要设置的样式很多时设置className而不是直接操作style。

  （5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

  （6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

  （7） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳