汗流浃背的一个小时——海马体一面，第一题就不会

前言

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

电话邀约

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

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

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

死亡一小时

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

1. html代码第一行的作用

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

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

2. html里的meta属性

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

3. 聊聊css中的布局方式

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

• block
• inline
• inline-block
• flex
• grid
• table
• table-cell

4. 聊聊flexable弹性布局

• 是什么

  是一种布局方式，可以简便完整响应式的实现页面布局，容器中默认存在两条轴，主轴，交叉轴， 默认x轴为主轴，可以用flex-direction来修改主轴的方向

• 特征

1. 可以控制子元素在主轴上的对齐方式
2. 可以控制子元素在交叉轴上的对齐方式
3. 可以控制子元素的缩放比例，排列方式

• 应用场景

1. 多栏布局
2. 居中

• 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会取代程序员吗

总结

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