2016届校招 百度WEB前端研发【实习生+提前批】面试经历

终于到了可以实习的时候，然而这时候大部分实习只面向2017届的，据说原因是2016届的校招名额已满，所以为了不耽误你的校招（因为你可能想通过实习转正什么的），还是不招2016届的学生了。尽管如此，还是得找啊，于是各种投简历。前几天投了一个百度的WEB前端实习生岗位，然后今天下午去面试。记录一下吧～

一面

一面是技术面，其实二面也是。前端的面试基本就是HTML+Javascript+CSS，然后附带有一些算法/策略/智力题的吧。

1.简单自我介绍一下吧

此处省略。。。

2.先说一下你的这些项目吧，你在哪些环节参与了前端开发，大概都是些什么形式？期间用到了哪些东西？

我在这些项目中与前端相关的工作大都与后台管理模块相关，我负责设计和开发这些管理平台。其中用到一些框架，比如jQuery/Bootstrap/fontAwesome等，还用过一个基于Bootstrap的后台框架SB Admin，其中集成了一些如百度的echarts等图标类的插件，用起来比较方便。我以前在做的时候都会自己来搭这样的框架，但是这些项目里由于工期比较紧，因此选择使用已有的框架来开发。

3.那你们一般是怎么处理服务端，我看你们是一个APP，你做的后台模块和与APP交互的服务模块是一个工程还是两个？

第一个项目里，我们是分开的；第二个我们是同一个工程。

4.那你们的接口一般怎么来定义？

一般是由我来设计，包括请求的URL，以及参数，还有方法调用的返回值，以JSON对象的形式给出。

5.嗯，好，下面我问你几个问题。CSS里，如何实现隐藏？

设置visibility为hidden，display设为none，还有jQuery的hide方法（实际上还是display设为none）。

6.这两者有什么区别吗？

visibility设为hidden的话，元素的空间还留着，有一个空白；display设为none时，空间也被隐藏了。

7.position有哪些值，都是什么含义？

absolute，绝对定位，相对于上一个绝对元素（这里错了，实际上是生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，参见CSS position 属性）。
relative，相对布局，与在文档中的顺序和其他设定有关。
fixed，相对于窗口来定位。

8.还有其他的没？

我只了解到这些。（实际上还有static和inherit）。

9.我如何在界面上取到一个元素啊？

可以用document.getElementById()/document.getElementsByTagName()等这样的方法，或者用jQuery里更加丰富的选择器，可以用类/伪类以及一些更高级的叠加在一起的选择器，可以同时选取多个对象。

10.那我用原生的方法和jQuery方法获取到的对象有什么不同吗？

原生方法获取到的是DOM对象，jQuery方法获取到的是jQuery对象，两者上面各自有一些不同的属性或者方法。

11.如果有一个form表单，你给我写一下大概都有哪些属性需要设置，才能正确使用。

这个地方把form里的 action method enctype等属性都说了一下，然后各种常见的表单元素，input radio button checkbox select 都说了以下，还有input域的name啊value什么的全说了一遍，估计面试官就是想看你到底熟不熟悉HTML吧。

12.那如果我想提交这个表单怎么办？

可以用submit按钮来提交，或者我们自己写一个其他的监听，比如监听一个button，我们来ajax提交。

13.我提交的时候数据是怎么发送的？过程如何？

如果是get的话，它会把所有的域以参数的形式添加在目标url后面。然后服务器会返回一个响应，比如可能是跳转。

你写一下大概是什么形式

url?key1=value1&key2=value2&…

key和value分别是啥？

key是表单里域的name，value是输入的值。

14.那如何ajax提交？

我们可以监听一个时间比如button点击，然后再使用HTTP请求发送数据即可。

怎么拿到数据呢？

可以获取那个表单对象，然后可以直接用form.data把其中的数据作为ajax方法的参数来发送。

15.跨域访问该怎么实现？

跨域是与同源策略相关，我了解到的有大概两类。第一类是不严格的同源策略，设定window.domain的值，如果相同就认为同源；第二个是CORS（Crossing Origin Resourse Sharing）跨域资源共享，它是在服务器端给头部里加了多个源或者通配符来实现的；第三个是HTML5的新特性，CDM（Cross Document Messaging）跨文档通信（postMessage+监听message）；这一类的其实还是同一个源。如果真的要用跨域的话，比如JSONP，用script对象来发送请求，然后对结果还可以执行。

JSONP这种具体是怎么实现的？原理是什么？

党我们给一个script对象设定src时，他会访问指定的url，然后获取到一个结果，如果这个结果刚好为一个方法调用的形式，比如a()，然后我们本地又有一个这样的方法那就会调用了。

16.ok，那你说一下js里继承是如何实现的。

继承大概有四种方法，对象冒充，apply，call，prototype。

17.你大概都写一下该怎么用。

然后我开始写代码，我写的前三种，面试官都没有表示正确与否，第四种倒是很认可。不过我写的都是从一本书上看到的，可能并不是很常用？这里不写代码了，参见《Javascript高级程序设计》。

18.假如我现在有一个数组，里面的数字是1-100，现在我想打乱这些数字的顺序，获得一个新的随机序列，你写一下代码我看看，伪代码即可。

然后我又开始写代码，写完后给面试官稍微解释一下，他表示没有问题。

19.假如我现在有1000个元素，我想给每一个都加一个监听，该如何实现会比较高效且内存不会太浪费？

嗯，可以用jQuery的事件绑定方法给一个类的所有元素加监听。

但是这样还是给每一个元素都加了监听，我不想这样。

嗯，我确实没有做过，不过我有这样一个猜想，我给他们的父元素加一个监听，事件发生时，我根据事件发生的位置来判定是哪一个元素，这样只用加一个监听就好了。

嗯，对。

20.你对jQuery和Angular.js都有了解？

jQuery了解的多一些，但是Angular.js没有掌握（此处说了一下原因）。

好，那没事儿，就是大体有个架构了解，但是用的不熟，这个没事儿。

21.如果给你一个psd，你可以把他实现出来吗，包括切图什么的。

可以，因为以前做东西都是从前到后一个人，可能连画图都是自己来的，虽然不是特别好，但是基本操作都没问题。

以下为闲聊

你现在可以出来实习呀？
嗯，已经跟导师沟通过了。因为前两年都没出来实习，现在到了找工作了的时候，所以出来实习。

你老板不会拉你在实验室做苦力吗？
已经做了两年苦力了，所以老板愿意放出来。

那你老板还挺好的。
嗯啊，我老板人很好。

那你校招有没有报深圳或者广州那边？
没有，我家是北方的，就打算在北京发展吧。（不知道为啥要问这个啊）

好，你等我一下。

过了一会儿，一面面试官和二面面试官一起过来了。

二面

握手，然后简单自我介绍。

1.好那我就直接问你问题了啊，咱先写一下简单的CSS样式吧。

面试官在纸上画了一个简单的示例，然后指定了一些效果，比如边框，上边框红色，内边距等
我就在纸上把css都写出来了

2.好，那你再把DOM结构也写一下吧。

然后我又写了一下<div>什么的

3.如何隐藏一个元素啊？

设置visibility为hidden，设定display为block。

他们的区别？

visibility还留有空间，display不保留空间。

还有别的方式吗？

此处一连串想了四种比较另类的方式
设定width和height都为0，设定颜色与背景相同，移出可见区域，使用别的元素遮挡，实在想不出来啦。
面试官，笑~ :D
(貌似还可以使用CSS新属性设为透明的？)

4.嗯，行。我看你对Angular.js还有了解。

于是又弱弱的解释了一下，其实并不会。

5.行，好，那咱们问一下jQuery的。jQuery(document).ready()和window.onload()有什么区别。

两者触发的事件不一样，jQuery有自己的一些事件。（只有这些了，别的不知道啊）
回来后看了网上的，有以下区别：执行时间，jQuery(document).ready()在DOM加载结束之后即执行，而window.onload需要在渲染结束即页面内包括图片frame等的所有元素加载完毕后才能执行；重写及调用次数，jQuery(document).ready()可以多次调用，追加执行，而window.onload这种写法总是会覆盖之前的代码，因此只能执行一次。

6.嗯，那我这里如果有一排元素，A,B,C…他们是用ul和li来实现的，我现在想在每个元素上加一个单击监听，点击时可以alert其内容，用jQuery怎么写？

感觉面试官还是在考察，你到底是复制粘贴党还是手巧代码党吧
乖乖写出了jQuery(“ul li”).onclick(function(){…})

7.好这样就行了，那你原生js怎么样？
比jQuery好一些吧

嗯，那你看这样写有什么不同？
var x = function() {…} function x() {…}
感觉应该第一种是创建了一个局部变量，作用域只在当前域，第二种是个全局变量吧，默认的。（不知道说的对不对）

那你看一下这些 null==undefined , null===undefined…二等和三等的区别知道吗？
嗯，如果是对象的话，三等是判定是否是同一个对象。另外，对于二等，如果两个值可以相互转化，结果为true，比如null和undefined都可以转化为false，所以二等为true，而三等不行。

嗯，二等和三等也知道哈。obj.hasOwnProperty()，这个方法知道吗？
唔，不是很清楚，猜一下是判断一个对象是否有某个属性。（实际上这个方法是检测某属性是否是对象的自有属性，对于继承的属性返回false，另外如果对象没有这个属性也返回false）。

8.写一个方法吧，我有一个金钱的数字，想转化成带逗号的字符串，这个金额可能是负的，可能带小数。

这个还是比较简单的，然后就开始手写代码，用递归做，需要注意的是负号和小数部分，然而我忘了小数部分，面试官说小数部分不用处理，直接加在后面就行，所以应该没啥问题。

9.假如我有一个数组，里面都是字符串，但是可能重复，如何去重，比如[“AA”, “BB”, “BB”]

这里需要说一下，我写的是使用Array的filter方法，然而面试官表示哪有这样的方法，我说有，是EMCScript 5里加的，面试官查了一下表示是有的，但是EMCScript 6里又没有了。我说那我还是用笨一点的方法吧，遍历一下，然后添加的时候判断一下是否已经存在了。

10.在做web时用到的优化都有哪些啊？

一般包括图片的优化，图标会做成一张大图，然后用CSS精灵的方式来写，一方面减少请求次数，另一方面图片尺寸也可以小一些；还有就是js和css的压缩，尽量减少文件的个数。其他方面比如cdn，仅有了解，但是没有实际使用。

那你说一下你了解的cdn

简单说了一下
大概就是我们在各地会有很多服务器，用户在请求的时候我们可以由离他最近的服务器来提供服务。

11.嗯，好，Linux上编程没问题吧？

嗯，基本命令都可以。

闲聊阶段

职业生涯怎么规划的呀？
我觉得我自己对前端开发还是比较开窍的，所以打算一直做下去挺好的。

最近看过的一本前端相关的书是什么？
Javascript高级程序设计
哦，那本红色的书啊？
嗯。
有什么收获吗？
还是挺多的，看了以后对事件/同源策略/跨域/继承等等都有很好的学习。

嗯，好，我要问的就这么多，你等我一下。

---

然后就没有然后了。据说三面就是经理面，但是我没有。但是也可能经理不在？嗯，对自己表现还是比较满意的，这样的话如果还是过不了也无所谓啦。

本文仅用于记录面试经历，文中提及到的知识点不保证其正确性，各位看官请谨慎参考。

2015/9/8

---

实习面试结果 : )

收到电话通知，通过啦

2015/9/11

---

三面 提前批offer

本来事情是已经完结了的，就等着去实习就好了。但是上午接到HR的电话，说“我们觉得你背景挺好的，你愿不愿意再来面一下三面，如果通过的话直接给你提前批offer”，于是我今天下午又去面了三面。

三面应该是经理或者部门老大吧，面试过程并没有问太多技术细节，下面简单列一下问题吧：

1.说一说你做的这些项目，项目过程里的收获。
2.说一说你的实习经历，做了些什么，为什么离职了。
3.问了一下相关技术的掌握情况。
4.你在github上都在干些什么，顺带介绍以下自己做的一些小项目（非实验室项目）。
5.说一说你平时如何学习的？（期间提到了网上和书上的资料也经常会有错误，会自己去验证，问了一下都遇过哪些书上的错误。）
6.问了一下学校里的学习成绩和奖学金什么的。
7.家里的情况。
8.以后的打算，是否会去深【teng】圳【xun】、上海什么的地方。
9.你有没有什么想问我的
我：我以后的工作内容，是否会涉及到除了前端开发之外的部分？
对这个问题进行了详细的回答和沟通，最后达成了一致。

总结
三面整体过程感觉是在考察学习能力/学习习惯/价值观等，与一二面的着重点不同。

面试回来后一小会儿，HR打来电话，表示面试没有问题，于是就这样拿到了提前批offer，意外得来的惊喜，还是很开心哒～～～

2015/9/15