2016招聘前端开发工程师的面试题

发布于 2016年3月24日作者:zhangdi

又被安排出题以招聘前端工程师。这两年前端发展很快，老题目我感觉不好意思再用，还是重新出一套吧。

以下题目可以面试也可以笔试。笔试时间60分钟。面试时间20分钟（面试时编程类的题可以简化为问答，例如== 与 ===的区别，闭包是什么之类）。很多题目是开放性的，可以引发有趣的讨论，这些开放性的题目答得好属于加分项。这比直接的答案更能体现此人的能力。但是那些非开放性的问题，都是考察基础的，里面的题目现在大多数培训班都会提到的，如果答不上就要注意了。

根据这些年的经验，题目出的比较简单。考察基础为主。前端工程师一般分两类，一种是设计+CSS，关键词也就是Dreamweaver+Photoshop，这种人较多，但很多是培训班速成的，通常计算机知识薄弱学习能力也较弱。另一种是JS开发出身的，甚至是后端开发出生的，偏重前端架构, 这种人比较少，也是业界稀缺的。现在很多北京的前端培训班都会讲前端MVC、nodejs之类的东东了，但由于学员水平较低所以学得好的不多。与之相反的另一个极端是，很多程序员社区里大家互相装X，爱讨论的什么JS性能测试、cache管理之类的问题，但因为那些题在工程领域遇到的很少，你总不能指望随便一个面试者就有做过前端大规模数据呈现的经验吧，如果有就得跪请了而不是面试了，我们又不是BAT的招聘人员啊。牛人可遇不可求，把能快速干活的人抓住就不错了。

------------------------------------------------------------------------------------------------------------------------------------

一，自我介绍

工作经历简介，能力亮点自述
自我认为之前做过的最酷的项目是什么？可以简单描述一下吗？

二，工程师-产品与团队

请谈谈你喜欢的开发环境
你最熟悉哪一套版本控制系统
你能描述渐进增强 (progressive enhancement) 和优雅降级 (graceful degradation) 之间的不同吗?
请说出至少三种减少页面加载时间的方法
什么是CORS？如何实现？

三，HTML与CSS

用过哪些浏览器进行测试（不少于3个）？这些浏览器的内核都是什么？
请解释 CSS sprites，以及你要如何在页面或网站中实现
你用过栅格系统 (grid system) 吗？如果使用过，能说说栅格系统的用途吗？
请解释 position四个属性relative、fixed、absolute 和 static 的区别
请描述cookies、sessionStorage和localStorage的区别

四，javascript

写一段代码，输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26
用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。
你使用过 JavaScript 模板系统吗？如果有，说说用过哪些库？
下面这个ul，如何点击每一列的时候alert其index?

<ul id=”test”>
<li>这是第一条</li>
<li>这是第二条</li>
<li>这是第三条</li>
</ul>

五. 职业展望

在未来一年，你最想学的新技术是什么？
有什么业余项目吗？哪种类型的？
有用过github，stackoverflow或者有自己的博客站点吗？如果有，请写下账号名或地址，我们非常有兴趣拜读。

------------------------------------------------------------------------------------------------------------------------

参考答案：

1.1 （开放式问题）例如，本人历经大小项目无数，擅长PS改图搬运机箱修理电脑重装系统查询bug响应式设计网页设计可视化案例设计前端架构设计后端设计泡面吃面等等。

1.2（开放式问题）例如，SOTREE。

2.1 （开放式问题）例如，windows环境+webstorm， ubuntu + apatana studio

2.2 例如，git, SVN

2.3 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

2.4 可以参考http://www.5icool.org/a/201411/a9105.html，这里有20种减少页面加载时间的办法

2.5 （开放式问题） 跨域资源共享（CORS ）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的，但未来可能成为标准。跨域对于前端只需要在支持CORS的浏览器中直接ajax请求即可。但接收跨域请求的服务器需要进行一系列设置，主要是添加HTTP头Access-Control-Allow-Origin。具体到apache, nginx,php,nodejs里各有个的写法。注意恶意站点可能通过XSS攻击我们的服务器。所以我们应该尽量有针对性的对限制安全的来源

3.1

IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:现在叫Blink，以前叫webkit
国产的什么360、QQ、酷狗之类的浏览器没有自己独特的内核，都用IE或chrome的内核

3.2 CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，以减少并发请求数。CSS Sprites的做法是就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。

3.3 随着响应式设计（responsive design）的流行，栅格系统开始被赋予新的意义，那就是，一种响应式设计的实现方式。栅格样式库一般是这样做的：将页面划分为若干等宽的列（column），然后推荐你通过等宽列来创建响应式的页面区块。典型例子如bootstrap

3.4

static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

3.5

cookie，容量4kb，默认各种浏览器都支持，缺陷就是每次都要请求和容量太小。

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。相对cookie而言，容量大，减少了不必要的请求数，并且调用API更简洁方便。

其中，sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

4.1

var d = new Date();

// 获取年，getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月，月份比较特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? '0' + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);

4.2

var iArray = []; 
function getRandom(istart, iend){       
    var iChoice = iend - istart  +1;     
    return Math.floor(Math.random() * iChoice + istart);
}
for(var i=0; i<10; i++){     
    iArray.push(getRandom(10,100));
}
console.log(iArray.sort());

4.3 （开放式问题）例如，Mustache、Underscore Templates、Embedded JS Templates、HandlebarsJS、Jade templating

4.4

// 方法一：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++)
{
    lis[i].index=i;
    lis[i].onclick=function(){
        alert(this.index);
    };
}

//方法二：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++)
{
    lis[i].index=i;
    lis[i].onclick=(function(a){
        return function() {
            alert(a);
        }
    })(i);
}

5.1 （开放式问题），例如，webGL

5.2（开放式问题），例如，出画集

5.3 （开放式问题），很多工程师都没听说过github。如果他们还有个人站点，说明是个时髦的有企图心的工程师，但这种可遇不可求。

参考文献：

http://blog.jobbole.com/78738/

https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese#fun-questions

https://www.zhihu.com/question/19568008

“2016招聘前端开发工程师的面试题”有 6 条评论。

一波说道：

2016年3月24日下午4:11

4.2 有问题，sort方法排序数字可不能直接 sort()

回复
1. 张迪说道：
  
  2016年3月24日下午4:41
  
  4.2 是有问题，但问题是代码第四行最后少了一个括号，而不是你说的sort不能直接排序。现在我已经把括号加上了。你可以直接把代码复制到浏览器开发人员工具的console里执行。
  
  回复
  1. 一波说道：
    
    2016年3月24日下午6:56
    
    只不过凑巧罢了，自己换成 getRandom(1,100) 试试吧
    
    回复
    1. 张迪说道：
      
      2016年3月25日上午9:53
      
      感谢你的细致的观察，但我还是得说那不是凑巧。原题就是排序10到100之间的随机数，这个情况下用sort()没有问题。因为sort函数不用参数的情况下就是根据字符的ASCII码排序，而排序对象都是两位数，所以这种情况是不会错的。没必要因为牛顿第一定律在更宏观的宇宙时空中不成立，就说它是完全错误的。同理，也没必要通过更改题目来证明sort一定是不行的。当然，一般情况下CS系的学生我估计都会写成冒泡排序、快速排序、希尔排序之类数据结构课讲过的方法吧，如果让用lodash之类的类库就更加简单了。
      
      回复
      1. 邓佚名说道：
        
        2018年5月3日下午6:03
        
        有理有据，佩服！
cc说道：

2016年9月23日下午4:31

三.4，我就会答这一题....

回复

2016招聘前端开发工程师的面试题

“2016招聘前端开发工程师的面试题”有 6 条评论。

发表回复取消回复

分类

“2016招聘前端开发工程师的面试题”有 6 条评论。

发表回复 取消回复

分类

发表回复取消回复