一直以来都有写点什么东西的想法，但又整天犹犹豫豫的，一会觉得准备不够充分，写的内容没什么质量，一会又觉得没什么内容可写的，以至于一拖再拖。万事开头难，难着难着就没有下面了，以此先开个头，记录自己的成长历程也是不错的，或许顺便还能帮上一些人呢。

分享个刚踏出校门的菜鸟所整理的前端面试题，当初被问到一时答不出来的问题，不会很详细和深入，对面试还是有点用的，仅供参考。

• 索引

• 1.事件冒泡、事件捕获
• 2.js的数据类型和判断方法
• 3.js中的六种假值
• 4.js添加、删除一个节点
• 5.js获取日期(#l5)
• 6.正则
• 7.eval的用法
• 8.闭包
• 9.获取元素最终CSS样式的方法
• 10.普通函数和构造函数的区别
• 11.浏览器的兼容
• 12.数组去重
• 13.sessionStorage 、localStorage 和 cookie 之间的区别
• 14.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
• 15.页面导入样式时，使用link和@import有什么区别？
• 16.对浏览器内核的理解
• 17.常见的浏览器内核有哪些？
• 18.HTML5新特性
• 19.如何处理HTML5新标签的浏览器兼容问题
• 20.简述你对语义化的理解
• 21.Form表单中method=post/get两种数据传输的方式的区别
• 22.回调函数和普通函数的区别
• 23.web页面性能优化
• 24.JSON和JSONP的区别
• 25.call 和 apply 的区别
• 26.transform的属性
• 27.css3的动画
• 28.js不同浏览器兼容问题
• 29.ios-安卓兼容问题
• 30.es6（es2015）常用语法

1.事件冒泡、事件捕获

1）冒泡型事件：事件从事件目标开始，往上冒泡直到页面的最上一级标签（document）。

2）捕获型事件：事件从最上一级标签（document）开始往下查找，直到捕获到事件目标。

3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

W3C标准浏览器用addEventListener(event,fn,useCapture)方法添加事件；基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡(false)时执行。

不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置。

E的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

事件的传播是可以阻止的：

在W3c中，使用stopPropagation（）方法

在IE下设置cancelBubble = true；

2.js的数据类型和判断方法

1）js中有5种数据类型：

Undefined 、 Null 、 Boolean 、 Number 和 String；

还有一种复杂的数据类型Object。

2）数据类型判断

// typeof，判断数组时是Object；// instanceof，判断已知对象类型的方法
alert(c instanceof Array) // ---------------> trueObject.prototype.toString.call()
alert(Object.prototype.toString.call(c) === ‘[object Array]’) //-------> true;

3.js中的六种假值

false 、 null 、 undefined 、 0 、 '' (空字符串) 、 NaN；

除了这6个外，其它均为“真” ，包括对象、数组、正则、函数等。注意 '0'、'null'、'false'、{}、[]也都是真值。

4.js添加、删除一个节点

<script>
window.onload=function(){//----------------------添加节点var boxObj = document.getElementById("box");var newNode = document.createElement("h1");var txtNode = document.createTextNode("h1内容");newNode.appendChild(txtNode);boxObj.appendChild(newNode);//----------------------删除节点var oldNode = document.getElementsByTagName("p")[0];boxObj.removeChild(oldNode);
}
</script>

5.js获取日期

// 月份和星期需要加1。var t=new Date();
t.getFullYear()//年份
t.getMonth()//月份
t.getDate()//一个月的当天
t.getDay()//星期
t.getHours()//小时
t.getMinutes()//分钟
t.getSecounds()//秒
t.getTime()//返回1970年1月1日至今的毫秒数
t.parse("2017/1/1/ 00:00:00")//返回1970年1月1日到指定日期的毫秒数
t.toLocaleString()//完整日期时间

6.正则

// /^[ab]{2,6}$/i
// 方括号是只能在ab中选一个；
// 大括号是只能出现2-6次；
// i是忽略大小写。// \d任意数字；
// \D非数字；
// \w[A-Z a-z _ 0-9]；

7.eval的用法？

1）eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
2）该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。

var str="alert('"+"ok"+"');";
eval(str);

8.闭包

一、闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。
闭包有三个特性：
1.函数嵌套函数
2.函数内部可以引用外部父函数的参数和变量
3.参数和变量不会被垃圾回收机制回收

二、闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在A函数内创建B函数，通过B函数访问A函数的局部变量

三、使用闭包有一个优点，也是它的缺点，就是可以把局部变量驻留在内存中，可以避免使用全局变量。全局变量在每个模块都可调用，这势必将是灾难性的。
所以推荐使用私有的，封装的局部变量。

四、一般函数执行完毕后，局部活动对象就被销毁，，内存中仅仅保存全局作用域。但闭包的情况不同！

五、那么使用闭包有什么好处呢？使用闭包的好处是：
1.希望一个变量长期驻扎在内存中
2.避免全局变量的污染
3.私有成员的存在

9.获取元素最终CSS样式的方法：

1、obj.style.attr :获取内部样式。 （attr代表CSS样式属性）

2、obj.currentStyle[attr] : 兼容IE，获取元素最终样式（内部、外部样式最后的效果），只读

3、window.getComputedStyle(obj , null)[attr]; 兼容FF，chrome,safiri，只读

// 测试兼容性alert(cont.currentStyle); //在谷歌中输出“undefined”，在IE中输出“[object CSSCurrentStyleDeclaration]”;// 示例var cont=document.getElementById("cont");// alert(cont.currentStyle);if (cont.currentStyle){alert("height:"+cont.currentStyle["height"]);}else{alert("height:"+getComputedStyle(cont,null)["height"]}

10.普通函数和构造函数的区别 ：

普通函数与构造函数相比有四个明显特点：
1.不需要用new关键字调用
2.可以用return语句返回值
3.函数内部不建议使用this关键字
4.函数命名以驼峰方式，首字母小写

11.浏览器的兼容

1）margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

2）文本在Div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高：line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。

12.数组去重

//第一种 删除后面重复元素function removeRepeat1(a){for(var i=0;i<a.length;i++){for(var j=i+1;j<a.length;j++){if(a[i]===a[j]){a.splice(j,1);j--; //否则若是多个一样的数字连在一起则只能去掉一个}}} return a.sort(function(a,b){return a-b});
}
console.log(removeRepeat1(arr));//第二种 相互比较元素，碰到相同的则跳出循环function removeRepeat(a) {var b = [], n = a.length;for (var i = 0; i < n; i++){for (var j = i+1; j < n; j++){if (arr[i] === arr[j]){j=false;break;}}if(j){b.push(a[i]);}}return b.sort(function(a,b){return a-b});
}console.log(removeRepeat(arr));

13.sessionStorage 、localStorage 和 cookie 之间的区别

共同点：

都是保存在浏览器端，且同源的。

区别：

1）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

2）存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

3）数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

4）作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

14.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

（1）行内元素有：a b span img input select strong（强调的语气）

（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）常见的空元素(没有内容的HTML内容被称为空元素)：

<br> <hr> <img> <input> <link> <meta>

15.页面导入样式时，使用link和@import有什么区别？

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

16.对浏览器内核的理解

主要分成两部分：
渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：

负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：

解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

17.常见的浏览器内核有哪些？

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]

Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

18.HTML5新特性

主要是关于图像，位置，存储，多任务等功能的增加。

1 绘画 canvas;

2 用于媒介回放的 video 和 audio 元素;

3 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;

4 sessionStorage 的数据在浏览器关闭后自动删除;

5 语意化更好的内容元素，比如 article、footer、header、nav、section;

6 表单控件，calendar、date、time、email、url、search;

7 新的技术webworker, websockt, Geolocation;

19.如何处理HTML5新标签的浏览器兼容问题

IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式。

当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

20.简述你对语义化的理解

让页面的内容结构化，结构更清晰，便于浏览器、搜索引擎解析；

便于看代码的人将网站分块，能更好的读代码和维护。

21.Form表单中method=post/get两种数据传输的方式的区别

一、Form提供了两种数据传输的方式——get和post， get是默认方法;

二、传输方式不同：

（1）Get 方法通过 URL 请求来传递用户的数据，将表单内各字段名称与其内容，以成对的字符串连接，置于 action 属性所指程序的 url 后，如http://www.mdm.com/test.asp?name=asd&password=sad，数据都会直接显示在 url 上，就像用户点击一个链接一样；

（2）Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。?

三、安全性不同：

（1）Get是不安全的，因为在传输过程，数据被放在请求的URL中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。

（2）Post的所有操作对用户来说都是不可见的。?

四、传输数据长度不同：

（1）Get传输的数据量小，这主要是因为受URL长度限制；

（2）而Post可以传输大量的数据，所以在上传文件只能使用Post

五、支持的字符集不同：
（1）Get限制Form表单的数据集的值必须为ASCII字符
（2）而Post支持整个ISO10646字符集。

22.回调函数和普通函数的区别

普通函数，被其他函数调用时，是在调用者内部直接写函数名调
回调函数，通常是作为参数传递给调用者，调用者并不知道自己调用的到底是什么
另外有一点，回调函数大多用于多线程的情况

function show() {alert("回调");
}
function main(num,callback){alert(num);callback();
}
main(8,show);

23.web页面性能优化

一、减少HTTP请求：

这个是由于浏览器对同一个host有并行下载的限制,http请求越多,总体下载速度越慢

（1）使用CSS Sprites

（2）合并JS和CSS文件
二、CSS、JS方面：

1） 一般情况下建议css和js采用外联式。

2）将CSS放在顶部:?能加快页面内容显示,并且能避免页面产生白屏

3）将JS放在底部 ： JS会阻塞对其后面内容的呈现

4） 精简JS和CSS文件 ：减少重复性代码，代码重复利用，在这里显得特别重要。要把你的css规划好，尽量的采用缩写，这样可以减少css文件的大小，那么对css做相应的规划也可以减少css的个数，减少http请求数，js同理。

5）移除重复的脚本

三、背景图片数量及大小的优化

1）内容图片要优化，减少文件大小。

2）背景图片：

（1）图片精灵 css sprite ，减少图片数量，减少HTTP请求。

（2）png8的格式会相对比gif小

四、可以模仿淘宝，使用CDN,图片,jS,css互相之间都使用了不同的域名.单是图片服务器,下面又使用了很多不同的服务器,比如img01.taobaocdn.com等等

24.JSON和JSONP的区别

1）JSON：是一种轻量级的数据交换格式，可以在浏览器和服务器之间交换信息。

2）JSONP(JSON With Padding)，就是打包在函数调用中的的JSON（或者包裹的JSON），用来实现跨域请求。

3）JSON是一种数据格式，JSONP是一种数据调用方式。

25.call 和 apply 的区别

1）在js中call和apply它们的作用都是将函数绑定到另外一个对象上去运行，两者仅在定义参数方式有所区别

2) apply和call的用法只有一个地方不一样，除此之外，其他地方基本一模一样

a.call(b,arg1,arg2…)apply(b,[arg1,arg2]) //apply只有2个参数，它将call的参数（arg1,arg2…）放在一个数组中作为apply的第二参数

26.transform的属性

rotate（0deg）顺时针旋转0度
skew（x，y）变形，不旋转 skewX（deg） skewY（deg）
scale（x，y）缩放
translate（x，y）位移

transf-origin 改变原点：

top（50%，0） right（100%，50%）
bottom（50%，100%） left（0，,50%）

27.css3的动画

transition-property：all所有要运动的属性名
-duration：2s 过渡时间
-timing-function：ease/linear指定过度函数
-delay：延迟时间

关键帧
@Keyframes a{
0%{}
100%{}}

animation：a 2s；（a为上面的函数名）
animation-iteration-count：infinite（无限循环）循环次数

28.js不同浏览器兼容问题

七、input.type属性问题

问题说明：IE下 input.type 属性为只读；但是Firefox下 input.type 属性为读写。
解决办法：不修改 input.type 属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。

八、window.event问题

问题说明：window.event 只能在IE下运行，而不能在Firefox下运行，这是因为Firefox的event只能在事件发生的现场使用。
解决方法：在事件发生的函数上加上event参数，在函数体内(假设形参为evt)使用 var myEvent = evt?evt:(window.event?window.event:null)
示例：

<input type="button" onclick="doSomething(event)"/>
<script language="javascript">
function doSomething(evt) { var myEvent = evt?evt:(window.event?window.event:null) ...
}

九、event.x与event.y问题

问题说明：IE下，even对象有x、y属性，但是没有pageX、pageY属性；Firefox下，even对象有pageX、pageY属性，但是没有x、y属性。
解决方法：var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;
如果考虑第8条问题，就改用myEvent代替event即可。

十七、innerText的问题.

问题说明：innerText在IE中能正常工作，但是innerText在FireFox中却不行。
解决方法：在非IE浏览器中使用textContent代替innerText。

if(navigator.appName.indexOf("Explorer") >-1){ document.getElementById('element').innerText = "my text";
} else{ document.getElementById('element').textContent = ";my text";
}
// [注] innerHTML 同时被ie、firefox等浏览器支持，其他的，如outerHTML等只被ie支持，最好不用。

29.ios-安卓兼容问题

1）虚拟键盘引起的兼容问题。
ios虚拟键盘悬浮到浏览器上，盖住输入框；安卓会把浏览器窗口顶起，浏览器高度变小

2）上下拉动滚动条时卡顿、慢
body {-webkit-overflow-scrolling:
touch; overflow-scrolling: touch;}

Android3+和iOS5+支持CSS3的新属性为overflow-scrolling

3）iphone及ipad下输入框默认内阴影
Element{
-webkit-appearance:none;
}

4）active兼容处理 即 伪类 :active 失效

// 方法一：body添加ontouchstart
<body ontouchstart="">// 方法二：js给 document 绑定 touchstart 或 touchend 事件
<style>
a {color:#000;
}
a:active {color:#fff;
}
</style>
<a herf=foo >bar</a>
<script>document.addEventListener('touchstart',function(){},false);
</script>

30.es6（es2015）常用语法

1）变量声明const和let
let表示变量、const表示常量。let和const都是块级作用域。（ {}大括号内的代码块即为let 和 const的作用域。）

2）函数默认参数

function action(num = 200) {console.log(num)
}
action(0) // 0
action() //200
action(300) //300

3）箭头函数
不需要 function 关键字来创建函数
省略 return 关键字
继承当前上下文的 this 关键字
ps：当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return

4）对象简写
ES6通过省略冒号与 function 关键字，将这个语法变得更简洁
`const people = { name: 'lux', getName () { console.log(this.name) } }

5）解构

// ES5我们提取对象中的信息形式如下：const people = {name: 'lux',age: 20
}
const name = people.name
const age = people.age
console.log(name + ' --- ' + age)// 在ES6，解构能让我们从对象或者数组里取出数据存为变量：//对象const people = {name: 'lux',age: 20
}
const { name, age } = people
console.log(`${name} --- ${age}`)
//数组
const color = ['red', 'blue']
const [first, second] = color
console.log(first) //'red'
console.log(second) //'blue'

6）展开运算符（...）
组装对象或者数组

//数组
const color = ['red', 'yellow']
const colorful = [...color, 'green', 'pink']
console.log(colorful) //[red, yellow, green, pink]
//对象
const alp = { fist: 'a', second: 'b'}const alphabets = { ...alp, third: 'c' }console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
}

7） Promise
说白了就是用同步的方式去写异步代码。

fetch('/api/todos')
.then(res => res.json())
.then(data => ({ data }))
.catch(err => ({ err }));

面试题：

setTimeout(function() {console.log(1)}, 0);new Promise(function executor(resolve) {console.log(2);for( var i=0 ; i<10000 ; i++ ) {i == 9999 && resolve();}console.log(3);}).then(function() {console.log(4);});console.log(5);
// 顺序：2 3 5 4 undefined（resolve()） 1