前端面试

公司推送了一个前端的简历，需要面试查了下需要面试的资料：

聊聊项目，遇到的问题是什么？项目技术难点，怎么调研技术方案，怎么从用户层考虑优化方案

如何解决的，现在的方案是否完善，有没有更好的方案；

1、. HTTPS怎么保证数据传输安全

参考：HTTPS如何保证数据传输安全性

2. canvas和svg的区别是什么？canvas如何进行局部刷新(局部重绘)？

参考：前端绘图方式Canvas和SVG的区别

能否实现canvas的局部刷新 ，参考：怎么实现局部刷新页面_AntV Canvas 局部渲染总结

适用范围不同

由于Canvas 和 SVG 的工作机制不同，

Canvas是逐像素进行渲染的，一旦图形绘制完成，就不会继续被浏览器关注。而SVG是通过DOM操作来显示的。

所以Canvas的文本渲染能力弱，而SVG最适合带有大型渲染区域的应用程序，比如地图。

而Canvas 最适合有许多对象要被频繁重绘的图形密集型游戏。

而SVG由于DOM操作 在复杂度高的游戏应用中 会减慢渲染速度。所以不适合在游戏应用。
————————————————

 

 

2.、输入URL 比如 www.baidu.com 到渲染页面的全过程

三次挥手，四次握手；

当在浏览器中输入 www.baidu.com 并且按下回车之后发生了什么？

（1）解析URL： 首先会对 URL 进行解析，分析所需要使用的传输协议和请求的资源的路径。如果输入的 URL 中的协议或者主机名不合法，将会把地址栏中输入的内容传递给搜索引擎。如果没有问题，浏览器会检查 URL 中是否出现了非法字符，如果存在非法字符，则对非法字符进行转义后再进行下一过程。

（2）缓存判断： 浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓存里并且没有失效，那么就直接使用，否则向服务器发起新的请求。

（3）DNS解析： 下一步首先需要获取的是输入的 URL 中的域名的 IP 地址，首先会判断本地是否有该域名的 IP 地址的缓存，如果有则使用，如果没有则向本地 DNS 服务器发起请求。本地 DNS 服务器也会先检查是否存在缓存，如果没有就会先向根域名服务器发起请求，获得负责的顶级域名服务器的地址后，再向顶级域名服务器请求，然后获得负责的权威域名服务器的地址后，再向权威域名服务器发起请求，最终获得域名的 IP 地址后，本地 DNS 服务器再将这个 IP 地址返回给请求的用户。用户向本地 DNS 服务器发起请求属于递归请求，本地 DNS 服务器向各级域名服务器发起请求属于迭代请求。

（4）获取MAC地址： 当浏览器得到 IP 地址后，数据传输还需要知道目的主机 MAC 地址，因为应用层下发数据给传输层，TCP 协议会指定源端口号和目的端口号，然后下发给网络层。网络层会将本机地址作为源地址，获取的 IP 地址作为目的地址。然后将下发给数据链路层，数据链路层的发送需要加入通信双方的 MAC 地址，本机的 MAC 地址作为源 MAC 地址，目的 MAC 地址需要分情况处理。通过将 IP 地址与本机的子网掩码相与，可以判断是否与请求主机在同一个子网里，如果在同一个子网里，可以使用 APR 协议获取到目的主机的 MAC 地址，如果不在一个子网里，那么请求应该转发给网关，由它代为转发，此时同样可以通过 ARP 协议来获取网关的 MAC 地址，此时目的主机的 MAC 地址应该为网关的地址。

（5）TCP三次握手： 下面是 TCP 建立连接的三次握手的过程，首先客户端向服务器发送一个 SYN 连接请求报文段和一个随机序号，服务端接收到请求后向服务器端发送一个 SYN ACK报文段，确认连接请求，并且也向客户端发送一个随机序号。客户端接收服务器的确认应答后，进入连接建立的状态，同时向服务器也发送一个ACK 确认报文段，服务器端接收到确认后，也进入连接建立状态，此时双方的连接就建立起来了。

（6）HTTPS握手： 如果使用的是 HTTPS 协议，在通信前还存在 TLS 的一个四次握手的过程。首先由客户端向服务器端发送使用的协议的版本号、一个随机数和可以使用的加密方法。服务器端收到后，确认加密的方法，也向客户端发送一个随机数和自己的数字证书。客户端收到后，首先检查数字证书是否有效，如果有效，则再生成一个随机数，并使用证书中的公钥对随机数加密，然后发送给服务器端，并且还会提供一个前面所有内容的 hash 值供服务器端检验。服务器端接收后，使用自己的私钥对数据解密，同时向客户端发送一个前面所有内容的 hash 值供客户端检验。这个时候双方都有了三个随机数，按照之前所约定的加密方法，使用这三个随机数生成一把秘钥，以后双方通信前，就使用这个秘钥对数据进行加密后再传输。

（7）返回数据： 当页面请求发送到服务器端后，服务器端会返回一个 html 文件作为响应，浏览器接收到响应后，开始对 html 文件进行解析，开始页面的渲染过程。

（8）页面渲染： 浏览器首先会根据 html 文件构建 DOM 树，根据解析到的 css 文件构建 CSSOM 树，如果遇到 script 标签，则判端是否含有 defer 或者 async 属性，要不然 script 的加载和执行会造成页面的渲染的阻塞。当 DOM 树和 CSSOM 树建立好后，根据它们来构建渲染树。渲染树构建好后，会根据渲染树来进行布局。布局完成后，最后使用浏览器的 UI 接口对页面进行绘制。这个时候整个页面就显示出来了。

（9）TCP四次挥手： 最后一步是 TCP 断开连接的四次挥手过程。若客户端认为数据发送完成，则它需要向服务端发送连接释放请求。服务端收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，此时表明客户端到服务端的连接已经释放，不再接收客户端发的数据了。但是因为 TCP 连接是双向的，所以服务端仍旧可以发送数据给客户端。服务端如果此时还有没发完的数据会继续发送，完毕后会向客户端发送连接释放请求，然后服务端便进入 LAST-ACK 状态。客户端收到释放请求后，向服务端发送确认应答，此时客户端进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有服务端的重发请求的话，就进入 CLOSED 状态。当服务端收到确认应答后，也便进入 CLOSED 状态。

5.  怎么提升一个页面的渲染速度，性能

比如我有一个十万座位的大型的场馆，很多人同时进入购票的话，已经很慢，可能会卡死，那该如何提升渲染的速度和性能？

6. 大型文件传输，前后端分别怎么处理，数据流上的具体操作

大文件的上传，如何设计，比如 百度很多的图片一起加载，或者一个大型的场馆的加载

参考：页面渲染性能的优化 

14. 你对首屏时间，可交互时间等概念的理解和看法

15. 跨域解决方案

参考：跨域的五种解决方案详解

cors技术

16. xss、csrf攻击原理和防范

参考：XSS、CSRF原理及防御

Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等

XSS 常见的注入方法：

在 HTML 中，恶意内容以 script 标签形成注入。
在标签的 href、src 等属性中，包含 javascript: (伪协议)等可执行代码。
onload、onerror、onclick 等事件中，注入不受控制代码。
在 style 属性和标签中，包含类似 background-image:url(“javascript:…”); 的代码（新版本浏览器已经可以防范）
 

 

 17、说vue的生命周期的理解

命周期通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
beforecreate （初始化界面前）
created （初始化界面后）
beforemount （渲染界面前）
mounted （渲染界面后）
beforeUpdate （更新数据前）
updated （更新数据后）
beforedestory （卸载组件前）
destroyed （卸载组件后）处理组件配置项；初始化根组件时进行了选项合并操作，将全局配置合并到根组件的局部配置上；初始化每个子组件时做了一些性能优化，将组件配置对象上的一些深层次属性放到 vm.$options 选项中，以提高代码的执行效率；
初始化组件实例的关系属性，比如 p a r e n t 、 parent、parent、children、r o o t 、 root、root、refs 等
处理自定义事件
调用 beforeCreate 钩子函数
初始化组件的 inject 配置项，得到 ret[key] = val 形式的配置对象，然后对该配置对象进行响应式处理，并代理每个 key 到 vm 实例上
数据响应式，处理 props、methods、data、computed、watch 等选项
解析组件配置项上的 provide 对象，将其挂载到 vm._provided 属性上
调用 created 钩子函数
如果发现配置项上有 el 选项，则自动调用 $mount 方法，也就是说有了 el 选项，就不需要再手动调用 $mount 方法，反之，没提供 el 选项则必须调用 $mount
接下来则进入挂载阶段

 

18、Vue初始化过程中（new Vue(options)）都做了什么

 

19、SPA首屏加载速度慢的怎么解决？

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容；

加载慢的原因

网络延时问题
资源文件体积是否过大
资源是否重复发送请求去加载了
加载脚本的时候，渲染内容堵塞了
常见的几种SPA首屏优化方式

减小入口文件积
静态资源本地缓存
UI框架按需加载
图片资源的压缩
组件重复打包
开启GZip压缩
使用SSR

 20、Vue 的生命周期方法有哪些 一般在哪一步发请求

 

beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问

created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。这里没有 e l , 如 果 非 要 想 与 D o m 进 行 交 互 ， 可 以 通 过 v m . el,如果非要想与 Dom 进行交互，可以通过 vm. el,如果非要想与Dom进行交互，可以通过vm.nextTick 来访问 Dom

beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted 在挂载完成后发生，在当前阶段，真实的 Dom 挂载完毕，数据完成双向绑定，可以访问到 Dom 节点

beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁（patch）之前。可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程

updated 发生在更新完成之后，当前阶段组件 Dom 已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新，该钩子在服务器端渲染期间不被调用。

beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。我们可以在这时进行善后收尾工作，比如清除计时器。

destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

activated keep-alive 专属，组件被激活时调用

deactivated keep-alive 专属，组件被销毁时调用

异步请求在哪一步发起？

可以在钩子函数 created、beforeMount、mounted 中进行异步请求，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。

如果异步请求不需要依赖 Dom 推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

能更快获取到服务端数据，减少页面 loading 时间；

ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

 

21、你知道Vue3.x响应式数据原理吗？

ue3.x改用Proxy替代Object.defineProperty。

因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？

判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。

监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

 

 

22、Vuex响应式数据/双向绑定原理

Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据。其中，View变化更新Data，可以通过事件监听的方式来实现，所以 Vue数据双向绑定的工作主要是如何根据Data变化更新View。

简述：

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

 

深入理解：
监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。

解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。

订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新——这是一个典型的观察者模式

订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。

Vue 双向数据绑定原理
数据的双向绑定是通过数据劫持结合发布订阅实现的。利用Object.defineproperty()方法将各个属性的getter和setter方法改写。当数据发生改变的时候，通知订阅者，并触发对应的回调函数，重新渲染数据。主要是实现以下几点：

(1) 数据观察者Observer，观察每个属性，当发生变化的时候，得到最新值并通知订阅者。

(2) 指令编译器Compile，对每个元素的节点进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。

(3) 监听者Watcher，是数据观察者Observer和编译器Compile的桥梁。能订阅每个数据属性变化，当收到变化通知后，执行指令绑定的相应回调，从而更新视图。

vue会遍历data中的所有属性，利用Object.definedProperty这个方法给data中每一个属性增加监听者，即给每一个属性增加get方法和set方法，当数据发生变化时，会触发set方法，当获取数据时，会触发get方法；

数据劫持
Object.defineProperty()

控制一个对象属性的一些特有操作，比如读写权、是否可以枚举

通过get和set方法对data里的每个属性进行劫持

发布者-订阅者模式
监听器Observer 用来劫持并监听所有属性，如果有变动的，就通知订阅者。

订阅者Watcher 可以收到属性的变化通知并执行相应的函数，从而更新视图

解析器Compile 可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器

订阅器Dep 订阅者（watcher）是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者

每一个对象属性中存储了一个 Dep，Dep 中收集了该对象对应的 watcher，当该属性值发生变化，会触发的 Dep 中保存的 watcher 进行遍历（notify），进而更新视图。

原文链接：https://blog.csdn.net/m0_57077948/article/details/137728351 

7. 项目技术难点，怎么调研技术方案，怎么从用户层考虑优化方案

直播信息流； 

8、我们现在的http的长链接 和短连接；

分享的场景上面；

用过voe的组件是如何进行通讯的；

子到父

voe的路由守卫

 

 

 

 

 

 

 

 

1. 项目介绍

3. 场景题：前端给页面加水印，说说各种编码的特点，说说数字签名的特点

4. 场景题：实现协同编辑，说说你认为的技术关键点

5. js数据类型，怎么区别array和object
6. 原型链，es

6 class怎么设置原型、静态、实例方法

7. let、const区别，const声明了数组，还能push元素吗，为什么？

8. 说说你经常使用到的array方法，类数组怎么转换为数组，说说你知道的所有方法
9. DOM怎么添加事件

10. cookie、localstorage的区别，哪些情况和设置，请求不会携带cookie
11. 说说fetch，优缺点？怎么做polyfill

12. Vue data为什么是函数，深拷贝、浅拷贝

 

13. Vue使用nextTick的原因和作用，项目哪些场景用到了nextTick

 

 

 

 

1. 项目介绍

2. 项目核心功能，实现方案，难点，优化方案 

4. 说说ip协议

5. p2p数据传输具体流程与设计

 

7. 秒传、分片传输、断点传输的具体实现和细节

8. MTP的作用（不知道。。。下来百度说是媒体传输协议）

9. 最小生成树的定义和构建过程，知道的算法实现思路都说一下

10. TopN问题，堆和归并如何配合使用？有没有其他方法？

举一个场景 

1. 擅长哪些计算机基础知识(算法和数据结构)

2. B树、B+树的区别

3. 常用的排序算法，时间复杂度和空间复杂度分别是多少，说说快排的优化

4. 栈、队列、堆的分别使用场景，链表平时有用到吗

5. 手写题：LRU的实现(说实话，很少刷题，居然不知道LRU，在面试官的功能描述下，自己实现了)

6. 场景题：长字符串在长文本的模式匹配，要求时间复杂度尽可能低（归并查找 + 模式匹配）

7. KMP算法和KMP改进算法的具体思路和实现方法

8. MAP、SET的区别

9. HTTPS怎么保证数据安全

11. 了解浏览器渲染引擎有哪些，渲染机制是怎样的吗，举例说明一下 

 

 

5. 平时怎么学习技术知识

6. 其他人给你出的，你觉得最有用的建议

7. 给你印象最深的挫折

8. 抗压能力如何，如何解压，举个例
子

10. 父母情况，对你去外省工作的看法

 

11. 职业发展规划

12. 你觉得自己今后需要不断加强，改进的点

13. offer情况

14. 选择光大的原因

 

参考：阿里前端常见面试题（附答案）

参考：2024年 Vue经典面试题 -- 必问知识点 --（包含答案），2024年最新2024最新前端面试笔试题目分享