前言

最近公司在招前端，一件说大不大，说小不小的事情。第一次当起了面试官，不敢掉以轻心，准备工作要做足，毕竟要招进来的人是经常朝夕相处的同事，靠谱些为好。经过几天的实践与反思，总结了一套适合自己的面试问题，希望对一些人有所启发。每个题目都没有标准答案，注重的是答题的思路以及对问题本身的拓展，有些给出了参考链接，都是我曾经读过的文章，恩，如果英语不过关，祝好运。

面试题

预热

昨天或者最近这一周，学了些什么？
前端这个工种是依托互联网的繁荣快速发展起来的，因而也就促使着前端不断革新技术来满足日新月异的互联网。学习不是为了跟风，什么新学什么，而是为了完善和更新自己的技能树，保持核心竞争力。如果能从这个问题的回答看出你有阅读，学习，实践的习惯，那就更好了。
如果今年想掌握一门新技术，会是什么？为什么选择它？
如果说上面那个问题是战术问题，那么这个应该就是战略问题。无论想横向发展还是纵向发展，都逃不脱一个成长的话题，透过这个问题，可以了解下应聘者的技术视野，同时也是其成长的方向与潜力。
最近有没有遇到些问题？你是如何解决的？
这个问题比较开放，即使遇到的不是技术问题，也可以回答，比如，遇到的问题是马桶堵了，也可以说出来。主要是了解下应聘者解决问题的思路。
谈谈你的开发流程与环境
有多热爱开发，就得有多热心于开发环境的打磨，因为上班的绝大部分时间都是沉浸在这个环境下，舒适度很重要。
有没有在线的得意之作，为了完成这个作品，用到了哪些工具，你贡献了哪些功能或者想法，能谈谈吗？
有些前端业余会做一些小项目，实践新知的同时涨涨姿势。这些小作品往往能给面试锦上添花。
有写博客吗？
写博客是一种输出，也是一种沉淀，即便不怎么写技术类文章，能坚持写的，是靠谱特征之一。

HTML

HTML是骨架，是基础。语义化标签，SEO，兼容性，加载和渲染顺序与性能等等，在写HTML代码时都需要考虑进来。

大概写一下你常用的HTML骨架（PC&Mobile）
Quirks Mode（怪异模式）和Standards Mode（标准模式）的异同点
参考链接
什么是Flash of Unstyled Content（FOUC），如何避免？
参考链接
尽可能多地列举出HTML5新标签
基础问题，如果不能列举出三个以上，下面那个问题也没必要问了。
HTML5的新特性里面，你最喜欢哪个？为什么？
开放性问题，目的在于了解对HTML5的认知与实践。
cookie,localStorage和sessionStorage 异同点
参考链接
解释下CORS，怎样使用
参考链接
script标签 async 与defer两个特性的异同点
参考链接
CSS放在head标签头部，js放在body标签底部，有啥优点？可不可以不这样？
参考链接

event.PreventDefault，event.stopPropagation与return false异同点
参考链接

CSS

CSS是我的薄弱项，只考察基础，但是有这些基础我认为也就够了。任重道远，共勉。

尽可能多地列举display属性值，追问：inline和inline-block的区别
尽可能多地列举position属性值，追问：absolute是怎么工作的
为什么会产生浮动，清除浮动的技巧
参考链接
描述下你对盒模型的理解，通过CSS怎么告知浏览器使用不同的盒模型
参考链接
解释下Block Formatting Content (BFC)，它是如何工作的
参考链接
使用过哪些CSS框架？有没有试过更改或者改进它们？
开放性问题，目测一般会回答Bootstrap。

Javascript

公司项目中写交互的场景比较多，所以这一块是重点考察的，虽然平时都使用jQuery，但有javascript的基础更为重要。

===与==异同点
基础问题，这个如果表现出不知所措，就没必要往下进行了。
实现下面的函数
1
duplicate([1,2,3]);//[1,2,3,1,2,3]
描述下document.write()使用场景
onload和 $(document).ready的区别
参考链接
immediately-invoked function expression（IIFE）的工作原理
参考链接
谈一下你对javascript中this的理解
参考链接
事件代理(Event Delegation)
参考链接
闭包是什么？举例它在实际工作的应用
参考链接

说出下面代码Person函数使用的区别

1
2
3

function Person(){};
var person1=Person();
var person2=new Person();

call和apply的异同点
参考链接
你是如何理解hoisting的
参考链接
尽可能详细地解释下AJAX，请写出创建并发送一个AJAX请求的过程。
参考链接
解释下JSONP，为什么说它不是真正的AJAX?
参考链接
当写onscroll事件的回调函数时，你能想到的最佳实践是什么？
参考链接

jQuery

公司项目中，用到了jQuery，所以有必要考察一下这方面的基础，其实如果前面问题回答的足够出色，这一块可以忽略，因为相信有了前面的基础，jQuery上手会很快。

jQuery是个框架还是类库，为什么使用？
如何使用jQuery获取元素的属性
如何使用jQuery同时选取多个元素
单击下面P标签，其背景色变为黑色，再单击回复原来颜色，使用jQuery实现
1
<p id="test_tag">点我变色，再点我恢复</p>
大概写出jQuery下AJAX使用场景

其它

为什么说在多个域名下存放静态资源会好一些？
浏览器地址栏输入URL敲回车那一刻起到页面完全呈现出，尽可能详细描述出中间发生了什么。
长轮询，Websocket，SSE
HTTP Method 有哪些，尽可能多地列举

结束

以上是我经过思考与总结的一套前端技术面试题，大部分都能在网上找到答案。当然，面试时不会都问到，随机选七八个问题就差不多了。前端远不止这些，有很多比较成熟的技术并没有提及，比如NODE.js，比如Angular.js，再比如React.js，但招聘的目的不是为了炫技，更不是要故意为难应聘者，而是筛选出适合公司发展的人员。可以参考，但不要照搬，靠谱与否，自己衡量。

参考

Front-end Job Interview Questions