某家前端笔试题

刚刚做了某家装修公司前端笔试题。回来的路上和许尼玛说，这一次再不进面试轮，我吃键盘，以后再也不做线下笔试题了。线下前端笔试题太吃亏，说是前端题目，全是数据结构，算法，c++，java，计算机网络。 而且，自己的字确实不敢恭维啊。

回忆一下笔试题中一些没回答好的题目。
1：js内存泄露
今天终于明白了内存泄露的具体含义了，囧。。。
内存泄露：一块已经被分配的内存既不会被使用又不会被收回，直到浏览器进程结束为止。

1)：《javascript高级程序设计》里说到过，循环引用会导致内存泄露。

1
2
3
4
var a=document.getElementById("xx");
var b=document.getElementById("xxx");
a.r=b;
b.r=a;

标准EcmaScript能够正常回收a和b，但是IE浏览器下ab循环引用会导致内存泄露。

2)：IE浏览器下删除绑定事件响应的DOM节点
EcmaScript删除DOM节点后，节点绑定的事件也一并被删除。又是IE，DOM节点被删除后，节点绑定的事件操作没有及时删除导致事件操作内存泄露。

1
2
3
4
5
6
7
8
9
<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

手动解除事件绑定：

1
2
3
4
5
6
7
8
9
10
<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        btn.onclick = null;//解除事件
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

3)：闭包

4)：这个应该不算是内存泄露吧

1
2
3
4
a = {p: {x: 1}};
b = a.p;
delete a.p;
b.x //1

5)：其他内存泄露，看了下基本都是古老的IE浏览器造成的。珍爱生命，远离IE!!!
参考：博客园–js内存泄露几种情况
          IBM大发好！！！

2：如何实现页面通信
居然猜对了
html5：localStorage
html：session轮询

3：inline vs block？
inline：a em strong span。。。
block：div p session h1-h6.。。。
inline-block：
参考：html标签
   block，inline和inline-block概念和区别

4：session vs localStorage vs sessionStorage
在某家面试题中遇到过，没答上来，回来做了总结。这次笔试题中又不到了，只能说，装了个满分X
前端面试题

5：前端开发规范
AMD vs CMD（CommadJS ）

6：doctype申明的作用
<！DOCTYPE>写在html文档第一行,在html标签前面。这也就说明了doctype不是html标签一部分。因此也不难猜测doctype的作用是告诉浏览器以什么样的方式去解析html DOM文档。

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body
</body>
</html>

doctype有3种模式。
严格模式：strict
过渡模式：transitional
框架模式：frameset
strict模式最规范，transitional模式兼容性最好，frameset没怎么用到哎

7:有空总结一下浏览器事件响应机制

8:css选择器，css3新增选择器
参考w3c css选择器
总结如下选择器：
标签选择器（* div p…）
类选择器（.class）
id选贼器（#）
属性选择器([attrubute])
伪类选择器（：link； ：hover； ：visited； ：focus； ：active）
从w3c来看，css3新增的选择器有2种，属性选择器和伪类选择器。
其中，属性选择器增加了表达式运算；伪类选择器出现了更多日常可能用到的一些操作习惯。
但是，这些操作在jquery里，应该都已经实现过了。