5.9腾讯PCG前端一面

简单问了下项目Redis和MySQL之间怎么做选型数据库为什么要做索引写数据库sql的时候怎么做优化的进程和线程的区别K8s和Docker之间的关系（根据项目问的）跨域问题怎么理解vue3的组合式APICSS样式表优先级状态管理中间件优缺点组件间通信方式怎么做本地存储的可能还有的想不起来了，中间穿插闲聊手撕--原地删除数组出现超过3次的重复项问答--15匹马，5个赛道，选出5匹最快的需要几轮比赛已挂继续努力

时长：35+10，共计45分钟左右1，项目挖掘要分享的项目难点？引出历史搜索记录的实现过程？redux实现历史搜索记录的话，每次重新登录都是空数据吗？每次用户登录，怎么实现之前的历史搜索记录还在？根据回答引出localstorage的大小？（这里应该是想和我探讨我方法的不合理性）cookie设置有效期的问题？浏览器缓存机制？（是什么，类别，缓存方式）如果本地缓存的资源有bug，我现在修改了资源的bug，根据浏览器缓存原理，接下来会发生什么？根据简历中提到的上线检测，问了捕获js错误的方式有哪些？闭包？由闭包引申出，如何解决闭包可能带来的内存泄漏问题？问VUE和react哪个熟悉一些？我说都行，...

一面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，因为不会后端，也没有和别人一起开发这个项目。面完无缝接二面，字数超了，新帖发。

公众号&小程序&微信小店团队1h 40min算法题题目发过来后让我先写 一个小时后交给他1. 两个链表求和2. 打家劫舍33. 判断两个二叉树是否相同（数据和结构）4. 求两个有序数组的中位数 要求时间复杂度o(log(m+n))一个小时写完交给面试官，说看一下 之后差不多两分钟开始面试自我介绍为什么选前端 不选别的方向问写算法题的思路，对题目进行一些更改，问更改后怎么解决。算法2的思路，怎么想的，专业一点这个思路叫什么（回答动态规划），什么是动态规划？什么是贪心？贪心以及动态规划得出的答案是最优解吗？算法3中我用的dfs，问不用递归如何解决。（回答bfs用队列）说一下用队列怎...