前端面试题

最近经理让我整理一份面试题，发现好多我也忘了，在整理的过程也是对这些东西巩固的过程，整理好了，放上来，以备不时之需

/**css (10道题目)**/
1.行内元素有哪些？块级元素有哪些？各自的特点是什么？CSS的盒模型？
    块级元素：div p h1 h2 h3 h4 form ul 等
    行内元素: a b br i span input select 等
    块状占一行，行内元素按照文档流挨着排
    Css盒模型:content[内容]，border ,margin，padding

2.简述display:inline、display:block、display:inline-block属性的作用
    display:inline--------把元素设置成行内
    display:block---------把元素设置成块状、
    display:inline-block -------把元素设置成块状显示的行内元素

3..CSS引入的方式有哪些? link和@import的区别是?
    内联 内嵌 外链 导入   
    区别 ：同时加载
               前者无兼容性，后者CSS2.1以下浏览器不支持
           Link 支持使用javascript改变样式，后者不可

4.写出几种IE6 BUG的解决方法
    1.双边距BUG float引起的          //使用display
    2.3像素问题 使用float引起的      //使用dislpay:inline -3px  
    3.超链接hover 点击后失效      //使用正确的书写顺序 link visited hover active
    4.IE z-index问题         //给父级添加position:relative
    5.Min-height 最小高度         //!Important 解决’
    6.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

5..描述css reset的作用和用途。
    Reset重置浏览器的css默认属性   
    浏览器的默认样式不同，然后重置，让他们统一    

6.解释css sprites，如何使用。
    Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

7.什么是语义化的HTML，语义化的好处？
    直观的认识标签    
        eg：     标题部分用<h1></h1>到<h6></h6>
    有利于搜索引擎的抓取

8.清除浮动的几种方式，各自的优缺点
    1.使用空标签清除浮动 clear:both（缺点：增加无意义的标签）
    2.使用overflow:auto（宽高当超出默认范围会溢出内容不会被显示,使用zoom:1用于兼容IE）
    3.是用afert伪元素清除浮动(用于非IE浏览器)

9.使一个层位居于父容器中间有几种办法？各是什么？
    1.负margin [css2]
        .parent{position:"relative";"400px";height:"400px";}
        .child｛position:"absolute";"200px";height:"200px";left:"50%";top:"50%";margin:"-100px 0 0 -100px";｝
    2.tranform [css3]
        利用css3的 transform:translate3d(100px,100px,0px )或者 translateX(100px) 和translateY(100px) 组合使用
    3.js 精确计算后添加style样式

10.两个相邻的元素都有margin:10px;属性，它们之间的距离是多少？
    10px    //两个相邻的元素margin值一样时，则重叠，不一样时，以margin值较大的为准



/**原生javascript （30道题目）**/
1.javascript的typeof返回哪些数据类型 或者说 javascript的基础类型都有什么？
    Object number function boolean underfind

2.简述一下BOM和DOM
    浏览器对象模型 (BOM)
    文档对象模型 (DOM)

3.var a=1; ++a; 和a++ 的区别
    ++a;    //先进行加1运算，再使用
    a++;    //先使用，在进行+1操作

//AJAX相关
4.请尽可能详尽的解释AJAX的工作原理，AJAX请求的数据类型有哪几种？
    1、创建ajax对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
    2、判断数据传输方式(GET/POST)
    3、打开链接 open()
    4、发送 send()
    5、当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行

回调函数
    
    请求的数据类型有：xml, json, script, html, text, jsonp    
    
5.HTTP协议的状态都有哪些（如200，302，404，500等状态，并进行描述）
    200：表示请求成功
    302：表示重定向
    404：表示访问错误
    500：服务器遇到错误，无法完成请求（服务器内部错误）

6.简述get和post方式的区别
    GET 请求可被缓存
    GET 请求保留在浏览器历史记录中
    GET 请求可被收藏为书签
    GET 请求不应在处理敏感数据时使用
    GET 请求有长度限制
    GET 请求只应当用于取回数据
    
    POST 请求不会被缓存
    POST 请求不会保留在浏览器历史记录中
    POST 不能被收藏为书签
    POST 请求对数据长度没有要求

//javascript事件
7.IE和标准下有哪些兼容性的写法
    Var ev = e || window.event
    document.documentElement.clientWidth || document.body.clientWidth
    Var target = e.srcElement||e.target

8.简述一下事件冒泡和事件捕获？怎么阻止事件冒泡和事件默认行为？
    事件冒泡：事件冒泡是从目标节点先开始出来，然后顺着目标节点的父节点，一级一级往上处理，直到道文档树根节点。
    事件捕捉：事件捕捉的处理流程是从文档树根节点，一直向下处理，直到目标节点才停止。
    
    阻止事件冒泡
    标准：event.stopPropagation()
    IE:   window.event.cancelBubble = true;
    
    阻止事件默认行为
    标准：event.preventDefault();
    IE:   window.event.returnValue = false;

9.DOM事件分为几个等级？怎么给一个对象 obj 添加一个事件？是否需要考虑到兼容性？如果要删除呢？
    两个级别：dom 0级 和 dom 2级 
    dom 0 级 <input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" >  
    dom 2 级 document.getElementById("myButton").onclick = function () {
    alert('thanks');
}
    
    需要考虑兼容性
    标准事件绑定 addEventListener(eventName[string],handler[fn],useCapture[boolean 一般为fase 从冒泡阶段对事件监听，

true：在事件捕获阶段添加回调函数])        obj.addEventListener("click", function(){alert(1)}, false);  
    IE事件绑定    attachEvent(on+eventName[string],handler[fn])
        obj.attachEvent("onclick", function(){alert(1)}); 
    
    标准事件移除  obj.removeEventListener(eventName,handler[fn],useCapture[boolean 一般为fase 从冒泡阶段对事件监听，

true：在事件捕获阶段添加回调函数]);
    IE事件移除    obj.detachEvent('on'+eventName,handler[fn]);

10.documen.write和 innerHTML的区别
    document.write只能重绘整个页面
    innerHTML可以重绘页面的一部分

11.简述下列返回结果 null == undefined NaN == null NaN == undefined NaN == NaN  (NaN 与任何值都不想等，包括NaN本身)
    null == undefined      //true
    NaN == null        //false
    NaN == undefined     //false
    NaN == NaN        //false

12.var undefined = "test" console.log(undefined) 输出结果是什么？
    var undefined = "test" 
    console.log(undefined)   // test  undefined 不是javascript的关键字

13.typeof undefined 和 typeof null 的结果是什么
    typeof undefined    //undefined
    typeof null         //object  null是javascript中的一个数据类型

//作用域相关
14.var s = "test"; s.len = 4; var t =s.len 输出t结果会是什么？
    var s = "test";        //声明一个对象并赋值
    s.len = 4;        //创建一个临时字符串并赋值
    var t = s.len;        //第二行执行后，s的len属性被销毁，t访问对象的一个不存在的属性结果是undefined

15.    var scope = "global";
    function checkScope(){
        var scope  = "local";
        return scope;
    }    
    调用 checkScope()函数返回值什么值？  //local 局部变量覆盖全局变量

16.    var scope = "global";
    function f(){
        console.log(scope);    //输出undefined，而不是global，
        var scope = "local";    //变量在这里赋值，但变量本身在函数体内任何地方均是有定义的
        console.log(scope);    //输出local
    }
    调用 f() 函数会两次分别输出什么？   //变量声明提前
    相当于以下代码
    var scope = "global";
    function f(){
        var scope;        // 声明但未赋值
        console.log(scope);    //输出一个未赋值的变量，结果是undefined
        scope = "local";    //给scope赋值
        console.log(scope);    //输出 local
    }


17.call和apply的区别？
    Object.call(this,obj1,obj2,obj3)    //参数列表
    Object.apply(this,arguments)        //数组
    
    /**这个可以不问，仅当解释**/
    apply：应用某一对象的一个方法，用另一个对象替换当前对象。
    call：调用一个对象的一个方法，以另一个对象替换当前对象。

//隐试类型转换
18.例举3种强制类型转换和2种隐式类型转换？
    强制（parseInt,parseFloat,number）
    隐式（== - ===）

19.说一下 == 和 === 的区别    
    前者会自动转换类型 且 只判断值是否相等
    后者不会 且 判断值和类型是都相等

20.var a = "1"+1,b=1+"1",c=1-"1",d=1-"1";  的值分别为为（）
    输出为："11"，"11"，0，0

//数组的相关函数
21.数组方法pop() push() unshift() shift()
    Push()尾部添加 pop()尾部删除
    Unshift()头部添加  shift()头部删除

22.slice()和splice() 的区别
    slice(start[起始],end[结束]):方法可从已有的数组中返回选定的元素
        （不改变原数组，返回子数组，参数可以为负数，代表从数组的末尾算起，-1：代表倒数第一个，-2：代表数组倒数第二

个元素）
    splice(index[数组索引],howmany[删除个数，0代表不删除],item1,.....,itemX[添加的元素]):
    方法向/从数组中添加/删除项目，然后返回被删除的项目（会直接对数组进行修改）

//字符串相关函数
23.说一下substring()和substr()的区别
    substring():提取字符串中两个指定的索引号之间的字符。
    substr():从起始索引号提取字符串中指定数目的字符。

24.split() join() 的区别
    前者是以指定字符切割成数组的形式（默认使用逗号“，”）
    后者是将数组转换成字符串以指定字符分割
    eg：split()
        var str="How are you"

        str.split(" ")
           //输出["How", "are", "you"]
        
    str.split("")        //输出
    ["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u"]
        
    str.split(" ",2)    //输出["How", "are"]
    eg：join()
        var str = ["a","b","c"]

        str.join(" ");        //输出
    "a b c"
        str.join("，");        //输出"a,b,c"

//Math相关函数
25.产生一个1到10的随机数
    Math.random()*10

26.Math.floor(),Math.ceil()的区别
    Math.ceil()：对数进行上舍入。
    eg：
        Math.floor(-5.9)  ==》-5  
        Math.floor(0.9)  ==》 1
    Math.floor()：对数进行下舍入 
    eg：
        Math.floor(-5.9)  ==》-6  
        Math.floor(0.9)  ==》 0

//日期类型操作
27.输出当前时间，并格式化为yyyy-MM-dd hh:hh:mm
    var now = new Date();
    var y = now.getFullYear();    //获得年份
        M = now.getMonth()+1;     //获得月份 0~11
        d = now.getDate();        //获得当前日期
        h = now.getHours();        //获得当前小时 24小时制，若要12小时制，则减去 12
        m = now.getMinutes()    //获得分钟
        s =    getSeconds();        //获得秒数
    console.log(y+"-"+M+"-"+d+" "+h+":"+m+":"+s);

//document 对象方法
28.有以下文档结构，请问如何获取表单的第一个input元素的值
    <div>
        <form name = "myForm">
            <input type="text" id="myName" name="myName" class="myName"  value="CoCo"/>
        </form>
    </div>
    var name;
    (1). name = document.getElementById('myName');
    (2). name = document.getElementsByTagName('input')[0];
    (3). name = document.getElementsByName('myName')[0];
    (4). name = document.myForm.children[0];
    (5). name = document.getElementsByTagName('form')[0].children[0];
    (6). name = $("#myName").val();       //使用jQury
    (7). name = $(".myName").val();        //使用jQury
    console.log(name.value);

29.有以下文档结构
    <ul id="myList">
        <li>Coffee</li>
        <li>Tea</li>
    </ul>
    （1）、在内容为Tea的li后面添加一个内容为Water的li
    var node=document.createElement("li"),
        textnode=document.createTextNode("Water"),
        list = document。getElementById("myList");
    node.appendChild(textnode);

    list.appendChild(node);

    （2）、如果在内容为Coffee的li前面添加呢？
    //insertBefore(newItem[要插入的节点],nodeIndex[可选参数，在那个节点之前插入，若为空则在末尾插入]) 

    list.insertBefore(node,list.childNodes[0]);

30.添加 删除 替换 插入到某个接点的方法
    obj.appendChidl()
    obj.innersetBefore
    obj.replaceChild
    obj.removeChild

/**js库相关题目**/
//jQuery相关
1.javascript的window.onload()方法和jQuery 的 $(document).ready()方法的区别
    1.执行时间
        window.onload() :必须等到页面内包括图片的所有元素加载完毕后才能执行
        $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 
    2.编写个数不同
        window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 
               $(document).ready()可以同时编写多个，并且都可以得到执行
    3.简化写法
        window.onload没有简化写法 
            $(document).ready(function(){})可以简写成$(function(){});

2.简述以下代码的作用
    $(".stu .name")        //选择所有类名为stu元素下面的所有类名为name的所有元素
    $(".stu,.name")        //选择所有类名为stu元素和 name的所有元素
    $(".stu > .name")    //选择所有类名为stu元素的直系子元素类名为name的所有元素

3.简述jQuery中 text()、html()、val()方法的作用
    text() - 设置或返回所选元素的文本内容
    html() - 设置或返回所选元素的内容（包括 HTML 标记）
    val() - 设置或返回表单字段的值

4.使用jQuery 的 animate()出现动画列队时如何保证在执行下一个动画前结束当前动画
    使用stop()方法        //停止当前动画     
    应用场景：
    当在滑动轮播图时，当点击很多次是，即使不再点击，但是动画仍列队仍然执行，所以需要停止当前动画

//zepto相关
1.zepto.js中tap() 和 jQuery 中clik()方法的区别
    click():会有200-300毫秒的延迟
    tap():  无延迟

//HTML5相关
1.HTML5 中新增了哪些特性？
    用于绘画的 canvas 元素
    用于媒介回放的 video 和 audio 元素
    对本地离线存储的更好的支持
    新的特殊内容元素，比如 article、footer、header、nav、section
    新的表单控件，比如 calendar、date、time、email、url、search

/**综合**/
1.你有哪些性能优化的方法？
  （1） 减少http请求次数：CSS Sprites（又称css精灵或者css雪碧图）, JS、CSS源码压缩、图片大小控制合适；CDN托管，data缓存 ，

图片服务器。
  （2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求

次数
  （3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
  （4） 当需要设置的样式很多时设置className而不是直接操作style。
  （5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
  （6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
  （7） 图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。

2.事件兼容写法
     /*调试*/
        addEventHandler(def,'click',preDefault);
        addEventHandler(def,'click',stopBubble);
        
        /*类库*/
        /*事件绑定*/
        function addEventHandler(obj,eventName,handler) {
            if (document.attachEvent) {
                obj.attachEvent('on'+eventName,handler);
            }else if (document.addEventListener) {
                obj.addEventListener(eventName,handler,false);
            }
        }
        /*事件移除*/
        function removeEventHandler(obj,eventName,handler) {
            if (document.detachEvent) {
                obj.detachEvent('on'+eventName,handler);
            }else if (document.removeEventListener) {
                obj.removeEventListener(eventName,handler,false);
            }            
        }
        /*获取事件对象*/
        function eventTarget(evt) {
            var evt = evt||window.event;
            var targetElement = evt.target||evt.srcElement;
            return targetElement;
        }
        /*阻止冒泡*/
        function stopBubble(evt) {
            var evt = evt||window.event;
            if (evt.stopPropagation) {
                evt.stopPropagation();
            }
            else {
                window.event.cancelBubble = true;
            }
        }
        /*阻止默认*/
        function preDefault(evt){
            var evt=event||window.event;
            if (evt&&evt.preventDefault) {
                evt.preventDefault();
            }
            else {
                window.event.returnValue = false;
            }
        }

当然再整理的过程难免会出披露，希望发现的朋友指出以便更正，也防止误人子弟！与君共勉！