中级前端面试题2022

1、中级前端面试题2022中级前端面试题目总结如下：一、一个完整的URL解析过程：用户输入URL地址，对URL地址进行DNS域名解获得IP地址，建立 TCP连接（三次握手），浏览器向web服务器发送一个HTTP请求报文，服 务器返回HTTP响应报文给客户端，关闭TCP连接（四次挥手）,浏览器解析 文档资源并渲染页面。解析过程：浏览器解析的资源（html , svg,Xhtml等），解析完成后都会生 成一个完整的DOM Tree , css资源则会解析成CSS Rule Tree ,生成之后进行 浏览器渲染，保证脚本执行前已完成DOM渲染会放在body标签结束之后。二、EventLoop 是什么?E

2、vent Loop即事件循环，是指浏览器或Node的一种解决JavaScript单线 程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理，是T 程序结构, 用于等待和发送消息和事件。执行过程：事件循环的111页序,决定了 JavaScript代码的执行顺序。它从 script（整体代码）开始第一次循环（即宏任务X之后全局上下文进入函数调用栈。 直到调用栈清空（只剩全局）,然后执行所有的micro-task （微任务当所有可 执行的micro-task （微任务）执行完毕之后。循环再次从macro-task （宏任务） 开始，找到其中一个任务队列执行完毕，然后再执行所有的micro-tas

3、k （微任 务），这样一直循环下去。三、什么是HTTP和HTTPSHTTP :超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议，所有 的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和 接收HTML页面的方法。HTTPS ：是一种通过计算机网络进行安全通信的传输协议，经由HTTP进 行通信,利用SSL/TLS建立全信道,加密数据包。HTTPS使用的主要目的是提 供对网站服务器的身份认证，同时保护交换数据的隐私与完整性。PS:TLS是传输层加密协议,前身是SSL协议,由网景公司1995年发布， 有

4、时候两者不区分。四、https加密方式共享密钥加密（对称密钥加密）：客户端和服务器公用一个密匙用来对消息 加解密，这种方式称为对称加密。客户端和服务器约定好一个加密的密匙。客户 端在发消息前用该密匙对消息加密，发送给服务器后，服务器再用该密匙进行解 密拿到消息。公开密钥加密（非对称密钥加密）：客户端和服务端均拥有一个公有密匙和 一个私有密匙。公有密匙可以对外暴露，而私有密匙只有自己可见。使用公有密 匙加密的消息，只有对应的私有密匙才能解开。反过来，使用私有密匙加密的消 息，只有公有密匙才能解开。这样客户端在发送消息前，先用服务器的公匙对消 息进行加密，服务器收到后再用自己的私匙进行解密。五、V

5、ue2.X的双向绑定响应式原理什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更 新为最新的值。Object.defineProperty为对象中的每一个属性，设置get和set方法,每个声明的属性，都会有一个专属的依赖收集器subs ,当页面使用到某个属 性时，触发ObjectdefineProperty - get函数，页面的watcher就会被 放至U 属性的依赖收集器subs中，在数据变化时，通知更新；当数据改变的时候， 会触发ObjectdefineProperty -set函数，数据会遍历自己的依赖收集器 subs ,逐个通知watcher,视图开始更新。Vue3.

6、x双向绑定响应式健康里，Proxy可以直接监听对象和数组的变化, 并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能 优化。Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢?判断当 前Reflect.get的返回值是否为Object,如果是则再通过reactive方法做代理， 这样就实现了深度观测。监测数组的时候可能触发多次get/set,那么如何防止 触发多次呢?我们可以判断key是否为当前被代理对象target自身属性，也可 以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行 trigger。六、vue的优点是什么？低耦合。视图(View

7、)可以独立于Model变化和修改，一个ViewModel 可以绑定到不同的View上,当View变化的时候Model可以不变，当 Model变化的时候View也可以不变。可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多 view重用这段视图逻辑。独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设 计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生 成xml代码。可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来 写。七、vue中v-if和v-show有什么区别?v-if和v-show都会让元素显

8、示和隐藏，但是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会

9、控制这个DOM节点的存在与否。当我们需要经常切换某个元素 的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或 隐藏时，使用v-if更加合理。八、vue中的父子组件传值和兄弟组件传值都是如何实现的？父向子传值，主要通过子组件的props ,获取父组件绑定的数据子向父传值，主要通过子组件利用$emit触发父组件上的事件，兄弟组件传 值利用eventbus的方式，主要利用创建T空的vm实例，作为中间者。组件是vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这 就意味着不同组件之间的数据无法相互引用。针对不同的使用场景，如何选择行 之有效的通信方式？： props emit缺点：如果组件嵌套层次多的话，数据传递比较繁琐；: provide