前端面试日记：小厂1

最近开始实习了，但是对自己的实力没有自信，投点小厂刷刷面试题目，增长点经验。

下面记录为自己没怎么答好的小公司面试题，题目来源于公司，答案来源于ai，反思来源于自己。

第一份面试，回答的一塌糊涂。

[Html, js, css基础]

1、问题：如何实现div水平、垂直居中？（3种）

答案：有几种方法可以实现div的水平和垂直居中。第一种是用flex布局，给父元素设置display: flex; justify-content: center; align-items: center;，这样子元素div就会水平和垂直居中了。第二种是用CSS的position和transform，给子元素设置position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);，前提是父元素要设置position: relative;。第三种是用CSS的grid布局，给父元素设置display: grid; place-items: center;，也很方便。

反思：这里当时脑子宕机，以为小公司不会问八股，回答了一个flex就down了，这种基础操作确实应该重视。

2、问题：什么是BFC？

答案：BFC就是块级格式化上下文，是一个独立的布局环境。在一个BFC内部，块级元素会按照文档流的顺序排列，不会和外部的元素相互影响。比如，BFC可以用来解决浮动元素塌陷的问题，当一个元素创建了BFC，它的内部浮动元素就不会影响到外部的布局了。创建BFC的方式有好几种，比如设置overflow为hidden或者auto，或者设置display为flex、grid等。

反思：BFC见过相关概念，还整理过，结果还是答不出来，css基础概念也得复习。

3、问题：深拷贝和浅拷贝区别？

答案：浅拷贝和深拷贝的区别主要在于拷贝的深度。浅拷贝只拷贝对象的第一层属性，如果属性值是引用类型，拷贝的还是引用地址。比如用Object.assign()或者展开运算符...，都是浅拷贝。深拷贝会递归拷贝对象的所有层级，包括嵌套的对象，生成一个完全独立的副本。比如可以用JSON.parse(JSON.stringify(obj))来实现简单的深拷贝，不过这种方法不能拷贝函数和特殊的对象类型。

反思：凭借记忆答出了浅拷贝，深拷贝忘了用Json实现，递归倒是答出来了，就是回答很乱。

4、问题：ts中type和interface区别？

答案：type和interface都可以用来定义类型，但有一些区别。interface主要用于定义对象的结构，比如一个对象有哪些属性和方法。它还可以合并，如果有多个interface同名，它们的属性会合并在一起。而type更灵活，可以定义基本类型、联合类型、元组等各种类型。type不能合并，如果重复定义会报错。总的来说，interface更适合定义对象类型，type更通用。

反思：完全忘了，需仔细复习。

5、问题：ts中泛型的应用场景？

答案：泛型在TypeScript里很有用，比如定义一个函数时，可以用泛型来指定参数和返回值的类型。比如function identity<T>(arg: T): T { return arg; }，这样就可以传入任意类型的数据，函数会返回相同类型的结果。还可以用在数组、对象等类型中，比如Array<T>，表示一个元素类型为T的数组。泛型可以提高代码的复用性和类型安全性。

反思：也是忘了，需要仔细复习。

[项目]

1、问题：Vue2/3的区别，Vue3的优化？

答案：Vue2和Vue3有很多区别。Vue3用的是Composition API，比如setup函数，可以把逻辑相关的代码放在一起，比Vue2的Options API更灵活。Vue3还用了Proxy来实现响应式，比Vue2的defineProperty性能更好，支持动态添加属性。还有，Vue3的虚拟DOM算法也优化了，渲染效率更高。另外，Vue3的组件是基于ES6的类，更符合现代JavaScript的规范。

反思：项目中写了Vue2/3的兼容，却没有好好答出来，惭愧。简历上的东西确实该注重。

2、问题：项目中做过的前端优化？

答案：在项目里，我做过一些优化。比如代码分割，用Vue的异步组件和webpack的splitChunks，把代码分成多个小块，按需加载，减少了首次加载时间。还有图片懒加载，只有图片进入可视区域才加载，节省了流量。还有优化了CSS，把一些公共样式抽离出来，减少重复代码。还有用keep-alive缓存了一些不经常变动的页面，提高了用户体验。

反思：其实自我感觉回答还可以，但是感觉还能回答更多，不然给面试官感觉就是纯凑数半桶水。

3、问题：VueUniapp项目三端如何做到跨平台兼容？

答案：在开发过程中，我会通过以下几种方式来处理VueUniapp的跨平台兼容性：

条件编译：这是VueUniapp跨平台的关键工具。我会根据不同的平台（比如App、H5、小程序）编写特定的代码逻辑，然后用条件编译指令（如#ifdef、#ifndef）来控制这些代码的执行。比如，对于iOS的状态栏高度问题，我会专门写一段代码适配，然后用条件编译标记。

样式适配：我会尽量使用flex布局和rem单位来适配不同屏幕尺寸。同时，针对不同平台的样式差异，比如小程序和H5的字体显示问题，我会用CSS媒体查询或者upx2px方法来调整样式。

平台特定API的使用：VueUniapp封装了很多统一的API，但某些平台有自己独特的功能。我会通过条件编译调用这些平台特定的API，比如在App端调用原生的文件存储功能。

UI组件适配：我会优先使用VueUniapp提供的统一组件库，这样在不同平台上的显示效果会更一致。如果需要自定义组件，我会在不同平台上做测试，确保它们的视觉和交互效果保持一致。

性能和事件优化：不同平台的性能和事件处理机制不一样。我会针对H5优化图片加载逻辑，或者在小程序中调整事件触发的逻辑。这样可以确保应用在每个平台上的表现都比较流畅。

反思：这方面确实考略的有所欠妥，需好好研究。

4、问题：React相关的基础常识：Hook，子调父方法。

答案：React的Hook是ES6以后的一个新特性，最常用的是useState，用来在函数组件里声明状态。还有useEffect，用来替代生命周期函数，处理副作用，比如数据请求和DOM操作。子组件调用父组件的方法，可以通过props传递。父组件把方法作为props传给子组件，子组件在需要的时候调用这个方法，就可以实现子调父。

反思：React实操过少，导致闹中根本没有相关概念，最好找个时间看看项目。

5、问题：Echarts如何自适应？

答案：Echarts自适应主要是通过监听窗口大小变化来调整图表大小。可以在初始化Echarts的时候，用resize方法。比如window.onresize = () => { myChart.resize(); }，当窗口大小变化时，图表就会自动调整大小。还可以在Echarts的配置里设置grid的containLabel为true，这样图表的大小会根据内容自动调整，避免内容超出图表范围。

反思：Echarts没接触过大型项目，这个也没办法。

6、问题：Node的中间件？

答案：Node的中间件主要用在express框架里。中间件就是一个函数，它可以在请求到达路由之前处理请求。比如，一个日志中间件可以在每次请求的时候记录请求的时间、路径等信息。还有身份验证中间件，可以在用户请求某个路由之前验证用户的身份。中间件可以按顺序串联起来，每个中间件处理完后，用next()调用下一个中间件，直到请求到达最终的路由处理器。

反思：没接触过Node后端，也确实没办法。

总结：

在本次面试中，暴露出自身的基础知识深度不足和项目经验表述不完善两大问题，总结反思如下：

一、基础知识薄弱需系统梳理

CSS布局能力欠缺：如垂直水平居中仅提到flex方案，忽略grid和定位实现的多样性，反映出对常用技巧的敏捷性不足；BFC概念虽了解原理，但未能结合应用场景举例说明（如清除浮动）。后续需加强CSS布局系统性练习，通过案例总结常见方案。
TS相关概念模糊：type与interface的区别、泛型的使用场景等回答混乱，需重新整理TS文档，结合代码实践加深理解。

二、项目经验表述缺乏逻辑与技术细节

技术差异对比不清：Vue2/3的优化点未结合Proxy、Composition API等核心细节展开，未来需结合官方文档总结特性对比表，形成结构化表达。
跨平台方案流于表面：虽提到Uniapp的响应式表达，但缺乏多种方法，需复盘项目代码，提炼典型问题的解决思路。
优化措施深度不足：列举代码分割、懒加载但未提及性能指标（如首屏时间优化比例），后续需通过数据量化成效。

三、后续提升计划