中级前端面试题2022

中级前端面试题2022

中级前端面试题目总结如下：

一、一个完整的URL解析过程：

用户输入URL地址，对URL地址进行DNS域名解获得IP地址，建立

TCP连接（三次握手），浏览器向web服务器发送一个HTTP请求报文，服

务器返回HTTP响应报文给客户端，关闭TCP连接（四次挥手）,浏览器解析

文档资源并渲染页面。

解析过程：浏览器解析的资源（html,svg,Xhtml等），解析完成后都会生

成Y完整的DOMTree,css资源则会解析成CSSRuleTree,生成之后进行

浏览器渲染，保证脚本执行前已完成DOM渲染会放在body标签结束之后。

二、EventLoop是什么？

EventLoop即事件循环，是指浏览器或Node的一种解决JavaScript单线

程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理，是f程序结构,

用于等待和发送消息和事件。

执行过程：事件循环的顺序，决定了JavaScript代码的执行顺序。它从

script（整体代码）开始第一次循环（即宏任务X之后全局上下文进入函数调用栈。

直到调用栈清空（只剩全局），然后执行所有的micro-task（微任务\当所有可

执行的micro-task（微任务）执行完毕之后。循环再次从macro-task（宏任务）

开始，找到其中一个任务队列执行完毕，然后再执行所有的micro-task（微任

务），这样一直循环下去。

三、什么是HTTP和HTTPS

HTTP:超文本传输协议，是一个基于请求与响应，无状态的，应用层的协

议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议，所有

的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和

接收HTML页面的方法。

HTTPS:是一种通过计算机网络进行安全通信的传输协议，经由HTTP进

行通信，利用SSL/TLS建立全信道，加密数据包。HTTPS使用的主要目的是提

供对网站服务器的身份认证，同时保护交换数据的隐私与完整性。

PS:TLS是传输层加密协议，前身是SSL协议，由网景公司1995年发布，

有时候两者不区分。

四、https加密方式

共享密钥加密（对称密钥加密）：客户端和服务器公用一个密匙用来对消息

加解密，这种方式称为对称加密。客户端和服务器约定好一个加密的密匙。客户

端在发消息前用该密匙对消息加密，发送给服务器后，服务器再用该密匙进行解

密拿到消息。

公开密钥加密（非对称密钥加密）：客户端和服务端均拥有一个公有密匙和

一个私有密匙。公有密匙可以对外暴露，而私有密匙只有自己可见。使用公有密

匙加密的消息，只有对应的私有密匙才能解开。反过来，使用私有密匙加密的消

息，只有公有密匙才能解开。这样客户端在发送消息前，先用服务器的公匙对消

息进行加密，服务器收到后再用自己的私匙进行解密。

五、Vue2.X的双向绑定响应式原理

什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更

新为最新的值。

Object.defineProperty为对象中的每一个属性，设置get和set方法,

每个声明的属性，都会有一个专属的依赖收集器subs,当页面使用到某个属

性时，触发ObjectdefineProperty-get函数，页面的watcher就会被放到

属性的依赖收集器subs中，在数据变化时，通知更新；当数据改变的时候，

会触发ObjectdefineProperty-set函数,数据会遍历自己的依赖收集器

subs,逐个通知watcher,视图开始更新。

Vue3.x双向绑定响应卷据原理，Proxy可以直接监听对象和数组的变化,

并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能

优化。Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？判断当

前Reflectget的返回值是否为Object,如果是U照通过reactive方法做代理，

这样就实现了深度观测。监测数组的时候可能触发多次get/set,那么如何防止

触发多次呢？我们可以判断key是否为当前被代理对象target自身属性，也可

以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行

trigger.

六、vue的优点是什么?

低耦合。视图(View)可以独立于Model变化和修改，一个ViewModel

可以绑定到不同的"View"上,当View变化的时候Model可以不变，当

Model变化的时候View也可以不变。

可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多

view重用这段视图逻辑。

独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设

计人员可以专注于页面设计，使用ExpressionBlend可以很容易设计界面并生

成xml代码。

可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来

写。

七、vue中v-if和v-show有什么区别?

v-if和v-show都会让元素显示和隐藏,但是v-if是通过移除和添加dom

元素,v-show是通过display:none来实现隐藏，v-show是css切换,v-if是

完整的销毁和重新创建，使用频繁切换时用v-show,运行时较少改变时用v-if,

V-if='false'v-if是条件渲染，当false的时候不会渲染，使用v-if的时候，

如果值为false,那么页面将不会有这个html标签生成，v-show则是不管值是

为true还是false,html元素都会存在,只是css中的display显示或隐藏，

v-show仅仅控制元素的显示方式，将display属性在block和none来回切

换；而v-if会控制这个DOM节点的存在与否。当我们需要经常切换某个元素

的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或

隐藏时，使用v-if更加合理。

八、vue中的父子组件传值和兄弟组件传值都是如何实现的?

父向子传值，主要通过子组件的props,获取父组件绑定的数据

子向父传值，主要通过子组件利用$emit触发父组件上的事件，兄弟组件传

值利用eventbus的方式，主要利用创建一个空的vm实例，作为中间者。

组件是vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这

就意味着不同组件之间的数据无法相互引用。针对不同的使用场景，如何选择行

之有效的通信方式？

1：prop