关于编写性能高效的javascript事件的技术

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

　　如何能做出高效的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" id="btn" name="btn" onclick="alert('Click Me!')"/>