面试百度91无线前端开发职位经历
2015年6月参加了百度91无线事业部的前端面试,虽然显然的跪了,但是还是记录一下过程吧
第一轮
接待我的是两个高高瘦瘦的技术哥哥,我们坐在二楼的休息处(其实面试前我就混进来呆在同一张桌子上刷了半个小时题目了)
第一题:简单介绍一下你做过的项目吧
我每次都特别怵这类问题,但是每次都不准备这类问题的答案(这是明显自己作死),所以简单介绍了一下以前做过的一个朋友圈小游戏。是一个纯也能过html+js制作的反应类小游戏
于是追问怎么实现的时间控制,回答说是setTimeout
追问知不知道setInterval
?
回答:
setTimeout
是对function触发后插入任务队列定时启动,setInterval
是function的循环调用
网上找到的标准答案增补
面试小哥再次追问:那写一个倒计时的小程序吧(其实这个问题简直简单到爆,结果我当场没写出来),还是努力地入了一下js门事后增补一下答案(实在对不住面试小哥)
//倒计时
function countdown(now){
setTimeout(function(){
console.log(now)
now = now-1;
if(now){
countdown(now)
}
},1000);
}
countdown(10)
主要是我连这么简单的问题都没有回答出来,实在也没有必要继续问下了,话题陷入了尴尬
第二题:我猜这个题目你肯定准备过,讲一下position的几个属性
回答:主要有四个属性:absolute,relative,fixed,static。其中
- absolute是绝对定位,当他的父元素的position没有除了static的其他属性时会一直向上层祖先元素找,直到找到或者到根元素然后根据top,left,bottom,right来相对这个元素绝对定位
- relative是相对自身本身所在的位置来定位
- fixed相对于屏幕定位,类似一些铆钉屏幕顶部的导航栏的制作就是靠这个
- static是默认值
网上找到的标准答案如下
>
第三题:画个简单的盒模型吧
回答:画了一个简单的盒模型,分别是margin外边距,border边框,padding内边距,最后是content内容盒
追问:如果我规定元素width为一个值,那么这个值是指什么的宽度?
回答:在chrome里面是指content,在firefox里面是指包括border在内的宽度(亏我说的信誓旦旦面试小哥都差点信了。。。这里是完全错的)
正确的答案应该是
在chrome和firefox里面都是content(这个叫做w3c标准),在ie系列以包括border在内的宽度为width(这个叫做IE标准)。其实大部分时间我们更应该统一使用IE标准,这样能减少大量的样式计算工作
此时面试小哥已经是一副日了狗的表情了。接着追问我一般是怎么处理的,我回答说为了简单处理使用reset.css
来统一样式。
追问:为什么使用这个?
回答:因为不同浏览器默认标签样式会存在不同,例如字体上下边距和字体大小。我们一般使用{margin:0px;padding:0px;}就是这样设置默认样式的。而这个reset.css激素hi设置了一个几乎完全统一的样式表,使得写出的网页在几乎所有浏览器的显示效果都相同
追问:那么举例子说一下吧,如果我想让上面所有浏览器的width都是指的包括border那reset.css
的实现原理是什么呢?
这个没回答上来
正确的回答应该是通过设置box-sizing属性
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box
第四题给你一张纸请手写一个轮播图
这个题有影响,但是当时纯手写白纸根本就没写出来,连原理都不知道
这是我昨天在电脑上手写的一款轮播图,纯css实现动画
github:https://github.com/david500834/little_work/tree/master/slider
具体思路请看我的下一篇文章
怎么说呢,这个题相当凶险有难度
第五题最经典的闭包问题
var name = 'global';
var obj = {
name : 'obj',
dose : function(){
this.name = 'dose';
return function(){
return this.name;
}
}
}
alert(obj.dose()())
简直是教科书一般闭包问题,答案是global
尾声
显而易见的最后跪了,不过吸收了很多教训,下次面试还可以吸取教训
这次面试我打5星,有干货,有难度