菜鸡前端面试题整理日记

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

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

索引
- 1.事件冒泡、事件捕获
- 2.js的数据类型和判断方法
- 3.js中的六种假值
- 4.js添加、删除一个节点
- 5.js获取日期(#l5)
- 6.正则(#l6)
- 7.eval的用法(#l7)
- 8.闭包(#l8)
- 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) // ---------------> true

Object.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));

共同点：

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

区别：

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