初级班：

• dl, dt, dd三个标签浏览器默认margin值多少？是否有标签默认文字粗体？

dl标签：有默认margin（top,bottom且相同）值，没有默认padding值。
在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中：margin:12px 0px;
在IE6.0,7.0中：margin:19px 0px;
dd标签有默认margin-left：40px;(在所有上述浏览器中)。
拓展：需要注意的是ul、ol具有默认padding。
ol,ul标签：有默认margin-（top,bottom且相同）值，有默认padding-left值
在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中：margin:12px 0px;
在IE6.0,7.0中：margin:19px 0px;
默认padding-left值：在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中都是padding-left：40px;
在IE6.0,7.0中没有默认padding值，因为ol,ul标签的边框不包含序号。

中级班：

• line-height:150%和line-height:1.5的区别是？

他们两个的其实区别就在于继承的问题上。
150%是根据父元素的字体大小计算出行高，并且子元素依然沿用这个计算后的行高（1.5em 也是相同的计算方式）。
1.5则是根据子元素自己字体的大小去乘以1.5来计算行高。

1） 当line-height:xxx %时：
body{ font-size:14px; line-height:150%; }
h1{ font-size:26px; }
实际是：
body{ line-height:21px; / 14px150%=21px / }
h1{ line-height:21px; } / 继承父元素计算出来的line-height ,21px */
2 ） 当line-height:x.x 时：
body{ font-size:14px; line-height:1.5; }
h1{ font-size:26px; }
实际是：
body{ line-height:21px; / 14px1.5=21px / }
h1{ line-height:39px; / 26px1.5=39px / }

高级班：

• float为何会让外部容器高度塌陷？这是bug？
• vertical-align的表现为何在IE7, IE8, IE9下表现不尽相同？其中的渲染机制是？

1.原生JavaScript实现字符串长度截取

function cutstr(str, len) {

        var temp;
        var icount = 0;
        var patrn = /[^\x00-\xff]/;
        var strre = "";
        for (var i = 0; i < str.length; i++) {
            if (icount < len - 1) {
                temp = str.substr(i, 1);
                if (patrn.exec(temp) == null) {
                    icount = icount + 1
                } else {
                    icount = icount + 2
                }
                strre += temp
            } else {
                break
            }
        }
        return strre + "..."
    }

2.原生JavaScript获取域名主机

function getHost(url) {
        var host = "null";
        if(typeof url == "undefined"|| null == url) {
            url = window.location.href;
        }
        var regex = /^\w+\:\/\/([^\/]*).*/;
        var match = url.match(regex);
        if(typeof match != "undefined" && null != match) {
            host = match[1];
        }
        return host;
}

3.原生JavaScript元素显示的通用方法

function $(id) {
        return !id ? null : document.getElementById(id);
    }
    function display(id) {
        var obj = $(id);
        if(obj.style.visibility) {
            obj.style.visibility = obj.style.visibility == 'visible' ? 'hidden' : 'visible';
        } else {
            obj.style.display = obj.style.display == '' ? 'none' : '';
        }
    }

4.原生JavaScript实现checkbox全选与全不选

function checkAll() {
    var selectall = document.getElementById("selectall");
    var allbox = document.getElementsByName("allbox");
    if (selectall.checked) {
        for (var i = 0; i < allbox.length; i++) {
            allbox[i].checked = true;
        }
    } else {
        for (var i = 0; i < allbox.length; i++) {
            allbox[i].checked = false;
        }
    }
}

5.原生JavaScript完美判断是否为网址

function IsURL(strUrl) {
    var regular = /^\b(((https?|ftp):\/\/)?[-a-z0-9]+(\.[-a-z0-9]+)*\.(?:com|edu|gov|int|mil|net|org|biz|info|name|museum|asia|coop|aero|[a-z][a-z]|((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d))\b(\/[-a-z0-9_:\@&?=+,.!\/~%\$]*)?)$/i
    if (regular.test(strUrl)) {
        return true;
    }
    else {
        return false;
    }
}

6.原生JavaScript获得URL中GET参数值

// 用法：如果地址是 test.htm?t1=1&t2=2&t3=3, 那么能取得：GET["t1"], GET["t2"], GET["t3"]
function get_get(){ 
  querystr = window.location.href.split("?")
  if(querystr[1]){
    GETs = querystr[1].split("&")
    GET =new Array()
    for(i=0;i<GETs.length;i++){
      tmp_arr = GETs[i].split("=")
      key=tmp_arr[0]
      GET[key] = tmp_arr[1]
    }
  }
  return querystr[1];
}

7.原生JavaScript跨浏览器添加事件

function addEvt(oTarget,sEvtType,fnHandle){
    if(!oTarget){return;}
    if(oTarget.addEventListener){
        oTarget.addEventListener(sEvtType,fnHandle,false);
    }else if(oTarget.attachEvent){
        oTarget.attachEvent("on" + sEvtType,fnHandle);
    }else{
        oTarget["on" + sEvtType] = fnHandle;
    }
}

8.原生JavaScript实现返回顶部的通用方法

function backTop(btnId) {
    var btn = document.getElementById(btnId);
    var d = document.documentElement;
    var b = document.body;
    window.onscroll = set;
    btn.style.display = "none";
    btn.onclick = function() {
        btn.style.display = "none";
        window.onscroll = null;
        this.timer = setInterval(function() {
            d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
            b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
            if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);
        },
        10);
    };
    function set() {
        btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none"
    }
};
backTop('goTop');

9.原生JavaScript实现全选通用方法

function checkall(form, prefix, checkall) {
    var checkall = checkall ? checkall : 'chkall';
    for(var i = 0; i < form.elements.length; i++) {
        var e = form.elements[i];
        if(e.type=="checkbox"){
            e.checked = form.elements[checkall].checked;
        }
    }
}

10.原生JavaScript实现全部取消选择通用方法

function uncheckAll(form) {
    for (var i=0;i<form.elements.length;i++){
        var e = form.elements[i];
        if (e.name != 'chkall')
        e.checked=!e.checked;
    }
}

11.原生JavaScript获取单选按钮的值

function get_radio_value(field){
    if(field&&field.length){    
        for(var i=0;i<field.length;i++){        
            if(field[i].checked){            
                return field[i].value;                                
            }            
        }        
    }else {        
        return ;                
    }    
}

12.原生JavaScript获取复选框的值

function get_checkbox_value(field){    
    if(field&&field.length){    
        for(var i=0;i<field.length;i++){            
            if(field[i].checked && !field[i].disabled){
                return field[i].value;
            }
        }        
    }else {
        return;
    }            
}

13.原生JavaScript判断变量是否空值

/**
 * 判断变量是否空值
 * undefined, null, '', false, 0, [], {} 均返回true，否则返回false
 */
function empty(v){
    switch (typeof v){
        case 'undefined' : return true;
        case 'string'    : if(trim(v).length == 0) return true; break;
        case 'boolean'   : if(!v) return true; break;
        case 'number'    : if(0 === v) return true; break;
        case 'object'    : 
            if(null === v) return true;
            if(undefined !== v.length && v.length==0) return true;
            for(var k in v){return false;} return true;
            break;
    }
    return false;
}

github.com/Wscats/Good…

function Foo() {
    getName = function () { alert (1); };
    return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}
 
//请写出以下输出结果：
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

JavaScript如何一次性展示几万条数据

有一位同事跟大家说他在网上看到一道面试题：“如果后台传给前端几万条数据，前端怎么渲染到页面上？”，如何回答？ 于是办公室沸腾了， 同事们讨论开了， 你一言我一语说出自己的方案。 有的说直接循环遍历生成html插到页面上；有的说应该用分页来处理；还有的说这个面试官是个白痴， 哪有后台传几万条数据给前端这种情况的；我仔细思考了一下，先不论后端到底会不会白痴到传几万条数据给前端，假如真碰到这种情况，那么如果前端获取到数据以后， 直接将数据转换成html字符串，通过DOM操作插入到页面，势必导致页面运行出现卡顿， 为此我还特意写了一个 demo测试了一下， 代码如下

$.get("data.json", function (response) {
    //response里大概有13万条数据
    loadAll( response );
});

function loadAll(response) {
    var html = "";
    for (var i = 0; i < response.length; i++) {
        var item = response[i];
        html += "<li>title:" + item.title + " content:" + item.content + "</li>";
    }
    $("#content").html(html);
}

data.json中大概有13万条数据左右， 通过ajax获取数据后以最简单粗暴的方法展示数据，在chrome浏览器下， 刷新页面到数据显示，我心中默数， 整个过程大概花掉5秒钟左右的时间， 卡顿非常明显。 我大致观察了一下代码的运行时间，发现循环生成字符串这过程其实并不算太耗时， 性能瓶颈是在将html字符串插入到文档中这个过程上， 也就是 $("#content").html(html); 这句代码的执行， 毕竟有13万个li元素要被挺入到文档里面， 页面渲染速度缓慢也在情理之中。

既然一次渲染13万条数据会造成页面加载速度缓慢，那么我们可以不要一次性渲染这么多数据，而是分批次渲染， 比如一次10000条，分13次来完成， 这样或许会对页面的渲染速度有提升。 然而，如果这13次操作在同一个代码执行流程中运行，那似乎不但无法解决糟糕的页面卡顿问题，反而会将代码复杂化。 类似的问题在其它语言最佳的解决方案是使用多线程，JavaScript虽然没有多线程，但是setTimeout和setInterval两个函数却能起到和多线程差不多的效果。 因此，要解决这个问题， 其中的setTimeout便可以大显身手。 setTimeout函数的功能可以看作是在指定时间之后启动一个新的线程来完成任务。

$.get("data.json", function (response) {
    //response里大概有13万条数据
    loadAll( response );
});

function loadAll(response) {
    //将13万条数据分组， 每组500条，一共260组
    var groups = group(response);
    for (var i = 0; i < groups.length; i++) {
        //闭包， 保持i值的正确性
        window.setTimeout(function () {
            var group = groups[i];
            var index = i + 1;
            return function () {
                //分批渲染
                loadPart( group, index );
            }
        }(), 1);
    }
}

//数据分组函数（每组500条）
function group(data) {
    var result = [];
    var groupItem;
    for (var i = 0; i < data.length; i++) {
        if (i % 500 == 0) {
            groupItem != null && result.push(groupItem);
            groupItem = [];
        }
        groupItem.push(data[i]);
    }
    result.push(groupItem);
    return result;
}

var currIndex = 0;

//加载某一批数据的函数
function loadPart( group, index ) {
    var html = "";
    for (var i = 0; i < group.length; i++) {
        var item = group[i];
        html += "<li>title:" + item.title + index + " content:" + item.content + index + "</li>";
    }
    //保证顺序不错乱
    while (index - currIndex == 1) {
        $("#content").append(html);
        currIndex = index;
    }
}

以上代码大致的执行流程是

1. 用ajax获取到需要处理的数据， 共13万条
2. 将数组分组，每组500条，一共260组
3. 循环这260组数据，分别处理每一组数据， 利用setTimeout函数开启一个新的执行线程（异步），防止主线程因渲染大量数据导致阻塞。

loadPart函数中有这段代码

while (index - currIndex == 1) {
    $("#content").append(html);
    currIndex = index;
}

是为了保证不同的线程中最终插入html到文档中时顺序的一致性， 不至于同时执行的代码在插入html时互相篡位。

通过这种方式执行， 页面瞬间就刷出来了，不用丝毫等待时间。 从同步改为异步，虽然代码的整体资源消耗增加了， 但是页面却能瞬间响应， 而且， 前端的运行环境是用户的电脑，因此些许的性能损失带来的用户体验提升相对来说还是值得的。

虽然示例中提到的情况在现实环境中几乎不可能出现， 但是在我们平时的工作中总会有一些似是而非的场景出现， 利用里面的处理思路， 或许对我们解决问题会有一定的帮助。