2016.2.26 web前端面试回顾

面试了一周，敲定了工作。。。。感觉要学的还有很多。。。整理了一些面试时候当时不会或者没想起的笔试题和面试题

1.delete

(function(x){
    delete x;
    console.log(x)
})(6);
输出：
6

delete以前没用过，只知道是删除的意思，这次碰上音译还以为能删掉呢。。结果。。。这丫只能删除对象的属性，不能删除变量，也不能删除函数，而且这方法有返回值，返回false不能删除，返回true可以删除。

2.input的placeholder改变颜色的css属性

input:-moz-placeholder { color: #369; }
input:-webkit-input-placeholder { color:#369; }
input:-ms-input-placeholder { color:#369; }

3.一个div覆盖全屏

.div1{
        background-color: red;
        width: 100%;
        height: 100%;
        position: absolute;
    }
如果不定位，高就会为0；
如果定位了，不写宽度等于百分之百，宽度就会为0；

4.box-sizing

box-sizing属性可以为三个值之一：
content-box（default），border-box，padding-box。

content-box:border和padding不计算入width之内
padding-box:padding计算入width内
border-box:border和padding计算入width之内(低版本IE盒子)

5.变量声明提升

所有声明变量或声明函数都会被提升到当前函数的顶部。

6.sort()排序

var arr = [3,1,5,12,10];
console.log(arr.sort(function(a,b){
    return a-b
}))

输出[1,3,5,10,12]
//a-b从小到大，b-a从大到小

7.通用的事件监听函数（copy的）

var EventUtil = {
    /**
     * 添加事件监听
     * @param element html元素
     * @param type 事件类型 例如 click,load
     * @param handler 监听函数
     */
    addHandler : function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    /**
     * 移除事件监听
     * @param element html元素
     * @param type 事件类型 例如 click,load
     * @param handler 要移除的监听函数
     */
    removeHandler : function(element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    }
}

8.js文件加载优化（or延迟加载）(copy)

1.setTimeout
大家都懂的

2.defer加载

<script>标签的属性。  
当渲染引擎遇到script的时候，如果script引用的是外部资源，则会暂时挂起，并进行加载。
渲染引擎继续解析下面的HTML文档，解析完时，则会执行script里面的脚本。

3.async加载

async是H5新定义的一个script 属性。 他是另外一种js的加载模式。

渲染引擎解析文件，如果遇到script(with async)

继续解析剩下的文件，同时并行加载script的外部资源

当script加载完成之后，则浏览器暂停解析文档，

将权限交给JS引擎，指定加载的脚本。

执行完后，则恢复浏览器解析脚本

可以看出async也可以解决 阻塞加载 这个问题。不过，async执行的时候是异步执行，造成的是，执行文件的顺序不一致。即:

<scriptsrc="outside1.js"async></script>
<scriptsrc="outside2.js"async></script>

这时，谁先加载完，就先执行谁。所以，一般依赖文件就不应该使用async而应该使用defer.

defer的兼容性比较差，为IE9+,不过一般是在移动端使用，也就不存在这个problem了。

4.async & defer – 不同之处

浏览器对标记有async属性或defer属性的scripts会立即加载并解析，同时也会支持依赖于这个脚本进行初始化的onload事件。

async属性和defer属性的不同之处在于何时执行这个脚本。

标注有async属性的Script会在下载完成后即可执行，不需要等待window的load事件。

这意味着标记有async属性的脚本并不一定会按在页面中嵌入的顺序执行。

而标记有defer属性的脚本却一定会按它们在页面上的顺序依次执行。