1. 图片热区：
<img src="logo.jpg" usemap="#logo">
<map id="logo" name="logo">
<area shape="rect" coords="0,0,50,50" href="#">
</map>
</img>
2. SetTimeout：只执行一次
SetInterval：定时唤醒
其他用法：
A. SetTimeout会强制页面进行重绘；
B. 在javascript中，调用递归的次数最多为3000次，用SetTimeout可以破除这个限制；
3. HTML引擎和Javascript(ECMAScript)引擎工作原理小结：
当在HTML页面触发一个点击事件后，对DOM的修改都会被保存在绘制/缓冲队列中，当执行完成JAVASCRIPT方法后，HTML引擎会根据绘制/缓冲队列中对DOM的修改进行重绘。这也就是为什么在执行内容很长的JS脚本时页面会发生卡住或白屏的原因；
当经常对队列进行清空时，页面会出现不断闪烁的情况，称为丢帧。
什么情况下会出现页面重绘的效果呢，就是当页面进行元素的显示与隐藏，元素的位置，大小或浏览器的大小发生变化时，都会引起重绘；
如何减少重绘的发生呢？ 避免对同一个元素多次进行属性的单独操作，尽量将各种属性放在class中一次赋值；
4. Dom树和Dom呈现树：
Dom树：对页面的直接解析，Dom树中包括隐藏的对象，也未包含CSS样式和各种JS文件；
Dom呈现树：在Dom树的基础上，下载JS文件，结合各中CSS样式，并隐藏hidden对象所呈现出来的树形结构即Dom呈现树；
5. SPDY协议:一次连接中尽可能多的传输数据，减少客户端与服务器端的通信次数；
6. Prototype:
向对象添加属性和方法，具体示例如下(Object.prototype.hasOwnProperty())：
<html>
<head>
</head>
<body>
<script>
function Employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
} var bill = new Employee('Bill','Engineer',1988); Employee.prototype.salary=null; bill.salary=10000; alert(bill.salary); </script>
</body>
</html>
7. eval()
函数解析字符串，并执行其中的的 JavaScript 代码；
<html>
<head>
</head>
<body>
<script type="text/javascript"> eval("x=10;y=20;alert(x*y);") alert(eval("2+2")); var x=10
alert(eval(x+17)); </script> </body>
</html>
8. Javascript双向引用
备注：在以下的例子中，当每次完成在<body>标签中新加一个元素<div>后，divs.length的数量会马上发生变化，这种现象就称作双向引用：
<html>
<head>
<title>HTML5 Controller</title>
<script type="text/javascript">
function AddElementToBody() {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
alert('Before add <div> to body:'+divs.length.toString());
var dl = document.createElement("div");
dl.innerText = "HelloWorld!" + i.toString();
//var bd = document.getElementsByTagName("body").appendChild(dl); //Wrong usage!
document.body.appendChild(dl);
alert('Adding <div> to current page is successful!');
alert('After add <div> to body:' + divs.length.toString());
alert(document.body.innerHTML);
if (divs.length > 20)
{
break;
}
}
}
</script>
</head>
<body onload="AddElementToBody();">
<div>HelloWorld!</div>
</body>
</html>
9. 声明提前(变量在使用之前可以不用声明)
<html>
<head>
<title>HTML5 Controller</title>
<script type="text/javascript">
var HI = 'Hello';
var HAY = 'How are you?'; function WithVar() {
alert(HI);
var HI = 'World';//本来为全局变量，现在加上var 声明为局部变量，相当于对先前的全局变量的覆盖(由于JS的双向引用,此时的赋值才是真的赋值)
alert(HI);
} function WithoutVar() {
alert(HAY);
HAY = 'Fine,thank you!';//全局变量
alert(HAY);
} function LoadAll()
{
WithVar();
WithoutVar();
}
</script>
</head>
<body onload="LoadAll();">
<div>HelloWorld!</div>
</body>
</html>
10. 解决JS页面阻塞:defer Asyn='true'
11. 关于JS文件在HTML文件中的位置
通常情况下，我们将JS脚本及文件引用放在<head></head>部分。最近参加了公司的一次培训，让我更加清楚地认识了JS与HTML的执行逻辑。我们都知道HTML页面的内容顺序执行，当HTML页面引用JS文件时会对<head></head>部分引用的JS文件进行下载，在JS文件下载的过程中，有时会造成HTML内容的下载中止，即页面会出现空白。当JS文件下载完成后，HTML页面才会继续进行UI的展示。此外从另一方面来说，如果我们将JS代码放在HTML文件的<head></head>部分，在进行有些DOM对象进行操作时，页面元素还未进行呈现，所以会出现找不到对象的错误。所以我们应该将JS文件放在页面末尾即</body>之前进行引用。
12. Splice()和slice()用法
arrayObj.slice(start,end)：从start开始截取元素，直到end结束。end可选，如不填，则截取从start开始的所有元素；
arrayObj.splice(index,howmany,item1,.....,itemX)：方法向/从数组中添加/删除项目，然后返回被删除的项目（会对原数组进行修改）；
<html>
<head>
<script>
var CA=new Array('H','E','L','L','O','!');
var C11=CA.slice(3);
var C12=CA.slice(1,4);
//alert(C11);
//alert(C12); var C21=CA.splice(2,4);
var C22=CA.splice(0,2,1,2,3);
alert(C21);
alert(C22);
alert(CA);
</script>
</head>
</html>