前端面试题

首先，推荐一个比较全的面试题网站 
地址： http://www.cnblogs.com/bigboyLin/p/5272902.html 
以下，是个人遇到的面试题 
20170327 
1、项目介绍 
2、你在项目中的职责 
3、h5会用吗？ 
4、行内元素和块级元素举几个例子？ 
行内元素：span,a,var ,em,input,img,img,textarea,var,em,strong,select, 
块级标签：div,p,h1-h3,ul,ol,dl,li,dd,dt,table,td,tr, 
5、link和@import的区别？ 
（1）link属于html标签，而@import是css提供的。 
（2）页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载。 
（3）import只在IE5以上才能识别，而link是html标签，无兼容问题。 
（4）link方式的央视权重高于@import的权重。 
6、选择框获得第几项，获得第几项的值，文本内容 
（1）js 
利用for循环

（2）jQuery 
7、数组怎么去重 
7.1 去重的方法 
（1）使用数组方法indexOf来判断

function sele(arr){
    var temp = [];
    for( var i = 0 ; i < arr.length ; i++ ){
        if( temp.indexOf( arr[ i ] ) == -1 ){
            temp.push( arr[ i ] );
        }
    }
    return temp;
}
var arr = ['aa', 'bb', 'cc', '', 1, 0, '1', 1, 'bb', null, undefined, null];
console.log(sele(arr));

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

2个缺点，一是效率问题，因为加上indexOf相当于是2重循环，二是indexOf的兼容性问题:IE8–不兼容。 
（2）使用数组方法indexOf第二种方法 IE8–不兼容

function sele( arr ) {
    var temp = [];
    for( var i = 0 ; i < arr.length ; i++ ){
        if( arr.indexOf( arr[ i ] ) == i ){
            temp.push( arr[ i ] );
        }
    }
    return temp;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

比方法（1）效率还要差 
（3）循环

function sele( arr ) {
    var temp = [];
    for( var i = 0 ; i < arr.length ; i++ ){
        for( var j = i + 1 ; j < arr.length ; j++ ){
            if( arr[ i ] === arr[ j ] ){
                j = ++i;
            }
        }
        temp.push( arr[ i ] );
    }
    return temp;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

(4)

function unique3(array)
{
    var result = [];
    var hash = {};
    for(var i=0; i<array.length; i++)
    {
        var key = (typeof array[i]) + array[i];
        if(!hash[key])
        {
            result.push(array[i]);
            hash[key] = true;
        }
    }
    return result;
}
var arr = ['aa', 'bb', 'cc', '', 1, 0, '1', 1, 'bb', null, undefined, null];
console.log(unique3(arr));

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

以上方法中之所以给key添加了类型前缀，是因为要区分’1’和1。

（5）使用es6中includes方法

function sele( arr ) {
    var temp = [];
    arr.forEach( ( v ) => {
        temp.includes( v ) || temp.push( v );
    } )
    return temp;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7

（6）es6的set

function unique4(array)
{
    return Array.from(new Set(array));
}
var arr = ['aa', 'bb', 'cc', '', 1, 0, '1', 1, 'bb', null, undefined, null];
console.log(unique4(arr));

• 1
• 2
• 3
• 4
• 5
• 6

兼容性问题。 
7.2 对上述方法进行速度比较

var testArray = [];
for(var i=0; i<500000; i++)
{
    testArray.push(parseInt(Math.random()*100));
}
function test(fn, name)
{
    console.time(name);
    fn(testArray);
    console.timeEnd(name);
}
test(unique1, '第1种实现');
test(unique2, '第2种实现');
test(unique3, '第3种实现');
test(unique4, '第4种实现');

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

8、ajax异步与同步的区别 
同步是阻塞模式，异步是非阻塞模式。 
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去； 
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

9、js的理解 
js是一种基于对象和事件驱动，并具有安全性的脚本语言。 
10、平时会遇到哪些浏览器兼容性问题？ 
（延伸的问题：你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?） 
IE6、7、8、FF、Opear、Safari、Chrome、Maxthon 
Trident：Windows 下的 IE 浏览器使用的内核代号。除 IE 外，众多的 IE Shell（如 Maxthon ）都使用这个内核。 
Gecko：Mozilla Firefox 浏览器使用的内核代号。 
Presto：Opera 浏览器使用的内核代号，这是目前公认网页浏览速度最快的浏览器内核。 
KHTML/WebCore： Konqueror/Safari 浏览器使用的内核代号。

IE: trident内核 
Firefox：gecko内核 
Safari：webkit内核 
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核 
Chrome：Blink(基于webkit，Google与Opera Software共同开发) 
经常遇到的浏览器兼容问题： 
（1）.在有的浏览器中，默认字体大小为12px,所以在设字体大小的时候，最小设为12px，如果在做的过程中，发现字体小于12，可直接作为图片使用 
（2）.a标签对里不能嵌套a标签对 
（3）.若给a标签内的内容样式加上样式，需要设置display:block;（在IE中如果设置宽高会自动变成块，在FF中则不会），但如果设置了float属性，就不需要设置display:block。 
（4）.ul，ol在FF默认情况下，有list-style-type样式和padding值，dl在IE和FF默认情况下，有padding值，所以应该事先声明ul,li,ol,dl,dd,dd{margin:0;padding:0}。 
（5）.作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应 
（6）.关于手形光标. cursor: pointer. 而hand 只适用于 IE. 
（7）.css布局中的居中问题:在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“margin-right: auto;margin-left: auto; ”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义margin-right: auto;margin-left: auto; 就可以了。 
（8）.浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; 

• 1

//这种情况之下IE会产生200px的距离，这时需要设置display:inline; 使浮动忽略} 
11、浏览器缓存的区别 
（等同于：请描述一下cookies，sessionStorage和localStorage的区别）？ 
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。 
web storage和cookie的区别 
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。 
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。