大厂面试 | 阿里前端实习生面试题分享

公司：阿里巴巴

岗位：前端开发实习生

奉上技术面部分试题和我当时的解答，希望可以给到大家参考。

面试官: 看你的简历，你最近有在自己做组件库对吗?而且是使用React Hooks，那你可以说一说React Hooks产生的原因，以及它解决了什么问题?

我：过去，我们构建React组件的方式与组件的生命周期是耦合的。这使得组件中散布着相关的逻辑。比如说在componentDidmount中绑定了一个监听事件，如果要释放，那么就要在componentWillUnmount中释放。在hooks中就可以。

useEffect(()=>{
　　// 监听事件
　　...
　　return ()=>{
　　// 解绑事件
　　...
　　}
　　})

面试官: 好，那如果我现在想让你做一个弹窗组件，你会怎么做?

我: React提供了一个API，Portals可以将组件挂载到body下。

面试官: 你可以说说为什么要把它挂载到body下吗?

我: 一是为了是html标签顺序更逻辑化，二是不影响触发弹窗组件的父组件。

面试官: 看到你的项目中使用了React Hooks + Mobx，你可以说说Hooks和Mobx是如何做连接的吗?

我: 现让Mobx导出一个store，将导出的store使用createContext存放并导出，然后使用的时候要现用mobx-react-lite提供的observe将组件包裹，然后使用useContext就可以了。

面试官：那你可以跟我说说Mobx的原理吗?

我: 这个我没有去了解过，不过最近在分析Vue和React的源码，之后我会再去阅读一下他们周边生态的源码。

面试官: 看到你简历上说对Webpack与了解，熟悉到什么程度?webpack主要解决的问题是什么？

我: 可以实现项目的基础脚手架的配置，并做一些webpack打包过程的性能优化。webpack主要解决的问题就是分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言，并将其转换和打包为合适的格式供浏览器使用。

面试官: 好，那如果项目打包上线了，如何让用户知道文件更新了，而不使用缓存?

我: 这个只需要在每次发布新版本时，给文件名添加hash名就可以了，对应的webpack配置就是将output的filename属性配置成[name].[contexthash:8].js就可以了

面试官: 你可以跟我讲述一下HTTP的缓存机制吗?

我：强缓存，强缓存可以通过设置两种 HTTP Header 实现：Expires 和 CacheControl 。强缓存表示在缓存期间不需要请求， state code 为 200。

Expires: Wed, 22 Oct 2018 08:41:00 GMT

Expires 是 HTTP/1 的产物，表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期，需要再次请求。并且 Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效。

 Cache-control: max-age=30

Cache-Control 出现于 HTTP/1.1 ，优先级⾼于 Expires 。该属性值表示资源会在 30 秒后过期，需要再次请求。

Cache-Control 可以在请求头或者响应头中设置，并且可以组合使用多种指令

协商缓存

如果缓存过期了，就需要发起请求验证资源是否有更新。协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag

当浏览器发起请求验证资源时，如果资源没有做改变，那么服务端就会返回 304 状态 码，并且更新浏览器缓存有效期。

Last-Modified 和 If-Modified-Since

Last-Modified 表示本地文件最后修改日期， If-Modified-Since 会将 Last-Modified 的值发送给服务器，询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来，否则返回 304。

但是 Last-Modified 存在一些弊端：

如果本地打开缓存文件，即使没有对文件进行修改，但还是会造成 Last-Modified 被修改，服务端不能命中缓存导致发送相同的资源

因为 Last-Modified 只能以秒计时，如果在不可感知的时间内修改完成⽂件，那么服务 端会认为资源还是命中了，不会返回正确的资源 因为以上这些弊端，所以在 HTTP / 1.1 出现了 ETag。

ETag 和 If-None-Match

ETag 类似于⽂件指纹， If-None-Match 会将当前 ETag 发送给服务器，询问该资源 ETag 是否变动，有变动的话就将新的资源发送回来。并且 ETag 优先级 Last Modified 。

面试官: 今后打算怎么深入学习前端?

我：首先要先学习React和Vue的源码，然后在学习它们周边的生态的源码，然后结合着更多的项目经验去更加深入的学习前端工程化。

面试官: 好，今天就到这里，你有什么想问我的吗?

我：我想请您推荐一些关于微前端的资料，想了解下微前端的知识。

这里面试官跟我说了很多，微前端也是刚刚兴起的东西，资料不是很多，如果你可以来阿里，可给你提供内部的资料参考，也可以参与其中的项目，阿里在这方面也有很多实践…。我大概总结了一下，微前端可能不会是将来的必然趋势，还是要根据项目来考虑是否要采用微前端的架构来实现。

项目经验总结

淘系技术部比较看重项目经验，特别是项目有没有什么特别的亮点，可惜我实在是总结不出我做过的项目除了做了一点性能优化还有哪些亮点，做过的项目都比较普通。

标签：面试题,缓存,Last,面试官,Modified,面试,ETag,大厂,组件
来源： https://blog.csdn.net/cz_00001/article/details/120522182