4.运维岗 沃趣科技

## 时长 70 分钟 北京合思招聘系统### 1.自我介绍环节### 2.做题环节（20 分钟左右）有 22 道选择（html,css,js,数据结构),一道算法题：字符串去重，我和面试官简单说了一下思路（new Set),然后他让我随便写一点交卷了### 3.项目，场景和八股环节（这个环节持续太长了，有些我实在是忘了）1.你是如何做到首屏优化的2.讲讲 CI/CD 是如何实现的3.项目中有使用过 webpack 和 vite 吗4.webpack 和 vite 有什么区别5.有没有使用过什么状态管理工具6.项目使用了什么缓存机制这里我展开讲讲。关于缓存数据，蜀黍使用了缓存头(Cache-Control)和 localStorge。项目中使用了 Promise.all 来进行并发请求，同时从服务器和本地缓存请求数据7.怎么获取的缓存数据localStorge，状态码 3048.缓存的过期时间9.NextJS 中如何设置代码在客户端运行10.NextJS 如何设置服务端运行（好像是这个问法)11.useEffect 中如何进行数据请求（丝滑切换至场景题）12.如果不同 useEffect 中相互依赖过多怎么办（反问面试官，竟然是退化至使用类式组件）13.如果我想让我的 useRef 使用外部的 props 应该怎么办（forwardRef）14.当我的父组件将一个可能会经常变化的 props 传递给子组件时，应该怎么办（useMemo）15.我想全局管理 props,并且防止出现 props drill 的问题，应该怎么办（useContext）16.我想使用 useRef 来实现一个可以返回窗口顶部的功能，应该怎么实现，使用哪些 API17.我想将一个二维数组转换为一维数组怎么办18.如果我的二维数组中不完全都是数组怎么办（instanceof、Array.isArray）19.实现 add(1)(2) === 3 （函数柯里化）20.如何实现 string 和 number 之间的相互转换21.如何改变 this 的指向22.你有没有用过什么 ES6 的新特性23.Promise 打印顺序```javascriptconst promise = new Promise((resolve, reject) => {  console.log(1)  resolve()  console.log(2)})promise.then(() => {  console.log(3)})console.log(4)```24.有没有使用过 typeof25.flex 布局中如何实现水平垂直居中26.如何消除 float 带来的影响27.给定一个完整的 URL，如何获取其查询参数28.React 19 和 React 18 有什么区别29.项目中是否有采用什么对静态资源的优化可能还有，但是暂时想不起来了## 时长 15 分钟 洋葱学园1.对于一个列表，我们通常会给其添加一个 key,可以不添加吗，如果不添加是否有什么问题？2.对于一个 H5 页面加载过慢，如何优化3.将 URL 输入搜索栏，浏览器会做什么4.如何实现进入视窗才进行懒加载5.如何在一个 JS 文件中白屏时返回 Loading 组件（我直接说了 React 和 NextJS 中如何实现哈哈）6.移动端适配7.如何处理重复的请求（本人说了 axios cancelToken、防抖和节流解决这个问题）我确实记得应该还有，但是想不起来（

30min 八股1.html中行级元素和块级元素有哪些2.localStorage特点3.实现一个块级元素垂直水平居中4.promise具体用法5.如何实现计时器6.事件循环角度考虑定时器实现问题7.vue的组件通信方式有哪些8.keepalive组件9.keepalive保存的组件name存在哪里10.多个页面都要复用同一个组件，如何存储name11.有个数组，随机数字，如何实现数组求和12.​​将数组 [1, 2, 3, 4] 转换为 [{ name: 1 }, { name: 2 }, { name: 3 }, { name: 4 }] 的实现思路​(打开vscode共享屏幕的时候电脑卡了。。。最终口述的思路)   

体感是面试官会等你说完之后，会再问一句，还有呢？或者针对你刚说的答案再追问一些细节点，有点刨根问底的意思一面登录验证怎么做的TokenRBACCSS预处理器CSS隐藏元素的方法Transition和animationFlex布局元素垂直居中两栏布局Es6新增属性箭头函数和普通函数区别Map的方法Weakmap和map的区别在js数组中找某一项的值怎么做事件循环宏队列任务有哪些手撕 深拷贝js中同步和异步的区别Promise 解决了什么问题，有几种状态Vue3和vue2比新增了什么特性双Token机制（token是短期的，不想让用户频繁登录，怎么做？）跨域以及实现方式打包工具及区别Vite为啥比webpack快Webpack中怎么保证资源是最新的（哈希）输入url到渲染的整个过程浏览器缓存强缓存和协商缓存区别，以及什么时候使用手撕 数组去重二面为什么去学前端学习前端知识的方式平时学习前端的网站CSS中的animation给一个loading的图片，怎么用动画实现加载的动画三栏布局（得说出来每个值怎么设置浏览器的回流和重绘回流对浏览器的性能影响怎么查看给一万条数据，渲染到页面，怎么做才能让性能最优优化前后的性能怎么查看和比较Cookie localstorage sessionstorage想把cookie设成前端取不出来，怎么设AI相关手撕 返回字符串第一个不重复的元素的下标 

面试官没开摄像头，面试时间就30min，感觉是老程序员，和字节、美团这些厂的面试官还是有些差距的，不过功底很深。1. 问实习经历；2. 实习时Webpack优化3. 大文件上传；4. this指向；5. 原型链 constructor重写的影响；6. 事件循环；7. 后面忘了...反正都是问js基础，比较简单。。反问：1. 海康做的事情，我理解海康不是纯互联网公司；2. 组织架构，回答有200多个前端；3. 技术栈：vue2...  老Angular。