10

两年经验面试阿里前端开发岗，已拿offer，这些知识点该放出来了

 3 years ago
source link: https://segmentfault.com/a/1190000038854781
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

两年经验面试阿里前端开发岗，已拿offer，这些知识点该放出来了

一般阿里社招都是招3-5年的P6+工程师，但在某boss上有个阿里的技术专家私聊了我要我简历，我说我只有两年经历，但是这boss说，没关系，他喜欢基础好的，让我试一试，于是我也抱着试一试的心态发了简历。

简历发过去之后，boss就给我打了电话，让我简单的介绍一下自己，我就噼里啪啦说了一些，还说了一些题外话。然后boss就开始问我问题。

由于面了四轮，所以最开始的面试记忆有点模糊了。

1.说一下你了解CSS盒模型。
2.说一下box-sizing的应用场景。
3.说一下你了解的弹性FLEX布局.
4.说一下一个未知宽高元素怎么上下左右垂直居中。
5.说一下原型链，对象，构造函数之间的一些联系。
6.DOM事件的绑定的几种方式
7.说一下你项目中用到的技术栈，以及觉得得意和出色的点，以及让你头疼的点，怎么解决的。
8.有没有了解http2.0,websocket,https，说一下你的理解以及你所了解的特性。

第一轮电面大约面了50分钟，就记起来这么多，还有一些细节问题可能淡忘了，总体来说，面的都是以基础为主，然后boss说把我简历推荐给内部，进行正式的社招流程。

一轮技术面

这次就直接省略自我介绍了。

1.webpack的入口文件怎么配置，多个入口怎么分割啥的，我也没太听清楚。
2.我看到你的项目用到了Babel的一个插件：transform-runtime以及stage-2，你说一下他们的作用。
3.我看到你的webpack配置用到webpack.optimize.UglifyJsPlugin这个插件，有没有觉得压缩速度很慢，有什么办法提升速度。
4.简历上看见你了解http协议。说一下200和304的理解和区别
5.DOM事件中target和currentTarget的区别
6.说一下你平时怎么解决跨域的。以及后续JSONP的原理和实现以及cors怎么设置。
7.说一下深拷贝的实现原理。
8.说一下项目中觉得可以改进的地方以及做的很优秀的地方？

最后问了有什么需要问的地方，面试到这里基本就结束了，大约面了一个多钟头，还是蛮累的。总体来说，回答的广度和深度以及细节都还算OK，觉得这轮面试基本没什么悬念。

二轮技术面

过了几天，接到阿里另一个面试官的电话，上一轮面试通过了，这次是二轮技术面，说估计一个钟头。这次依然跳过自我介绍之类的，直奔主题。

1.有没有自己写过webpack的loader,他的原理以及啥的，记得也不太清楚。
2.有没有去研究webpack的一些原理和机制，怎么实现的。
3.babel把ES6转成ES5或者ES3之类的原理是什么，有没有去研究。
4.git大型项目的团队合作，以及持续集成啥的。
5.什么是函数柯里化？以及说一下JS的API有哪些应用到了函数柯里化的实现？
6.ES6的箭头函数this问题，以及拓展运算符。
7.JS模块化Commonjs,UMD,CMD规范的了解，以及ES6的模块化跟其他几种的区别，以及出现的意义。
8.说一下Vue实现双向数据绑定的原理，以及vue.js和react.js异同点，如果让你选框架，你怎么怎么权衡这两个框架，分析一下。
9.我看你也写博客，说一下草稿的交互细节以及实现原理。

最后面试官问我有什么想问的吗，面试到这里基本就结束了，差不多面了一个小时。

三轮技术面

上一轮发挥感觉没前两轮发挥好，所以还是有点不自信的，没想到第三天后，就来电话了，通知我去阿里园区面试。

第一个面试官

1.先自我介绍一下，说一下项目的技术栈，以及项目中遇到的一些问题啥的。
2.一个业务场景，面对产品不断迭代，以及需求的变动该怎么应对，具体技术方案实现。
具体业务场景，我就不一一描述，Boss在白板上画了一个大致的模块图，然后做了一些需求描述。
然后需求一层一层的改变，然后往下挖，主要是考察应对产品能力，以及对代码的可维护性和可拓展性这些考察，开放性问题，我觉得还考察一些沟通交流方面的能力，因为有些地方面试官故意说得很含糊，反正就是一个综合能力，以及对产品的理解，中间谈到怎么实现，也问到了一些具体的点，记得问到的有一下几个。

① 怎么获取一个元素到视图顶部的距离。
② getBoundingClientRect获取的top和offsetTop获取的top区别
③事件委托

第二个面试官

1.业务场景：比如说百度的一个服务不想让阿里使用，如果识别到是阿里的请求，然后跳转到404或者拒绝服务之类的？
2.二分查找的时间复杂度怎么求，是多少
3.XSS是什么，攻击原理，怎么预防。
4.线性顺序存储结构和链式存储结构有什么区别？以及优缺点。
5.分析一下移动端日历，PC端日历以及桌面日历的一些不同和需要注意的地方。
6.白板写代码，用最简洁的代码实现数组去重。
7.怎么实现草稿，多终端同步，以及冲突问题？

一面的时候其实我自己感觉答得不是特别好，当时面下来感觉要凉了，很幸运的时候还是给我过了。

我准备面试之前对我自己的要求就是，我会的尽量不会很快就被问倒，所以我重点复习了我擅长的知识，并且到网上刷了很多阿里面试题，做了一个整理，现在分享给大家，算是一个感恩回馈吧。

React
  • REACT 全家桶
  • 介绍Redux，主要解决什么问题？数据流程是怎么样的？多个组件使用相同状态如何进行管理？
  • React-Redux到react组件的连接过
  • Redux中间件是什么东西，接受几个参数
  • redux请求中间件如何处理并发
  • Redux中异步的请求怎么处理
  • 如何配置React-Router
  • react-router怎么实现路由切换？BrowserRouter as Router

......

HTML和CSS
  • 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
  • 每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
  • Quirks 模式是什么？它和 Standards 模式有什么区别
  • div+css 的布局较 table 布局有什么优点？
  • img 的 alt 与 title 有何异同？ strong 与 em 的异同？
  • 你能描述一下渐进增强和优雅降级之间的不同吗?
  • 为什么利用多个域名来存储网站资源会更有效？
  • 请谈一下你对网页标准和标准制定机构重要性的理解。
  • 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
JavaScript
  • JQuery 一个对象可以同时绑定多个事件，这是如何实现的？
  • 知道什么是 webkit 么? 知道怎么用浏览器的各种工具来调试和 debug 代码么?
  • 如何测试前端代码么? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
  • 前端 templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
  • 简述一下 Handlebars 的基本用法？
  • 简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？
  • 用 js 实现千位分隔符?
  • 检测浏览器版本版本有哪些方式？
  • 我们给一个 dom 同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获
  • 实现一个函数 clone，可以对 JavaScript 中的 5 种主要的数据类型（包括 Number、String、Object、Array、Boolean）进行值复制
  • 如何消除一个数组里面重复的元素？
HTML5和CSS3
  • CSS3 有哪些新特性？
  • html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？
  • 如何区分 HTML 和 HTML5？
  • 本地存储（Local Storage ）和 cookies（储存在用户本地终端上的数据）之间的区别是什么？
  • 如何实现浏览器内多个标签页之间的通信?
  • 你如何对网站的文件和资源进行优化？
  • 什么是响应式设计？
  • 新的 HTML5 文档类型和字符集是？
  • HTML5 Canvas 元素有什么用？
  • HTML5 存储类型有什么区别？

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK