likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 8

前言

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

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

电话邀约

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

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

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

死亡一小时

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

1. html代码第一行的作用

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

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

2. html里的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. 居中

5. rem实现移动端适配的原理是什么

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的区别什么

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

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

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

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

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

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

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

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

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

12. less和sass的区别

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

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

14. 聊聊webpack

15. 事件循环机制

对AI的理解

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

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

总结

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