前言
上次拿到海康的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来修改主轴的方向
-
特征
- 可以控制子元素在主轴上的对齐方式
- 可以控制子元素在交叉轴上的对齐方式
- 可以控制子元素的缩放比例,排列方式
- 应用场景
- 多栏布局
- 居中
- 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会取代程序员吗
总结
这次面试那真的是妥妥的被暴杀,不过也让我了解到了差距,自己确实还有很多不足的地方,反正查漏补缺越战越勇,总有登顶的一天。