京东工业一面凉4-18

分享一下之前的面经,就当给自己攒点人品啦拷打实习和项目URL输入到渲染页面的流程水平垂直居中实现方式原型链一个原型链相关的题,讲输出结果闭包闭包的应用场景有哪些for(var i=1;i<=3;i++){ return function(){ return i* i }}讲输出let 和 var的区别说说内存泄露内存泄露的例子promisepromise和async await有什么关系如何选择是使用promise还是async,使用场景有哪些Vue2和Vue3的区别Vue和React的区别双向绑定原理key的作用为什么key可以提升算法效率key一定可以提升效率吗git fetch 和...

你在组件库项目中用到了Vue3的Composition API对比Options API有什么优势vue2v3原理分别是什么，v3解决了v2的什么问题Pinia和Vuex的区别是什么为什么选择Pinia做状态管理如何实现Vue3组件的全局注册和按需引入需要处理哪些问题性能优化具体指标几个要了解你提到首屏渲染从3s优化到1.6s具体做了哪些措施如何量化效果项目里如何处理errorIntersection Observer除了图片懒加载还能解决哪些前端问题，懒加载原理，别的方案了解吗为什么选择Vitest而不是Jest，Vitest在Vite项目中的优势是什么，如何写一个测试用例PostCSS和SassLess有什么区别你们为什么用BEM+PostCSS的方案组件库的TypeScript类型推导是如何设计的 遇到过的复杂类型问题怎么解决ts在项目的好处坏处，项目用了ts吗具体聊聊某个组件设计细节 某个复杂功能是如何实现单元测试覆盖率90%是如何统计的包含哪些场景，如何测试组件的交互行为电商项目里面路由权限拦截的具体实现方案如何和后端权限系统配合购物车数据持久化方案的选择过程对比localStorage和IndexedDB，和别的状态存储方式的区别如果商品列表页出现滚动卡顿你会如何排查和解决从输入URL到页面渲染详细说明HTTP缓存强缓存协商缓存的作用节点浏览器Event Loop机制如何影响Vue的nextTick实现CSS变量和预处理器变量如Sass变量在浏览器渲染流程中的区别常见的git命令，如果git merge出现冲突你的标准解决流程是什么如何预防冲突你的组件库和Element Plus有什么区别解决了什么Element没有解决的问题为什么选择读研为什么选择前端而不是后端对新的前端前沿技术有关注吗，具体了解的是什么了解最新的es特性吗，不是es6，说说你知道的最新的js语法

一面（2025/04/22）1. 本科学的大数据，为什么选前端2. OJ 项目 24 年 6 月结束，那这中间做了什么。回答搞横向+小论文，然后最近搞泡泡图项目，问横向是跟什么有关3. 做项目之前怎么学习的4. 301 302 304 分别是什么5. css 选择器6. Vue31. 生命周期（这里竟然忘了具体的名字了！说着说着给自己绕晕了，然后答的 create 有两个、mount 有两个、update 有两个、unmount 有两个。。。）2. onMounted 主要做什么3. onUnmounted 呢4. Diff 算法7. 项目中有没有用过防抖节流等函数，说到了 OJ 里防抖的使用1. 那防抖怎么实现的，答得 setTimeout2. 那 setTimeout 会产生什么影响，不知道3. 那问你另外一个问题，JS 事件循环4. 结合事件循环，再考虑第二个问题呢5. 提示了时间可能并不准确（可以看看别人的实现是怎么避免这个影响的）8. 了解打包工具 Webpack 和 Vite 吗，优缺点呢9. 重构 OJ 时有遵循一些什么原则或者规范，母鸡，猜了模块化和单一职责原则（不是说的名字，而是说的方法跟这两个原则比较类似）10. Git1. 会用 Git 吗，流程是怎么样的2. 如何撤销提交（面试官夸我说面了这么多校招生是唯一一个知道这个的）3. PR 之后如何撤销提交，这个不会，面试官也说这题超纲了11. 有用过 Cursor、Windsurf 吗，我回答的 Trae，1. 使用体验，与大模型有什么不一样的2. 有没有提前做一些配置比如告诉模型我这个项目是做什么的（我直接拿来就用了，没有这个过程）12. 写一个 Prompt，题目是实现一个搜索框13. 手撕：最长递增子序列14. 反问：技术栈、工作时间面试官长得好看，人还特别好，对我特别有耐心，面试过程中更像是聊天，会总结你说的话，也会给你提示和建议。最后手撕题遇到了一个之前秒做的题目，以为两分钟写完，结果 debug 了十分钟，不过面试官很耐心地一直等我写完，最后终于是写出来了。(ಥ_ಥ)

一面 1.介绍一下项目2.有做权限吗3.登陆之后的权限，比如说我能操作哪些文章，不能操作哪些文章（刚刚说的是如何保存登陆态）查看文章的时候最终需要拉取一个接口去查看文章，如果我已经获取了这个接口并且不断用Postman伪造发请求，如何处理这种情况？先回答在请求头里带上Token，面试官说如果通过抓包拿到了Token那怎么办呢，回答在axios请求拦截器里面去对同一来源的请求做预防，如果两次请求发送的时间太短暂或者频率太快就拦截这个请求。4.目前技术栈5.localStorage和cookie有什么区别？Cookie 的本职工作并非本地存储，而是“维持状态”。 因为HTTP协议是无状态的，HTTP协议自身不对请求和响应之间的通信状态进行保存Cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie是服务端生成，客户端进行维护和存储。我们可以把Cookie 理解为一个存储在浏览器里的一个小小的文本文件，它附着在 HTTP 请求上，在浏览器和服务器之间“飞来飞去”。它可以携带用户信息，当服务器检查 Cookie 的时候，便可以获取到客户端的状态。通过cookie,可以让服务器知道请求是来源哪个客户端，就可以进行客户端状态的维护，比如登陆后刷新，请求头就会携带登陆时response header中的set-cookie,Web服务器接到请求时也能读出cookie的值，根据cookie值的内容就可以判断和恢复一些用户的信息状态。我们可以在响应头中的set-cookie中获取cookie，也可以直接使用js的document.cookie来设置cookiecookie的缺陷：1不够大 每个cookie大小限制在4KB左右，cookie只能存储少量的信息，但这里的4KB是指一个cookie的键值对的值的大小，不是所有的一个域名下所有cookie的总大小 2同一个网站每次请求都会携带cookie 会带来性能浪费，增加不必要的开销cookie存储在浏览器和服务器LocalStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。大小为5M左右仅在客户端使用，不和服务端进行通信除非手动删除，否则会永久存储在浏览器本地，相对更安全一般来说cookie存储与服务器进行交互的少量数据比如token（会话标识session_id信息）等，而localstorage存储大量的、仅前端使用的持久化数据（缓存的用户信息）。不能在 localStorage 中存储敏感信息（如密码、身份证号），因为它容易被 XSS 攻击访问到XSS：跨站脚本攻击：在其他浏览器中注入恶意的可执行的脚本代码，从而达到恶意攻击的目的。比方说一个用户评论功能，输入“<p>用户评论：<script>alert('你被攻击了')</script></p>”其他人浏览这条评论时就会看到弹窗，这说明脚本被执行了，那么攻击者就可以做更危险的事情比如获取Cookie，操作或者删除DOM等等反射型（构造恶意URL，用户点击链接会发送请求，服务器会把请求的脚本作为数据的一部分返回浏览器，浏览器随机解析了这段恶意代码）DOM型（如例子，构造特定的输入引起前端更新，使用闭合标签修改DOM解构）存储型（将恶意代码提交到网站的数据库中，访问网站时，恶意代码从数据库中被读入执行）防范措施：前后端在处理用户输入的内容时，都需要保持谨慎，对其中的特殊字符进行过滤和转义。使用安全的编程方式，譬如避免使用危险的 innerHTML 去设置 HTML 内容，而是使用 textContent。HttpOnly 是一个 Cookie 的标志，表示该 Cookie 只能通过 HTTP 请求发送，而无法通过 JavaScript 访问。这有助于防止 跨站脚本攻击（XSS）本质上Cookie用于通信，而LocalStorage用于存储6.服务器返回token存储在localStorage里，那这个token是不是会一直存在？登陆之后，用户就一直保持登陆状态？Token在后端一般会设置他的过期时间7.平时如何去学习？怎么去做这个项目的？8.追问：你说你刚才说看别人的项目源码，你看过哪个项目？开源项目的一些源码呀？9.Pinia是干嘛的10.使用全局变量和Pinia有什么区别？Pinia的几个重点：Store全局状态管理、响应式更新、Composition API、支持模块化、支持devtools使用全局变量的缺点：缺乏响应式、不能支持模块化、无法使用调试工具11.Pinia的数据存储在哪里？内存，一旦刷新页面，内存被清空，pinia的数据也会丢失。想要实现持久化存储，需要使用持久化插件使用watch监听store数据的变化，把数据存储在LocalStorage里，以后每次登陆网站都使用这个LocalStorage存储的数据。12.TCP和UDP的区别？TCP是可靠的，需要通过连接（三次握手），有流量控制和拥塞控制，传输速度较慢，传输单位是字节流（连续、无边界的数据传输方式，像水流一样不分段）UDP是不可靠的，不需要通过连接，没有流量控制和拥塞控制，传输速度较快，传输单位是数据报（独立、封包形式的数据传输方式，每一段都是一个独立的单元）流量控制：流量控制的核心目的是确保数据的发送速率不超过接收方的处理能力，防止接收方的缓冲区溢出。具体原理如下：1.接收方窗口大小：接收方为发送方提供一个 接收窗口大小（Window Size），表示它可以处理的最大数据量。这个值会动态变化，接收方会不断告诉发送方它当前的接收能力。2.滑动窗口机制：TCP协议采用 滑动窗口机制，发送方根据接收方的窗口大小来决定发送数据的数量。窗口大小可以根据接收方的缓冲区大小动态调整。当接收方的缓冲区可用空间减少时，它会通过窗口大小减小发送方可以发送的数据量。3.发送方控制：发送方根据接收方提供的窗口信息调整数据的发送速率。如果接收方的接收窗口变小，发送方就会减慢发送速率，避免数据丢失拥塞控制：拥塞控制的核心目的是避免网络拥塞，防止整个网络的性能因数据过载而下降。TCP协议采用了多种机制来动态调整发送方的发送速率。具体原理如下：1.慢启动：TCP连接刚建立时，发送方的拥塞窗口（Congestion Window，CWND）很小。随着每次成功的确认（ACK）到达，窗口逐渐增大。这个过程称为 慢启动。慢启动的目标是渐进地增加发送速率，避免网络立即出现拥塞。2.拥塞避免：一旦窗口增大到一定程度（慢开始门限），TCP会进入 拥塞避免 阶段。在这个阶段，拥塞窗口的增大变得更加缓慢（每收到一个确认，窗口增大一个固定值）。这个阶段是为了避免突然增大的窗口造成网络过载。3.快速重传和快速恢复：•快速重传：当发送方收到三个相同的确认号（即出现丢包情况），它会立即重发丢失的数据包，而不是等待超时。•快速恢复：当发生丢包后，拥塞窗口的大小会被减少，并进入 快速恢复 阶段，继续发送数据，但在一个较小的窗口下，直到网络恢复正常13.两个JS题第一个是实现异步相加，第二个是实现一个QQman类，满足异步输出14.https和http有什么区别？http是明文传输，https在http基础上使用了TLS加密15.讲一讲TLS16.讲讲对称加密和非对称加密对称加密：发送方和接收方用同样的规则对数据进行加密，也可以使用同样的钥匙对数据进行解密，缺点就在于如果第三方知道了加密的规则，他就很容易进行破解传输数据。（AES算法）非对称加密：公钥：可以共享给任何人的加密措施，一般用于加密。私钥：只有拥有者持有的加密措施，一般用于解密。使用对方的公钥加密数据，这样传输的内容只有对方使用自己的私钥才能解密，就算是发送方也无法解密，这就保证了加密的有效性。RSA算法非对称加密更加安全，但是速度太慢，不适合传输大型文件，一般用于交换密钥或者身份认证。对称加密速度更快，可以用来传输大量数据。17.对称加密和非对称加密分别用于什么？18.为什么不全部使用非对称加密让传输更安全？19.做电商平台有遇到什么难点吗20.说说遇到的难点以及是怎么解决的（说了全局数据共享，使用Pinia代替了ref）21.如果一个页面它不展示，但是用了那个 Pinia 里面的一个数据，数据更改的时候，看不见的那个页面的 demo 会不会更改？讲了一下响应式更新 defineProperty proxy watcher update22.了解过vue2吗？vue2和vue3你觉得有哪些不同讲了一下组合式API和选项式API23.追问：讲讲Composition API和Options API的区别相同功能的逻辑可写在一起，复用性更强，更支持TS如何解释复用性更强？vue2相较于vue3的话vue2是没有ref这个响应式变量的声明的。他的响应式是通过data（）、computed、watch等这些API定义在组件的内部来实现的，而不是通过组合函数复用。在vue3里组合式APi可以将相似的逻辑封装成独立的组合函数并导出，其他组件再导入这个函数就可以直接使用（优点：响应式、自动绑定生命周期钩子）24.了解TS吗？不是很了解，说说泛型25.后台怎么解决的我说用的Mock.js，因为不会后端，也没有和别人一起开发这个项目。面完无缝接二面，字数超了，新帖发。