前端面试题

cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

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

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

箭头函数

1.只有一个参数时,可以省略() 只有一行语句的时候也可以省略{}和return
2.箭头函数里this指向的是定义时的this不是执行时的this
3.箭头函数不能用于构造函数 也没有prototype属性
4.不能用call()或apply()来改变其运行的作用域

什么是跨域,同源策略,如何解决跨域问题

1.跨域是指在浏览器上不能执行其他网站的脚本
2.同源策略指浏览器只允许访问同一协议,端口,域名的网页
3.解决跨域方法三种:
(1)CORE:服务器端对于 CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问–也就是常说的服务器加请求头。
(2)JSONP:借助script的src,动态的插入script标签引入一个js文件,写一个全局函数通过形参来获取数据,执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入
(3)vue-cli脚手架项目里的Npm模块http-proxy-middleware也可以解决

什么是闭包

闭包是指有权访问另一个函数作用域中变量的函数
在函数内部可以读取全局变量,但是不能读取函数内部变量,所以在函数内部再创建一个函数,通过创建的函数来读取局部变量
闭包的变量是在内存中,使得内存的消耗很大

浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app ，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

vue的生命周期

创建(created)、模板载入(mounted)、组件更新(updated)、销毁(Destroy)

promise

1.promise是一个构造函数,且异步操作
2.成功返回resolve回调函数,失败返回reject回调函数
3.通过.then链表来取得成功后的值
好处:成功还是失败都会返回一个状态

MVVM的理解

视图（View）：用户界面。（传送指令到 Controller）
控制器（Controller）：业务逻辑（完成业务逻辑后，要求 Model 改变状态）
模型（Model）：数据保存（将新的数据发送到 View，用户得到反）

双向绑定
Observer数据劫持,watch发布订阅,监听 DOM 改变,数据有变化更新视图层

get,post提交的区别

1.get提交把数据加在url后边去传入,并且由于url长度限制提交的数据也是有限制的
2.post提交把数据放到request body里边提交
get提交只产生一次TCP数据包 post提交产生两次TCP数据包
但get提交 数据可以放入request body里边去提交 但是提交的数据由于服务器不同,有的服务器会去拿数据有的则不会

JavaScript的基本类型

String, null, Undefined, Boolean, Number,
(Symbol, binInt, es6新增)
引用类型:Object

Call和Apply以及bind的不同

相同:都是改变this指向的方法
1.不同:call的传值是一个个去传的 apply的传值是通过数组的形式去传值
2.bind和call基本相同 不同在于call是立即执行而bind是等待执行

行内元素和块级元素有哪些区别

1）、行内元素

①：设置宽高无效

②：对margin设置左右方向有效，而上下无效，padding设置都无效

③：不会自动换行

2）、块级元素

①：可以设置宽高

②：设置margin和padding都有效

③：可以自动换行

④：多个块状，默认排列从上到下
1）、行内元素
span>、a>、br>、b>、strong>、img>、input>、textarea>、select>、sup>、sub>、em>、del>

2）、块级元素
address>、center>、h1>~h6>、hr>、p>、pre>、ul>、ol>、dl>、table>、div>、form>

display的block、inline和inline-block的区别
1）、block
会独占一行，多个元素会另起一行，可以width、height、margin和padding属性

2）、inline
元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不可以设置垂直方向的padding和margin

3）、inline-block
将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内

同步和异步的区别

1.同步遇到线程阻塞会等待线程执行完后,后边的线程才会执行
2.异步遇到需要等待的线程不会影响后边代码的执行

解决地狱回调的问题

1.用promise里边的asycn和await
2.asycn和await的原理就相当于generator和yieId
在遇到yieId时候相当于暂停了并且分段去执行 通过.next去取得参数

说说对this的理解

1.this总是指是指向函数的直接调用者
2.如果有new关键字的话this指向new出来的那个对象
3.在DOM事件中 this指向目标元素
4.在箭头函数中this指向他所在的函数作用域,且不可改变

Vue-router

两种方式:
1.hash ---- 利用URL中的hash（“#”）
hash虽然出现在URL中，但不会被包括在HTTP请求中。它是用来指导浏览器动作的，对服务器端完全无用，因此，改变hash不会重新加载页面

Hash:
2.利用History interface在 HTML5中新增的方法
添加对修改浏览器地址栏URL的监听是直接在构造函数中执行的
从HTML5开始，History interface提供了两个新的方法：pushState(), replaceState()使得我们可以对浏览器历史记录栈进行修改：