2018前端面试题（一） 2018前端面试题（一）

一、https和http的区别及优缺点 http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。
https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份。
二、打开网站到页面呈现，经过的步骤 <1>客户端输入网址，请求与服务器的80端口建立连接。
<2>服务器收到请求，并响应客户端；
<3>客户端接收到服务器的响应，准备开始接收数据。服务器开始发送数据。
（三次握手）
第1次握手：客户端通过将一个含有“同步序列号（SYN）”标志位的数据段发送给服务器请求连接。
第2次握手：服务器用一个带有“确认应答（ACK）”和“同步序列号（SYN）”标志位的数据段响应客户端。
第3次握手：客户端发送一个数据段确认收到服务器的数据段，并开始传送实际数据。
<4>对html页面进行解析，将页面内容呈现给用户。
三、MVC和MVVM的区别 MVC是传统的model-view-controller三部分组成，是单项通信，也就是model和view必须通过controller来承上启下。
MVVM是数据驱动视图，核心是VM，在MVVM中view和viewmodel中数据可以相互通信，也就是相互调用。
四、Vue的生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
vue的生命周期可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后，第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子，DOM 渲染在 mounted 中就已经完成了。
生命周期钩子的一些使用方法： beforecreate : 可以在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到DOM节点 updated : 如果对数据统一处理，在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom。
五、解决跨域的方法有哪些（1）图片ping或script 标签跨域
图片ping常用于跟踪用户点击页面或者动态广告曝光的次数；
script标签可以得到从其他来源的数据，这也是jsonp依赖的根据；
缺点：只能发送get请求，无法访问服务器的响应文本。
（2）jsonp跨域
根据XmlHttpRequest对象受到同源策略的影响，而利用script元素的这个开放策略，网页可以得到从其他来源动态产生的json数据，而这种使用模式就是所谓的jsonp。用jsonp抓取到的数据并不是json，而是任意的JavaScript，用JavaScript解释器运行而不是用json解析器解析。所以，通过Chrome查看所有的jsonp发送的get请求都是js类型，而非xhr。
缺点：只能使用get请求；
不能注册success、error等事件监听函数，不能很容易的确定jsonp请求成功或者失败；
jsonp是从其他域中加载代码执行，容易受到跨域请求伪造的攻击，安全性无法保证；
（3）cors
cross-origin resouce sharing 跨域资源共享是允许浏览器向跨源服务器发出XmlHttpRequest请求，从而克服了ajax只能同源使用的限制。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。服务器一般需要增加如下响应头的一种或几种：

Access-Control-Allow-Origin:*
Access-Control-Allow-Methods:POST, GET, OPTIONS
Access-Control-Allow-Headers:X-PINGOTHER, Content-Type
Access-Control-Max-Age:86400

跨域请求默认不会携带Cookie信息，如果需要携带，请配置下述参数：

"Access-Control-Allow-Credentials":true
//Ajax设置
【2018前端面试题（一）】"withCredentials":true

（4）WebScoket
WebScoket protocol是HTML5的一种新的协议，它实现了浏览器与服务器全双工通信，同时允许跨域通信，是server push技术的一种很棒的实现。需要注意的是：WebScoket对象不支持DOM2级事件监听，必须使用DOM 0级语法分别定义各个事件。
（5）修改document.domain跨子域
（6）window.postMessage()
HTML5新特性，可以用来向其他所有的window对象发送消息。需注意，必须保证素有的脚本执行完成后才能发送MessageEvent，否则容易使其后买你的函数超时无法执行。
（7)window.name+iframe
六、es6中数组的使用（1)includes: includes函数与string的includes一样，接受2个参数，查询的项以及查询起始位置；
（2)find : find的参数为回调函数，回调函数可以接受3个参数，值X、索引i、数组arr，回调函数默认返回值X；
（3）findIndex ：和find差不多，不过默认返回的是索引；
（4)keys 、values、entries ：分别是对数组索引、数组项、数组键值对的遍历；
（5）fill ：fill方法改变原数组，当第三个参数大于数组长度时候，以最后一位为结束位置；
（6）Array.of() ：方法返回一个数组，参数不分类型，只分数量，数量为0时返回空数组；
（7）Array.from() ：可以把带有length属性类似数组的对象转换为数组，也可以把字符串等便利的对象转化为数组，接受2个参数，转换对象和回调函数。
（8)copywithin() : 接收三个参数，被汰换数据的开始处，替换块的开始处，替换块的结束处；
（9) reduce : 对数组中的所有元素调用指定的回调函数，该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供；
(10) forEach 和map : 遍历数组；
（11）every （且）和some （或）：数组中的项返回true 或者false；
（12）filter :数组的过滤筛选。
七、IE和火狐的事件机制有什么区别，如何阻止冒泡事件？事件流描述的是从页面中接受事件的顺序，分为冒泡流和捕获流；
事件冒泡是指事件从最具体的元素接收，然后逐级向上传播，直到不具体的节点；而事件捕获则正好相反，它是从不具体的节点开始，逐步到最具体的节点；
IE的事件流是冒泡流，而火狐同时支持冒泡流和捕获流；
阻止事件冒泡：e.stopPropagation()，ie则是使用e.cancelBubble = true ;
八、清除浮动的几种方法及各自的优缺点（1)父级div定义height ;
优点：简单，代码少，容易掌握
缺点：只适合高度固定的布局，若高度和父级高度不同时，会产生问题；
（2)结尾处添加空div标签clear:both
优点：简单，代码少，兼容性好，不容易出现问题
缺点：页面布局浮动多，需要添加很多空div
(3)父级div伪类：after和zoom
优点：浏览器支持好，不容易出现怪问题
缺点：代码多，需要两者结合起来才能让主流浏览器兼容
（4）父级div 定义overflow：hidden
优点：简单，代码少，浏览器支持好
缺点：不能和position结合使用，超出的部分会被隐藏掉
（5）父级div定义overflow：auto
优点：代码少，简单，浏览器支持好
缺点：内部宽度超过父级时候，出现滚动条
（6)父级div也跟着一起浮动
缺点：会产生新的浮动问题
（7）父级div定义display：table
缺点：会产生新的位置问题
（8）结尾处加br标签clear：both