前端实习生面试

[转载]阿里实习生前端面试心得

概述

总之呢，我觉得面试这东西，绝对不可能100%发挥，我发挥大概是一面60%，二面80%，三面70%。

可见，我一面几乎差点崩掉 orz。

一般而言，第一次面试都会很紧张的，然后要挑个好位置，保持好心态，深呼吸都很有用，不紧张最少增加10%的发挥，碰到对胃口的面试官也能至少增加10%发挥。

我这边的阿里面试经验就是

• 内容上：一面基础，二面项目，三面架构、框架分析。
• 形式上：阿里大多是3轮技术电面，一轮 hr，有时候会有视频面试，写代码之类。

然后分点回答很重要，思路清晰很重要，没听懂问题问一下很重要，有些问题假如能结合自己项目经历谈可以加分。

接下来我简略写一写三次技术面试吧。

一面

背景

3.8 晚上 53min

第一个面试紧张的不得了，然后还选择了一个不好的地点，，吹风，当时我还在想，别人一面很快来着，所以吹吹风精神一点，然后我就被吹成了 dog，面了将近一小时= =

如何判断一个变量是字符串

我在玉伯的 github 博客里看到过一篇叫做 sea.js 源码剖析的文章，上面提到一个方法，其实适用于任何类型的检测

Object.prototype.toString.call('str') // '[object String]'

typeof 'str' // 'string'

// 常见的错误写法（我只答了上面俩，多机智）
> 'cads' instanceof String
false

apply 的作用，类似的更改 this 的方法有哪些

apply 可以动态更改函数对象内部的 this，可以用于将 DOMList arguments 等伪数组变成数组，这样就可以，对它们使用数组的方法来操作。

call、bind

性能优化的方法

#你有用过哪些前端性能优化的方法？

性能优化，除了雅虎13条军规，还有哪些

我没答出符合要求的 orz（还是13条里面）

面试官说了，寻找最短链路（用户到美国服务器），缓存大有可为（服务器端）

let 、var 区别

let 块级作用域，var 函数作用域

let 暂时性死区的原因

var 会变量提升，let 不会。

浏览器事件传递机制，有没有停止冒泡的使用经验

冒泡、捕捉。

我在我的博客项目的导航栏里面使用了，其中二级 menu 被一级 menu 包起来了，点击二级 menu 的事件会冒泡到一级上，但是实际上应该一级不响应二级目录的点击事件，所以在二级的事件监听里面应该调用 e.stopPropagation()

ps：因为当时没有用 a 标签，而是用的监听 li 标签的 onclick 事件才导致的这个问题，实际上用 a 标签无需停止冒泡。

闭包

#如何理解闭包

闭包与函数作用域的联系

函数作用域是产生闭包的原因

如果你看题目也愣住了，就和我一样，答案或许和我一样都知道，然而。。。

说一说你擅长和不擅长的方面

切记不要说不擅长 js，以及这道题几乎每个面试官都问我了，出现概率很大，可以提前准备

擅长 js，css 不擅长。

谈一谈 promise

#说说你对Promise的理解

使用选择器查找页面内所有 div 元素

一开始我以为是 css orz，然后和面试官楞半天。。（最佳反映应该是直接问是 css 还是 js orz

getElementsByTagName('div')
querySelectorAll('div') // ie9+

如何优化 DOM 操作的性能

• 不要反复使用 DOM 查询操作，应该用变量缓存
• 避免大量使用会造成重绘的 DOM 操作
• 多使用 id 选择器

影响页面重绘的操作

改变 width height、offset 等值

其中 js 动画影响显著，我以前项目写过 js 长动画，性能很差，cpu 飙升，长动画应该用 css 动画。

前端渲染和后端渲染的优缺点

• 前端渲染不利于 seo，可能会增加HTTP请求
• 后端当一分钟访问量几百万对服务器有压力

其他资料

from 司徒正美博客 http://www.cnblogs.com/rubylouvre/p/4128500.html

• 服务器为了前端渲染，对对象的字符串化所消耗的时间，远远大于服务器直接渲染模板生成HTML所花费的时间。
• 我的建议是前后端模板同时使用。
• 后端渲染完了之后，需要进行网络传输的体积大了，带来的网络损耗和网络传输时间问题
  很多场景，尤其是在移动端，我们通常不会把渲染工作交给后端，一方面后端渲染需要时间，一方面庞大的渲染数据传输也有时延，所以就会出现白屏问题。
• nodejs 的出现让模板复用方便了不少，很多时候，让后端渲染一部分（比如首屏部分），后面的工作就交给前端异步去处理。两者结合起来效果才是最佳的。
• SEO 问题嘛，看产品需求，很多产品优化了 SEO 也没多大作用，如果实在要考虑：可以使用 pjax / quickling / hash bang 等技术,或服务器端根据 UA 输出内容

跨域

#如何解决跨域问题

对我的评价

回答问题的时候不要一听到自己会的，就想这个我会，然后抢着答，要把题目挺清楚。学的比较杂，比较新，需要挖深。

二面

背景

3.11 下午 24min

平时怎么学习 web 前端

微博、github、看书

我整理的大牛列表（然而面试的时候没说出几个 orz，紧张面试之大敌）

https://github.com/CoderUnion/coderunion-github-talk/issues/87

https://github.com/CoderUnion/coderunion-github-talk/issues/86

学编程每天花的时间

至少5小时，放假更多（有点 sad 的是还有没说的，寒假我几乎是每天8小时编程，所以之后问到的，博客学了一个多星期，开发了一个多星期，惊讶于我开发的很快的时候，我还是忘记说这个了，因为寒假我花了 double 的时间编程呀。。）

介绍项目

博客，组件，etc 此处省略200字

hybird app etc 此处省略200字

性能优化效果最好的几个方面

减少 http 请求，gzip

评价

很不错，等

三面

3.12 星期六下午2点 43min

简单介绍一下，不用常规介绍（简历上的东西），可以说一说你最有意思、或者有点难度值得一说的开发经历

昨天晚上，使用 nginx 将一个 ip 对应多个域名。今天上午在帮别人搭建博客时，线上操作失误，把数据库数据弄坏了 orz

补充，当天晚上通过回滚磁盘弄好了没有备份的数据库 orz（我是一个不合格的运维）

单向数据流和双向数据流，MVC，MVVM，flux 系列的特点和区别

略（我答是答了，不过感觉自己把自己说混乱了，，大概就是说，单向的更清晰，写的累、复杂，但是维护更容易，双向和 MVC 写着快，但是维护起来对于大型项目比较吃力，其实我觉得面试官是要我说痛点，，但是那些痛点实际上我都是听说的，自己遇到的少，所以印象不深）

django 这种重后端类型的架构和 react 或 spa 等这种重前端的架构的区别，和适用特点

• 看团队结构，如果团队里面后端比较多，就重后端，假如前端人多，就轻后端，将业务逻辑放到前端
• 性能上，特别是移动端 webview 里面，一个新的交互，不可能去新加载一个 html，这太慢了，所以应该用 ajax，局部更改页面内容。

其实也没打全 orz，其实和前端渲染和后端渲染的题，有很多类似的地方。

react 研究的怎么样，说一说它的一些特性

组件化说了一堆。。 还说了单向数据流，flux，immutablejs

提示你一下，vitrual DOM 方面

• 性能非常好
• 由于脱离了浏览器 DOM，所以可以很方便的多端迁移，比如服务器端渲染，react native 移动端开发。

vitrual DOM 算法实现有研究过吗

我看过一个博客，里面提到了 Facebook 工程师根据几个策略

拥有相同类的两个组件将会生成相似的结构，拥有不同类的两个组件将会生成不同的结构。将 O(n^3) 复杂度的问题转换成 O(n) 复杂度的问题

实际上我少说了俩策略。

1. Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。
2. 对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。

问我深入的具体实现，我说之前的了解是在学习 react 的时候看的，后来去写博客了。。

详情链接

http://zhuanlan.zhihu.com/purerender/20346379

说一说你觉得自己什么时候技术提高最快

做项目，省略50字

为什么想来我们这边实习，你认为可以收获什么

• 我认为有人（很多）用的东西，会把问题暴露出来，再小的问题都会变成大问题，解决这些问题就会深入研究很多东西
• 团队方面，省略50字

假如当你开始工作后，发现工作时间没有提高怎么办

• 在工作中，肯定要总结，不断精进，从做项目中收益，而不是错了一次再错第二次（我这里只针对了 bug，应该更广，比如架构啊，编码风格啊等等）
• 回家肯定至少花一个小时看书，还要关注社区的一些动态，平时我在微博 github 上面那些工作了的大牛，他们每天传播的新技术新思想知识，我都是挑着看的

评价

你现在知道框架架构怎么用、用途不够，还要知道什么时候用，为什么用，像 angular 啊、react 啊等等，这些框架的核心，解决了什么痛点。

这个评价估计是因为之前问我为什么用 vue啊 react 啊，我当时之前都是说为了学习而用，然后 react 深入的问题我没答好。

不过你条理比较清晰，也热爱做项目，这点不错。

其他链接

http://zhangwenli.com/blog/2015/04/01/2015-front-end-engineer-interview/

http://www.cnblogs.com/joyeecheung/p/5003980.html