前端面经
- 岗位：前端开发实习生
- 时长：45分钟
今天是2023/02/08 开年的第三份面经，随手记录一下。
- 保留节目：自我介绍
- 你所知道的前端体系有哪些？
HTML CSS JavaScript Vue及其生态 React及其生态 小程序 NodeJS TypeScript 等
- 关于 JavaScript 的模块化标准你了解多少？
G 这里没复习，我说了AMD ES6模块化标准等，并没能展开讲，危。
- 构建和编译有没有了解呢？
我说了 webpack 和 vite，然后简单说了说 webpack 的 loader 和插件，打包过程没能很流畅地说出来，G。
- 你觉得你做过的项目有哪些难点，攻克之后会比较有成就感的。
我感觉我的项目并没有一些特别难的点，所以就每个项目中都挑了一个印象较深的地方去说。
- 原生代码制作的项目，不用 UI 框架的话，你是怎么处理的页面的 UI。
有封装了一些组件，比如分页，轮播图，按钮等组件。
- 你原生做的项目有没有封装一些函数，比如说 DOM 查找，事件监听的函数？
这里没有很清楚面试官想问什么，我就说了我有封装一些工具函数，但是这个项目是很久之前的，现在有一些忘记了。
- 这个 hash 前端路由是如何实现的？
通过监听 hashchange 事件，如果页面的 hash 值发生改变，那么就执行相对应的函数。
- 你是如何实现 hash 值和页面内容的映射，是怎么存储的？是动态的还是写死的？
我说我是用模板字符串。（感觉他是想问我根据不同的 hash 值来渲染不同的页面内容是如何渲染的，具体是如何渲染？）
- 模板字符串是用的第三方库还是 ES6 原生的模板字符串？
原生的模板字符串。
- 分页加载技术提高页面性能，如何提高？
如果一次性请求大量数据然后渲染大量数据的话会造成页面卡顿，因此我们前后端约定后分页的一些参数之后，使用分页加载的技术来请求单页数据，http 响应也不会携带大量的数据，从这些方面来优化性能。
- 如何防止 XSS 攻击？你是用在于项目的什么地方？是在页面渲染的时候对整个页面做一个过滤吗？
不是，我只是对用户输入的地方，在点击保存提交数据之前对用户输入的数据使用正则进行简单的过滤。
- 那如果用户绕开了你的界面，通过后端接口将数据提交给后端，然后后端如果也没过滤的话，返回给你的数据岂不是也可能带上这些敏感标签？有没有在这里做一些防止？
G，当时做这个项目是刚学前端不久，所以还没考虑得这么全面，只是对输入部分进行了过滤。
- CSRF 攻击有没有了解？
展开说了一下 CSRF，并简单说说解决措施（这里的解决措施还可以再拓展一点）。
- 低代码平台用了防抖的策略，那如果用户修改了几次，你用防抖会不会被吞并了一些修改的操作，这你又是怎么去处理的？
我们使用防抖主要是怕用户一直拖拽组件或者是一直在文本框输入文字，使用防抖存下来操作记录的是用户确定的结果，中间频繁变化的不做记录，测试起来还是在合理的范围之内的。
- 你这个共享文档缓存的策略涉及到什么算法你应该知道吧？该算法使用到了什么数据结构？
忘记了 LRU (Least Recently Used)，我说了哈希表，在JS里面的数据结构就是 Map。（面试官补充了一个队列）
- 目前的项目是用 TypeScript吗？
虽然我学习了一点 TypeScript，但是我们的项目都是团队项目，团队的伙伴大部分使用的是 JavaScript，所以项目还是用的 JavaScript。
- 对 TypeScript 了解多少？
说了一下它的强类型，还有相对于 JavaScript 的一些新的内容，比如接口等。
- interface 和 type 的区别？
- Vue2和Vue3的区别
生命周期，双向绑定的方式，选项式API-> 组合式API
- 移动端项目的适配要用什么工程化的配置？
不清楚。随便说了一下 px和vw，单位换算，媒体查询等。
- http 缓存
总算问到一个比较熟的了。
- 使用 express 来开发过服务端，那你是怎么去拿到 body 里面的内容的。
body-parser
- body-parser 底层是怎么实现的了解吗？
反问环节
- 我们这个部门是用 React 的吗？
是的。
- 如果第一面能通过的话，一共会有多少轮面试？
实习生一般是两轮技术面，一轮hr面。这两天会尽快通知你的。
反思
- 这位面试官相对比前两位更加专业。
- 今天有一点怯场，回答问题的时候明显不自信了。
结果
- 本来以为会挂，但是吃完饭 HR 就通知二面了，希望顺利吧。
