前端面试题精选
一、电话面试开场白
1、你先简短地介绍一下自己
2、你是怎么学习前端的（红宝书？犀牛书？博客？社群？github、segmentfault、v2ex、stackoverflow ...）
3、怎么才算一个好的前端开发者（沟通、设计、交互、特效、兼容、封装、造轮子 ...）
4、谈一谈你未来三五年的职业规划（资深WEB前端工程师？资深WEB架构师？转岗管理或其他？自己创业？...）
二、前端面试题（入门）
1、html5新特性。和html的区别有哪些?比如多了哪些新的标签?
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
1）绘画 canvas；
2）用于媒介回放的 video 和 audio 元素；
3）本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
4）sessionStorage 的数据在浏览器关闭后自动删除；
5）语意化更好的内容元素，比如 article、footer、header、nav、section；
6）表单控件，calendar、date、time、email、url、search；
7）新的技术webworker, websocket, Geolocation。
2、html中的区块元素和行内元素（也叫内联元素）简介与区别。
块级元素：块级大多为结构性标记，常见的有 div、h1~h6、table、form、p ...
1）总是从新的一行开始。2）高度、宽度都是可控的。3）宽度没有设置时，默认为100%。4）块级元素中可以包含块级元素和行内元素。
行内元素：行内大多为描述性标记，常见的有 label、input、img、br、a ...
1）和其他元素都在一行。2）高度、宽度以及内边距都是不可控的。3）宽高就是内容的高度，不可以改变。4）行内元素只能行内元素，不能包含块级元素。
3、css盒子模型简要介绍。
每个元素，都会形成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容)
4、css写法中 div p 与 div , p 与 div > p 分别代表什么意思？
div p ：选择（作用于）
元素。
div , p ：选择（作用于）所有
元素。
div > p ：选择（作用于）父元素为
元素。
5、css伪类是什么？如何合理利用？
常用的有 :hover、:active、:before、:after、:first-child、:last-child、:nth-child(n)
其中 :nth-child(n) 参数n可以是数字、关键词或公式。选择奇数位置的元素：:nth-child(odd)、选择偶数位置的元素：:nth-child(even)
6、css布局定位有哪些？
display 属性（文档流布局） + position 属性（定位布局） + float属性（浮动布局）
7、简单介绍一下js基本数据类型与引用数据类型，分别有哪几种？
基本数据类型：字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）
应用数据类型：对象（Object）、数组（Array）、函数（Function）、正则（RegExp）、日期（Date）...
原始类型（基本类型）：按值传递，可以操作保存在变量中实际的值。原始类型汇总中null和undefined比较特殊。
引用类型：按引用传值，引用类型的值是保存在内存中的对象。
* 与其他语言不同的是，JavaScript不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。所以引用类型的值是按引用访问的。
8、ajax请求简介
js怎么发送http请求？其中get请求和post请求的区别是什么？
9、简单介绍一下从输入URL到浏览器显示页面的过程
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
三、前端面试题（进阶）
1、HTTP状态码知道哪些？
最基本的常识：
200 – 服务器成功返回网页
404 – 请求的网页不存在
503 – 服务器超时
1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态码。
2xx（成功）表示成功处理了请求的状态码。
3xx（重定向）要完成请求，需要进一步操作。通常，这些状态码用来重定向。
4xx（请求错误）这些状态码表示请求可能出错，妨碍了服务器的处理。
5xx（服务器错误）这些状态码表示服务器在处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。
200（成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
304（未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
403（禁止）服务器拒绝请求。
404（未找到）服务器找不到请求的网页。例如，对于服务器上不存在的网页经常会返回此代码。
502（错误网关）服务器作为网关或代理，从上游服务器收到无效响应。
503（服务不可用）服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。
2、如何阻止H5页面Body的滑动
监听事件 event.preventDefault()
3、简单介绍一下vue生命周期
虽然说是简单，此处越详细越好。参考：Vue生命周期简介
4、webpack初始化项目，一般会生成哪些目录文件，分别是干什么用的 ？
node_modules 用来存放我们通过npm命令安装的软件。
package.json 文件记录该项目的元信息，以及一些依赖包信息。
5、跨域请求如何传递cookie
请求头部设置 withCredentials: true ，服务端响应设置 Access-Control-Allow-Credentials:true
6、前端可以做哪些清楚浏览器缓存的优化
变更资源文件名；浏览器清缓存前端html meta方法 no-cache 设置；ajax请求头设置
7、js如何判断一个object 对象为空
1、JSON.stringify(a) === '{}' 2、Object.keys(a).length === 0
8、JS中浅拷贝与深拷贝的区别是什么？如何实现深拷贝？
es6 扩展运算符 三个点 ...
9、你有哪些性能优化的方法
1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数。
3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
4） 当需要设置的样式很多时设置className而不是直接操作style。
5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
6） 避免使用CSS Expression（css表达式）又称Dynamic properties（动态属性）。
7） 图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。
三、笔试
1、题目一：
var x = '0';
console.log(typeof x);
var y = 1;
console.log(typeof y);
var a = undefined;
console.log(typeof a);
var b = null;
console.log(typeof b);
var c = new Object();
console.log(typeof c);
var d = [1, 2, 3];
console.log(typeof d);
var e = function () { }
console.log(typeof e);
var f = Symbol ()
console.log(typeof f);
请写出以上代码执行后的输出内容。
解答一：
var x = '0';
console.log(typeof x);//string
var y = 1;
console.log(typeof y);//number
var a = undefined;
console.log(typeof a);//undefined
var b = null;
console.log(typeof b);//object，（null是空对象引用/或者说指针）。
var c = new Object();
console.log(typeof c);//object
var d = [1, 2, 3];
console.log(typeof d);//object
var e = function () {}
console.log(typeof e);//function
var f = Symbol ()
console.log(typeof f);//symbol
2、题目二：
var objA = { data: { a: "hello", b: 123 } };
var objB = Object.assign({}, objA);
objB.data.a = "changed";
console.log(objA.data.a);
var objA = { a: "hello", b: 123 };
var objB = Object.assign({}, objA);
objB.a = "changed";
console.log(objA.a);
解答二：
var objA = { data: { a: "hello", b: 123 } };
var objB = Object.assign({}, objA);
objB.data.a = "changed";
console.log(objA.data.a); // "changed"
var objA = { a: "hello", b: 123 };
var objB = Object.assign({}, objA);
objB.a = "changed";
console.log(objA.a); // "hello"
注：Object.assign是ES6的新函数。Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是 Object.assign() 进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。对象结构为一层时，assign函数可以做到深拷贝。
3、题目三：
var a = [ {'a':1}, {'b':2}, {'c':3} ]
// todo:声明一个变量b用于深拷贝数组b
b[0].a = 0
console.log(a[0].a) // 输出 1
解答三：
// 方法1
var b = []
for (var i =0; i b[i] = {...a[i]} } // 方法2 var b = JSON.parse(JSON.stringify(a)) // 解读： // 数组与对象都属于引用数据类型，string类型为基本数据类型 // 通过赋值操作，引用数据类型仅拷贝指针，而基本数据类型可以按值传递 // 所以此处为避免层层遍历以扩展运算符（...)进行深拷贝的方式 // 我们可以先将引用类型转为基本类型，再转回引用类型 // 实现一个深度优先搜索算法（非递归） function dfs(tree, name) { // 请在这里实现 } var tree = { name: '中国', children: [{ name: '上海', children: [{ name: '黄埔区' },{ name: '徐汇区' },{ name: '松江区' }] },{ name: '浙江省', children: [{ name: '杭州市', code: 0571, },{ name: '湖州市', code: 0572, },{ name: '嘉兴市', code: 0573 },{ name: '宁波市', code: 0574 },{ name: '绍兴市', code: 0575 }] }] }; var node = dfs(tree, '杭州市'); console.log(node); // { name: '杭州市', code: 0571 } function dfs(tree, name) { if (tree.name === name) { return tree; } if (!tree.children) { return null; } for (var i = 0; i < tree.children.length; i++) { var rs = dfs(tree.children[i], name); if (rs) { return rs; } } return null; }4、题目四：
解答四：