中级前端面试题2022.docxVIP

中级前端面试题 2022 中级前端面试题目总结如下： 一、一个完整的 URL 解析过程： 用户输入 URL 地址，对 URL 地址进行 DNS 域名解获得 IP 地址， 建立TCP 连接（三次握手），浏览器向 web 服务器发送一个 HTTP 请求报文， 服务器返回 HTTP 响应报文给客户端，关闭 TCP 连接（四次挥手），浏览器解析文档资源并渲染页面。 解析过程：浏览器解析的资源（html，svg,Xhtml 等），解析完成后都会生成一个完整的 DOM Tree ，css 资源则会解析成 CSS Rule Tree，生成之后进行浏览器渲染，保证脚本执行前已完成 DOM 渲染会放在 body 标签结束之后。 二、EventLoop 是什么？ Event Loop 即事件循环，是指浏览器或 Node 的一种解决 javaScript 单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理，是一个程序结构，用于等待和发送消息和事件。 执行过程： 事件循环的顺序，决定了 JavaScript 代码的执行顺序。它从script(整体代码)开始第一次循环（即宏任务）。之后全局上下文进入函数调用栈。直到调用栈清空(只剩全局)，然后执行所有的 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 中，在 数据变化时，通知更新；当数据改变的时候， 会触发 Object.defineProperty - set 函数，数据会遍历自己的 依赖收集器subs，逐个通知 watcher，视图开始更新。 Vue3.x 双向绑定响应式数据原理，Proxy 可以直接监听对象和数组的变化，并且有多达 13 种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。Proxy 只会代理对象的第一层，Vue3 是怎样处理这个问题的呢？判断当前 Reflect.get 的返回值是否为 Object，如果是则再通过 reactive 方法做代理，这样就实现了深度观测。监测数组的时候可能触发多次 get/set，那么如何防止触发多次呢？我们可以判断 key 是否为当前被代理对象 target 自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。 六、vue 的优点是什么？ 低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的View上，当 View 变化的时候 Model 可以不变，当Model 变化的时候 View 也可以不变。 可重用性。你可以把一些视图逻辑放