欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

2018前端面试题(一)

程序员文章站 2022-06-09 17:30:21
...

一、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设置
"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