如何能做出高效的web前端程序是我每次做前端开发都会不自觉去考虑的问题。几年前雅虎里牛逼的前端工程师们出了一本关于提升web前端性能的书籍，轰动了整个web开发技术界，让神秘的web前端优化问题成为了大街的白菜，web前端优化变成了菜鸟和大牛都能回答的简单问题，当整个业界都知道了惊天秘密的答案，那么现有的优化技术已经不能对你开发的网站产生的质的飞越，为了让我们开发的网站性能比别人的网站更加优秀，我们需要更加深入的独立思考，储备更加优秀的技能。
Javascript里的事件系统是我想到的第一个突破点。为什么会是javascript的事件系统呢？我们都知道web前端包含三个技术：html、css和javascript，html和css如何结合真是一目了然：style、class、id以及html标签，这个没啥好讲的，但是javascript是如何切入到html和css中间，让三者融合呢？最后我发现这个切入点就是javascript的事件系统，不管我们写多长多复杂的javascript代码，最终都是通过事件系统体现在html和css上，因此我就在想既然事件系统是三者融合的切入点，那么一个页面里，特别是当今越来越复杂的网页里必然会有大量事件操作，没有这些事件我们精心编写的javascript代码只有刀枪入库，英雄无用武之地了。既然页面会存在大量事件函数，那么我们按习惯写事件函数，会存在影响效率的问题吗？我研究下来的答案是真有效率问题，而且还是严重的效率问题。
为了说清楚我的答案，我要先详细讲解下javascript的事件系统。
事件系统是javascript和html以及css融合的切入点，这个切人点好比java里的main函数，一切神奇都是由这里开始，那么浏览器是如何完成这种切入呢？我研究下来一共有3种方式，它们分别是：
方式一：html事件处理
html事件处理就是将事件函数直接写在html标签里，因为这种写法和html标签紧耦合，所以称为html事件处理。例如下面代码：
复制代码 代码如下:
<input type="button"/>
如果click事件函数复杂了，这么写代码肯定会带来不便，因此我们常常把函数写在外部，onclick直接调用函数名，例如：
复制代码 代码如下:
<input type="button"/>
function btnClk(){
alert("click me!");
}
上面这个写法是一种很美的写法，所以时下还是很多人会不自觉的使用它，但是也许很多人不知道，后一种写法其实没有前一种写法健壮，这个也是我前不久在研究非阻塞加载脚本技术时候碰到的问题，因为根据前端优化的原则，javascript代码往往是位于页面的底部，当页面有被脚本阻塞时候，html标签里引用的函数可能还没执行到，这个时候我们点击页面按钮，结果会报出“XXX函数未定义的错误”，在javascript里这样的错误是会被try，catch所捕获，因此为了让代码更加健壮，我们会有如下的改写：
复制代码 代码如下:
<input type="button"/>
看到上面代码岂是一个恶心能描述的。
方式二：DOM0级事件处理
DOM0级事件处理是当今所有浏览器都支持的事件处理，不存在任何兼容性问题，看到这样一句话都会让每个做web前端的人们激动不已。DOM0事件处理的规则是：每个DOM元素都有自己的事件处理属性，该属性可以赋值一个函数，例如下面的代码：
复制代码 代码如下:
var btnDOM = document.getElementById("btn");
btnDOM.onclick = function(){
alert("click me!");
}
DOM0级事件处理的事件属性都是采用“on+事件名称”的方式定义，整个属性都是小写字母。我们知道DOM元素在javascript代码里就是一个javascript对象，因此从javascript对象角度理解DOM0级事件处理就非常容易，例如下面代码：
复制代码 代码如下:
btnDOM.onclick = null；
那么按钮的点击事件被取消了。
再看下面的代码：
复制代码 代码如下:
btnDOM.onclick = function(){
alert("click me!");
}
btnDOM.onclick = function(){
alert("click me1111!");
}
后面一个函数会将第一个函数覆盖。
方式三：DOM2事件处理和IE事件处理
DOM2事件处理是标准化的事件处理方案，但是IE浏览器自己搞了一套，功能和DOM2事件处理相似，但是代码写起来就不太一样了。
在讲解方式三之前，我必须要补充一些概念，否则是无法讲清楚方式三的内涵。
第一个概念是：事件流