公司阿里巴巴
岗位前端开发实习生
奉上技术面部分试题和我当时的解答希望可以给到大家参考。
面试官: 看你的简历你最近有在自己做组件库对吗?而且是使用React Hooks那你可以说一说React Hooks产生的原因以及它解决了什么问题?
我过去我们构建React组件的方式与组件的生命周期是耦合的。这使得组件中散布着相关的逻辑。比如说在componentDidmount中绑定了一个监听事件如果要释放那么就要在componentWillUnmount中释放。在hooks中就可以。
useEffect(()>{// 监听事件...return ()>{// 解绑事件...}})
面试官: 好那如果我现在想让你做一个弹窗组件你会怎么做?
我: React提供了一个APIPortals可以将组件挂载到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-age30
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的源码然后在学习它们周边的生态的源码然后结合着更多的项目经验去更加深入的学习前端工程化。
面试官: 好今天就到这里你有什么想问我的吗?
我我想请您推荐一些关于微前端的资料想了解下微前端的知识。
这里面试官跟我说了很多微前端也是刚刚兴起的东西资料不是很多如果你可以来阿里可给你提供内部的资料参考也可以参与其中的项目阿里在这方面也有很多实践…。我大概总结了一下微前端可能不会是将来的必然趋势还是要根据项目来考虑是否要采用微前端的架构来实现。
项目经验总结
淘系技术部比较看重项目经验特别是项目有没有什么特别的亮点可惜我实在是总结不出我做过的项目除了做了一点性能优化还有哪些亮点做过的项目都比较普通。