深圳前端一年半，投了两个月简历，第一场面试

背景

base深圳，一年半经验，找的初级前端岗位，1-3年，投简历两个月只有两个面试，这是第一个面试

一面

你对html元素是怎么分类的？

一开始我愣了一下？搞这么简单的问题？？？后面又问面试官你是指的id选择器这些吗，，还是display：block,inline-block这些？不管了，反正我全都讲了一遍，说了下这些八股文基础，感觉有点简单，说得有点少。另外又展开说了HTML DOM节点那些内容

image是行内元素为什么有宽高？

这个问题我倒是没有了解过啊，想了下说，会不会和input或者什么video之类的差不多，对于这类元素，浏览器有其他的解析方式（万能答法：问什么都能答浏览器解析）

面试官让我了解下可替换元素，，img属于可替换元素

你用过哪些http状态码？

因为没有刻意的去背这些玩意，所以只是大概做了下分类。就回答了常见的状态码，比如101我就在websocket上见过，200或者201就是请求成功，3开头大概就是重定向的，又展开说了下永久重定向和临时重定向的区别，4开头的大概就是前端问题，比如401就是没有权限没有token，404请求url错误，5开头的大概就是后端问题，只说了自己见过的一些状态码

404就一定是前端问题吗？

不一定，状态码是可以修改的，比如接口抛错我也可以搞个404，前后端联调可以协商的

说下强缓存和协商缓存

搞忘记是请求头的哪个字段了，几个月都没看过http方面的内容了，好像是cache-control,只记得一个no-store，这个是不缓存，简单讲了下强缓存和协商缓存的区别，强缓存就是直接从缓存中拿取数据，不用再发请求，会有一个过期时间来判断是否命中，协商缓存通过Last-Modified（文件上次修改时间）和etag（文件内容是否变化）来命中。

接着又展开讲了下磁盘缓存（disk cache）和内存缓存（memory cache）的区别，从读取速度，缓存资源大小展开讲了下

突然想到了vite，最近在学习vite，就又讲了下vite的分包处理，vite用到的强缓存和协商缓存

说下js异步

除了常见的八股文回答知识

我又提到了async和await，async和await的内部实现，是怎么通过generator，yield，next()来实现的

还讲了下不同的执行环境，js的执行机制也会有区别，在node环境和浏览器环境js异步执行的区别。

说下es6的新特性

let const、map、set，,weakmap,weakset,解构，简单提了下，在vue3源码中用到的weakmap，准备说下内存泄漏的，，但是这玩意太难了，想了想还是没说了，就说了这几个、跟面试官说还有一些语法，但是不知道怎么描述，别的突然一下子想不起来了

深拷贝和浅拷贝

我还以为要我手写，我直接回答，这玩意手写我不会，我都是直接引入lodash的，什么手写call、apply、bind这些，我都不会，结果面试官不要我手写，，是我太敏感了（主要是对这种手写代码太厌恶了）

按照八股文面试题简单讲了下区别，主要就是堆栈中地址值的传递

接着又展开讲到了内存、cpu、进程、堆和栈。堆和栈是放在进程中的，而进程又会被装入内存中，栈和堆本质上都只是内存中的一片区域，编写的一行行代码都会被转成指令，保存到内存中，cpu就是从内存中获取指令并执行。这些太久没学了记不太清，不敢说得太多，就简单说了下

打包之后哪些文件会被解析成ventor文件

其实我也不太了解，说了个node_modules也不知道对不对，然后就简单讲了下vite分包，，怎么做分包

vite预构建依赖是怎么做的

当时正在写mini-vite，面试官看我老是提vite，可能就随便问了下，主要就是计算出入口文件，通过esbuild进行依赖扫描，然后将其打包放在指定得文件夹内，会根据打包的内容生成一个hash值，内容改变hash值也会改变，保存在一个json文件中，每次开启项目时都会对比这个hash值来判断是否需要重新预构建依赖

vue的数组为什么不能做响应式

没看vue2的源码，好像是读取不到数组的长度（可能回答的是错误的），直接跟面试官说不太了解vue2的源码，平常都是看的vue3源码，但是还是强行扯了两句，用vue2响应式跟vue3做了对比，扯到了vue3响应式，收集依赖和触发依赖。然后提到了，proxy、reflect，又说了一下这个es6的新特性，在vue3中的源码是怎么用的。

你有移动端项目，，肯定做了适配吧，，怎么做的适配？

我笑了，不好意思，还真没做适配，移动端项目主要是给我们公司内部使用，所以移动端都是固定的屏幕大小，用不到适配。

不过我大学毕业设计的项目用过，用的淘宝适配方案，主要就是改变根节点字体大小，还有一些适配方案，viewport、bootstrap、媒体查询这些都简单说了下。

做过权限没？

这一块讲了下自己的理解

实际业务开发来讲好像不太难，主要就是给一个标识，来判断到底需不要显示这个路由

你指的标识是什么？

就是来判断是否显示这个路由的字段，可以是一个布尔值，也可以是一个其他的什么字段。通过递归来筛选前端路由有没有这个字段，然后再调用addRoute这个方法，添加到路由中。后端返回的路由信息不能保存到store中，因为刷新store中的数据就清空了

从代码实现上来讲这些都是比较简单的，难的是架构（其实我也不太懂，瞎吹的），我们公司项目是用的RBAC权限设计，通过directive封装自定义指令，达到按钮级权限设计。内部主要是appenchild、removeChild 添加移除dom节点来实现

接着我又扯到了需求分解

为什么离职

你对自己未来发展的规划

你是怎么规划你的学习路线的

你对chatgpt怎么看的

笑了，上午才拿chatgpt帮同事解决了一个正则问题

chatgpt只是工具

二面

面试官说他比较关注性能优化这一块

上来第一个问题就把我问麻了

你用过正则没，说下正则

上午才帮同事解决了一个正则问题，没看过正则，都是用了在学，之前看过高性能javascript，想到正则还可以做一些优化，，因为实在是记不太清了，就只是提了一嘴。

你在项目中用了是怎么做性能优化

简单描述了下之前在项目中遇到的下拉框卡顿问题，大数据量几十万条数据引起的卡顿，开启了虚拟列表还是出现卡顿，后面对这个组件在框架的基础上进行了三次封装，集成了分页效果，解决了这个卡顿问题

还有一个是动态高度引起的卡顿问题，简单描述了下实际场景，利用浏览器的开发者工具定位到某个方法，发现是某个方法执行了3s左右，造成的卡顿，由于组件封装复杂，这个方法没法优化只能叫产品改需求，

说了下lighthouse分析报告，因为平常用的不多，简单提了一下

又从构建工具上讲了下优化，vite针对于依赖预构建、分包，静态资源等可以做那些优化，

又讲了下cdn，cdn的缺点，强缓存和协商缓存

又讲了下fcp、fp、首页白屏、骨架屏等

代码层面也可以做优化（够了够了，把我打断了，，你已经说的挺多的了）

csrf攻击怎么防范

那是去年看的东西，实在是不记得了。

不会的话，不用强答，不要紧，接着就跳过了

闭包

知道闭包吗，，我内心已经开始组织语言了，接着来了句没事我不问，哈哈哈哈

怎么做全局捕获

用window.addEventListener('error',() =>{})

提到了自己的个人博客项目，用vue3+node搭了个个人博客项目，接入了阿里云日志和node性能平台，利用docker-compose搭了一个简单的apm，用wsl准备配上sentry的，但是死活安装不了，不知道是不是环境的问题，是不是应该用linux系统。

又说了一下对于性能监控的想法（只是说一个想法，并不一定是对的），搭一个后台管理系统，利用window.performance获取到所有性能数据，给这个后台管理系统去做可视化展示

针对你公司的项目，你用到了哪些

利用vite做的优化，预构建优化，分包等。

提到了想引入一个前端性能监控的sdk，有这个想法但是公司不看重，所以才没有实施

刚刚说到了http，说下你见到得http头有哪些

一时真没想起来，就简单答了两个，直接跟面试官说，我不记得了，但是你让我看，我大概能知道那些头信息是干什么，面试官就没问了

你的简历上也提到了，会html、css，精通js

我连忙摆手说我不是精通js
面试官：哈哈哈哈

说下js异步

你欣赏vue的哪些设计

说了下compiler-core这一块，createApp，render方法

双端diff，这一块的设计，还有响应式

因为源码是去年看的，，没怎么组织好语言，这一块说的有点乱

你擅长什么？

擅长什么真不好答，我想了一下，，，但是我不擅长的？？比如刚才的web安全、vite、vue3、性能优化等等等

面试官笑了，哈哈哈

未来的发展方向

你对自己未来发展的规划

说了下我现在正在写的项目mini-vite

面试官说一面问的都是基础，他比较注重成长性，这也可能是他没有往深问原因吧，，最后说我还不错，在同年人里面算可以的了。

最后又简单聊了下，，问我住哪，我说在龙岗，说高新园上班最好在公司附近租房（这算不算暗示我可能已经面试通过了？？？），，，我说不是我不愿意，我还有女朋友，得跟她商量，

女朋友在哪上班？，，龙岗，，面试官又笑了，，那还是别换地方了吧，虽然一号线人多，，，

问我渴不渴，，等久了给我买了瓶水，，面试官非常nice，面试过程还是非常愉悦的

三面总监面

自我介绍

怎么改变函数的执行顺序

一下子没有get到面试官到底要问什么

提到了js的单线程，又说到了宏任务和微任务,.then和.catch

异步能不能理解成多线程

肯定不能，这是两码事，我在阮一峰的博客上看到的，又说了下js为什么是单线程的

又提到了preload，prefetch

node学了多少

想用node搭一个前后端的中间层，解决并发大数据量的问题，，但是没找到合适的视频和教程。

只在个人的博客上用过，简单的几个fs、path、process这些模块

你用docker做了什么？

ci/cd，说了下我的个人博客项目，刚开始是用gitlab搭的但是没成功，后面尝试用github action去搭，发现这好像已经不太属于前端的内容了，有点偏离我的学习路线了，而且这一块好像也挺复杂的，也就没有再继续了

搭建前端apm，我还准备讲下部署的，但是因为不太会，所以就没讲了

你对自己未来发展的规划

你现在在看哪些书

最后也跟我说了，要在公司附近租房

总结

如果是在高新园上班的话，最好要在高新园附近租房

另外，回答的时候最好是扩展开讲，不能面试官问一就答一，不知道或者不太了解的问题试着随便扯下看能不能扯到自己知道的那一块，但是别瞎扯，还有就是引导面试官问问题（？？？但是我提到了好多次vite面试官都没问），可能是因为我一年半的经验，没有深入性的去问，问的都比较浅，好像更多的都是在关注我个人的规划。

面试过程，从开始到结束差不多三个小时，两点半面到五点半，中间还穿插着一些等待时间，总体上来说，三次面试还是非常愉快的，，感觉三个面试官都非常nice，面试的过程也是非常愉悦，三面是总监面的，，总监面完还把我送到门口，

最后结果呢？？ 那肯定是挂了啊

最后

大家如果对vite感兴趣，欢迎关注我的vite项目：写了个辅助学习vite的小工具（mini-vite）

• 还没有人评论，欢迎说说您的想法！