前端面试题精选

1、电话面试开场白

一、你先简短地介绍一下本身

二、你是怎么学习前端的（红宝书？犀牛书？博客？社群？github、segmentfault、v2ex、stackoverflow ...）

三、怎么才算一个好的前端开发者（沟通、设计、交互、特效、兼容、封装、造轮子 ...）

四、谈一谈你将来三五年的职业规划（资深WEB前端工程师？资深WEB架构师？转岗管理或其余？本身创业？...）

 

2、前端面试题（入门）

一、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。

二、html中的区块元素和行内元素（也叫内联元素）简介与区别。

块级元素：块级大多为结构性标记，常见的有 div、h1~h六、table、form、p ...

1）老是重新的一行开始。2）高度、宽度都是可控的。3）宽度没有设置时，默认为100%。4）块级元素中能够包含块级元素和行内元素。

行内元素：行内大多为描述性标记，常见的有 label、input、img、br、a ...

1）和其余元素都在一行。2）高度、宽度以及内边距都是不可控的。3）宽高就是内容的高度，不能够改变。4）行内元素只能行内元素，不能包含块级元素。

三、css盒子模型简要介绍。

每一个元素，都会造成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容)

四、css写法中 div p 与 div , p 与 div > p 分别表明什么意思？

div p ：选择（做用于） <div> 元素内部的全部 <p> 元素。

div , p ：选择（做用于）全部 <div> 元素和全部 <p> 元素。

div > p ：选择（做用于）父元素为 <div> 元素的全部 <p> 元素。

五、css伪类是什么？如何合理利用？

经常使用的有 :hover、:active、:before、:after、:first-child、:last-child、:nth-child(n)

其中 :nth-child(n)  参数n能够是数字、关键词或公式。选择奇数位置的元素：:nth-child(odd)、选择偶数位置的元素：:nth-child(even)

六、css布局定位有哪些？

 display 属性（文档流布局） + position 属性（定位布局） + float属性（浮动布局）

七、简单介绍一下js基本数据类型与引用数据类型，分别有哪几种？

基本数据类型：字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）

应用数据类型：对象（Object）、数组（Array）、函数（Function）、正则（RegExp）、日期（Date）...

原始类型（基本类型）：按值传递，能够操做保存在变量中实际的值。原始类型汇总中null和undefined比较特殊。

引用类型：按引用传值，引用类型的值是保存在内存中的对象。

* 与其余语言不一样的是，JavaScript不容许直接访问内存中的位置，也就是说不能直接操做对象的内存空间。在操做对象时，其实是在操做对象的引用而不是实际的对象。因此引用类型的值是按引用访问的。

八、ajax请求简介

js怎么发送http请求？其中get请求和post请求的区别是什么？

九、简单介绍一下从输入URL到浏览器显示页面的过程

a. 域名解析

b. 发起TCP的3次握手

c. 创建TCP链接后发起http请求

d. 服务器端响应http请求，浏览器获得html代码

e. 浏览器解析html代码，并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

3、前端面试题（进阶）

一、HTTP状态码知道哪些？

最基本的常识：

200 – 服务器成功返回网页

404 – 请求的网页不存在

503 – 服务器超时

 

1xx（临时响应）表示临时响应并须要请求者继续执行操做的状态码。

2xx（成功）表示成功处理了请求的状态码。

3xx（重定向）要完成请求，须要进一步操做。一般，这些状态码用来重定向。

4xx（请求错误）这些状态码表示请求可能出错，妨碍了服务器的处理。

5xx（服务器错误）这些状态码表示服务器在处理请求时发生内部错误。这些错误多是服务器自己的错误，而不是请求出错。

 

200（成功）服务器已成功处理了请求。一般，这表示服务器提供了请求的网页。

304（未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。

403（禁止）服务器拒绝请求。

404（未找到）服务器找不到请求的网页。例如，对于服务器上不存在的网页常常会返回此代码。

502（错误网关）服务器做为网关或代理，从上游服务器收到无效响应。

503（服务不可用）服务器目前没法使用（因为超载或停机维护）。一般，这只是暂时状态。

二、如何阻止H5页面Body的滑动

监听事件 event.preventDefault() 

三、简单介绍一下vue生命周期

虽说是简单，此处越详细越好。参考：Vue生命周期简介

四、webpack初始化项目，通常会生成哪些目录文件，分别是干什么用的 ？

node_modules 用来存放咱们经过npm命令安装的软件。

package.json 文件记录该项目的元信息，以及一些依赖包信息。

五、跨域请求如何传递cookie

请求头部设置 withCredentials: true ，服务端响应设置  Access-Control-Allow-Credentials:true

六、前端能够作哪些清楚浏览器缓存的优化

变动资源文件名；浏览器清缓存前端html meta方法 no-cache 设置；ajax请求头设置

七、js如何判断一个object 对象为空

一、JSON.stringify(a) === '{}'  二、Object.keys(a).length === 0

八、JS中浅拷贝与深拷贝的区别是什么？如何实现深拷贝？

es6 扩展运算符 三个点 ... 

九、你有哪些性能优化的方法

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） 图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。

3、笔试

一、题目一：

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

二、题目二：

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函数能够作到深拷贝。

三、题目三：

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<a.length; 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;

}