前端面经总结——阿里技术面

前言

第一次面阿里，感觉面试官十分注重你对自己做过项目的理解，是否熟悉这个业务流程，在此前提下是否对项目有过更深层次的总结和思考，对于每一个存在的问题和解决方案是否有更进一步的优化空间以及在脱离业务的场景下如何去解决此类问题。

面试

简单的自我介绍后，面试官直接开始考察我简历上的项目经历

项目了解

描述一下你负责过的项目xxx，谈谈整个的架构和你负责的部分，有亮点的地方可以适当的提出来。

• 简单描述了一下业务
• 描述项目架构时我谈到了公用组件和业务组件的组合和拆分

组件模块化设计

对于你提到的公用组件和业务组件，你们是如何划分的？

• pages & components （smart and dumb -components）

写过一些公用的组件？在设计公用组件的时候要注意什么问题？

• 笔者回答了自己对设计公用组件的接口规范的理解，被引导了一下

  • 对日后扩展新参数的考虑
  • 对必填项的处理
  • 还有的实在想不出来。。。

• 还回答了在模块化设计时需要注意的问题

  • 可复用模块和相关依赖的封装
  • 根据实际情况划分粒度
  • 避免太多参数
  • 避免直接操作DOM
  • 尽量缩小依赖范围
  • 避免影响其他兄弟组件
  • 根据不同场景进行兼容设计

对于你们项目中需要不断地拓展新的控件，为了避免每次都要改动大量代码，有什么好的办法吗？可以方便日后更好更快的完成需求？

• 我整个人都陷进我的项目中去思考，由于项目实在复杂而且之前没有很好的思考过这个问题，所以回答得不是很好。

那假如抛开目前项目的复杂度和进度，重新让你去设计这个项目架构，对于上一个问题你有好的解决方法吗？

• 面试官就是想考察我对项目模块化抽象的能力，但是我好像还是没回答好-.-

场景1

你提到了可视化列表的优化，那在淘宝首页上不断向下滚动显示商品列表，你觉得是如何实现的？

• 图片懒加载 + 元素占位

场景2

目前大都是前端控制路由，项目上使用什么方法控制路由呢？遇到过什么问题？

• vue-router

• history API

在平时的项目里，一定会有页面前进后退的情况，你是如何记录前后历史记录以致不会混淆？

• history API
  • go/back/foward
  • pushState/replaceState
• popstate事件
• 笔者回答了使用一个数组来存储历史记录，不知道还有没有更好的方法

http缓存

谈谈你对http缓存的理解？

• 强缓存
• 协商缓存

业务上是否遇到过http缓存的问题？

• 笔者提到了一个由于数据库出错导致用户本地缓存了错误资源的问题，最后是通过在资源名中加上时间戳来刷新用户缓存的方法。

GET和POST的区别？

• GET在浏览器回退时是无害的，而POST会再次提交请求。
• GET请求会被浏览器主动cache，而POST不会，除非手动设置。
• GET请求只能进行url编码，而POST支持多种编码方式。
• GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
• GET请求在URL中传送的参数是有长度限制的，而POST么有。
• 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
• GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
• GET参数通过URL传递，POST放在Request body中。
• GET产生一个TCP数据包，POST产生两个TCP数据包。

跨域

跨域的条件是什么？跨域的方式有哪些？

• 同源策略，不同协议不同域名不同端口，满足其一都属于跨域

• CORS/JSONP/iframe

promise

promise和回调函数的差异点在哪？

• 避免回调地狱，链式调用，捕获错误

promise提供的一些方法了解过吗？

• Promise.all

• Promise.race

是否使用过promise的第三方库？你对于做过什么优化吗？

• 使用过axios，对此进行二次封装
  • 默认选项设置
  • 数据封装：URL组装，传入数据合并，鉴权方式判断
  • 添加鉴权ticket
  • 错误弹窗提示
  • 监控日志埋点
  • 封装成Vue.use(plugins)

ES6

你对ES6的使用熟悉程度是？说说常用的ES6语法？

• let/const
• class
• ()=>
• Map/Set
• [...]
• async/await

let/const存在变量提升吗？

• let创建过程被提升，初始化没有被提升
• const创建时必须初始化

性能优化

谈谈你对性能优化的理解？可以尝试从DOM结构数量，静态资源加载顺序，静态资源缓存三个方面说说吗？

• DOM结构数量
  • 虚拟DOM
  • 享元模式，复用DOM
• 静态资源加载顺序
  • JS，CSS加载顺序
  • SSR
  • 图片懒加载
• 静态资源缓存
  • HTTP缓存
  • PWA
  • 本地缓存

你使用过PWA？了解过serviceWorker是吗？谈谈你对它的理解？

• 笔者使用serviceWorker只用于离线缓存，并没有做消息推送，所以回答得不全面

响应式

了解过响应式设计吗？使用过什么方法？

• rem
• 响应式图片
• 媒体查询

最后

最后还是没有通过面试。。个人认为主要是对自己项目的掌握程度不够而且没有进一步的反思，所以还是有很大的上升空间啊，大家一起加油鸭～！