上次拿到海康的offer之后，信心大增，但是目标不止于此，就想再往上冲一冲，于是目标就转向了海马体。海马体作为2023年AIGC现象级应用的公司之一，其AIGC的能力相对成熟，于我而言，AI的应用层的重要性是大于其底层原理的，所以把目标放在了这所已经实现AI落地的公司上面。

电话邀约

他们公司的审核时间比较长，boss直聘投了简历之后一个星期才有反馈，先是hr打电话过来问一下基本情况，但是我觉得这个电话应该也是初筛的一部分，因为他问了很多问题，也将近有20分钟左右，个人感觉考验软实力和应变能力。

你觉得在互联网公司和在互联网+这种交叉领域的公司从事计算机类的相关工作有什么区别你选择一份实习最看重什么上一份实习经历为什么离职你对我们公司有什么了解之后的职业规划是怎么样的

差不多就这些问题了，这个电话也算是个小面试，因为我电话结束之后是直接要了我微信号，然后加了微信之后和我约面试时间，我其它朋友则是在电话里说有后续安排会通知你的。

死亡一小时

一面面了一个小时，面试官是个男的，非常和蔼，碰到不会的他会引导你去思考，回答错的也会帮你纠正出来，虽然挂了，但是面试体验非常好，全程非常放松。

1. html代码第一行的作用

这道题问出来我脑子里嗡嗡的，第一题就给我干懵逼了。

HTML 代码的第一行用于声明文档的类型，并且告诉浏览器使用哪种 HTML 的标准来解析页面

2. html里的meta属性

这道题一样给我干蒙了，这个我总结不出来，就把一篇写的比较好的文章放在这了作为前端，你必须要知道的meta标签知识

3. 聊聊css中的布局方式

这道题其实就是考你display属性的属性值你了解多少，面试官主要是想考你flex，因为这套题答完之后就问了你对flex了解多少。

blockinlineinline-blockflexgridtabletable-cell4. 聊聊flexable弹性布局是什么 是一种布局方式，可以简便完整响应式的实现页面布局，容器中默认存在两条轴，主轴，交叉轴， 默认x轴为主轴，可以用flex-direction来修改主轴的方向特征可以控制子元素在主轴上的对齐方式可以控制子元素在交叉轴上的对齐方式可以控制子元素的缩放比例，排列方式应用场景多栏布局居中flex上的属性 这个我答得不是很好，我就把别人总结好的放这，大家可以仔细去阅读一下深入浅出之 Flex 弹性布局5. rem实现移动端适配的原理是什么

这道题我答得吞吞吐吐的，那确实不会，一般只知道rem是相对于根字体大小，以此来实现不同屏幕的适配，问原理就把我干懵逼了，这篇文章总结的很好，也有其它移动端适配的方法和原理，可以仔细阅读一下移动端开发的适配方案 | 百分比、视口、dpr、rem、vwvh

6. 浏览器缓存

我之前一直没搞懂浏览器缓存、http缓存、web Storage、和前端缓存的区别，总是把他们当作同一个东西，所以答得时候答得奇奇怪怪的，有点答非所问，面试官也是很贴心的告诉我之间的区别。

前端缓存前端缓存是一个更宽泛的概念，剩下的三者都是隶属于前端缓存，它可以包括浏览器缓存、HTTP缓存、Web Storage 等多种缓存机制浏览器缓存浏览器缓存是指浏览器在本地保存一些静态资源的副本，以便在下次访问相同资源时可以直接从本地获取，而不需要再次从服务器下载。浏览器缓存由浏览器控制，它的范围仅仅只是浏览器浏览器缓存可以减少对服务器的请求次数，加快页面加载速度，并减少网络流量消耗。http缓存HTTP 缓存是指服务器通过在 HTTP 响应头中添加相应的缓存控制字段（如 Cache-Control、Expires 等）来指示浏览器或代理服务器如何缓存和重用响应内容。http缓存有两种缓存机制，分别是强缓存和协商缓存强缓存：浏览器在请求资源时，会先检查该资源的缓存标识（如 Cache-Control 和 Expires），如果命中强缓存，则直接从缓存中获取资源，不会发送请求到服务器。协商缓存：如果资源的缓存标识表示资源已经过期（如 Cache-Control 中的 max-age 或者 Last-Modified 和 ETag 等），浏览器会发送请求到服务器，服务器会根据请求头中的条件判断来决定是否返回资源内容，如果返回 304 状态码表示资源未发生改变，浏览器可以使用缓存中的资源。web storage是 HTML5 提供的一种浏览器本地存储数据的方式，主要包括 localStorage 和 sessionStorage 两种。它们可以存储在浏览器中供网站使用，可以在页面会话结束后依然保留（localStorage），或者在页面会话结束后被清除（sessionStorage）。localStorage：localStorage 存储的数据没有过期时间，除非手动清除，否则会一直保存在浏览器中。sessionStorage：sessionStorage 存储的数据在页面会话结束时被清除，即当页面被关闭时数据也会被清除。7. 小程序和h5的区别什么

我直接放一个别人已经总结好的，我怕自己总结的不全小程序与H5深度对比及原理解析

8. 为什么要使用uniapp开发小程序

这个呢，我当时就是一脸懵，我就直接说是公司要求的，那毕竟跟着上级指令走，总不能我一个人独善其身用微信小程序开发工具去写吧，不过我还是回答了一些uniapp的优缺点的，这里有篇文章总结的很好，可以仔细阅读一下uni-app开发经验总结

9. 为什么vue的data要写成函数的形式而不是写成对象

因为 Vue 在初始化组件时会对 data 对象进行响应式处理，如果直接将 data 定义为一个对象，那么该对象将会被所有实例共享，可能导致数据污染或者组件之间数据相互影响的问题。

通过使用函数返回一个对象的方式，Vue 在初始化组件时会为每个组件实例都创建一个独立的数据对象，从而避免了数据共享的问题。每个组件实例都拥有自己独立的数据作用域，保证了数据的隔离性和独立性。

10. 组件开发的第一要素是什么

这个题目我的第一反应是，这真的是在问我前端的东西吗，这不是学校里上的软件体系结构的知识吗？？于是我带着仅存的印象回答了降低耦合度，然后就有了接下来的题目。。。

11. 在开发组件的过程中如何让组件的耦合度降低

虽然上一题的答案是回答对的，但是明显是自己给自己挖坑，我当时就是举了一个平时开发组件的做法，但是都是大白话，回答的一点也不专业。

单一职责原则：确保每个组件只关注单一的功能或职责，避免一个组件承担过多的责任。这样可以使组件更加独立、易于测试和修改。组件通信：使用适当的组件通信方式，如 Props 和 Events，避免组件直接访问其他组件的状态。通过 Props 向子组件传递数据，通过 Events 向父组件发送消息，可以降低组件之间的耦合度。抽象通用逻辑：将通用的逻辑抽象成服务、工具函数或混入（Mixin），让多个组件共享这些逻辑，避免在多个地方重复编写相同的代码。解耦UI和逻辑：尽量将组件的 UI 和业务逻辑分离，使得组件更容易维护和复用。使用计算属性、监听器和组件生命周期钩子等技术来处理组件的逻辑部分。使用插槽（Slot） ：通过插槽机制实现组件的灵活性，让父组件可以动态地向子组件传递内容，从而降低组件之间的依赖关系。依赖注入：通过依赖注入的方式将依赖关系从组件中解耦出来，使组件更加灵活和可配置。接口设计：设计清晰的接口，明确定义组件之间的交互方式，避免组件之间的直接耦合，提高组件的可替换性。12. less和sass的区别

看了很多文章，这篇非常的专业Sass(Scss)、Less的区别与选择 + 基本使用

13. less和sass只能在项目部署后一定会剔除吗？

我当时回答的是会被剔除，因为在大部分人的印象里less和scss作为css的预处理就只是开发时依赖，项目部署上线之后都会转换成原生的css的语法供浏览器进行解析和编译。但是面试官和我说现在很多浏览器都已经可以支持直接编译less和scss了，不需要进行转译。

14. 聊聊webpack

这个问题我非常诚实的说了一句不知道。。。还是多看看大佬的文章吧认识webpack | webpack作用 | webpack配置

15. 事件循环机制

这个之前的文章里写过，就不再赘述了深入理解JavaScript的进程、线程与Event-Loop

对AI的理解

毕竟海马体已经有较为成熟的AI落地经验，而且我在简历和个人介绍里也提到了对AI的接触和一些简单的实践，所以问了我一些相关的看法，这个就是考验软实力了，问了我两个问题

假如你现在有个前端团队，你会让ai如何来帮助自己的团队你觉得ai会取代程序员吗总结

这次面试那真的是妥妥的被暴杀，不过也让我了解到了差距，自己确实还有很多不足的地方，反正查漏补缺越战越勇，总有登顶的一天。

作者：金色的暴发户 链接：