Techniques for writing performant JavaScript events

How to make an efficient web front-end program is a question I unconsciously consider every time I do front-end development. A few years ago, the awesome front-end engineers at Yahoo published a book on improving web front-end performance, which caused a sensation in the entire web development technology community. The mysterious web front-end optimization problem became a common problem on the street, and web front-end optimization became Simple questions that both rookies and experts can answer. When the entire industry knows the shocking secret answer, then the existing optimization technology can no longer produce a qualitative leap in the website you develop. In order to make the website we develop perform better than others To make our website better, we need to think more deeply independently and reserve better skills.

　The event system in Javascript is the first breakthrough point that comes to my mind. Why is it a JavaScript event system? We all know that the web front-end includes three technologies: html, css and javascript. It is very clear how html and css are combined: style, class, id and html tags. There is not much to say about this, but how does javascript get into the middle of html and css? , how about integrating the three? Finally, I found that this entry point is the event system of JavaScript. No matter how long or complex the JavaScript code we write, it will eventually be reflected in HTML and CSS through the event system. So I was thinking that since the event system is the entry point for the integration of the three point, then there will inevitably be a large number of event operations in a page, especially in today's increasingly complex web pages. Without these events, our carefully written javascript code will only be stored in the database, and the hero will be useless. Since there will be a large number of event functions on the page, will there be any problems affecting efficiency if we write event functions according to our habits? The answer I have researched is that there is a real efficiency problem, and it is also a serious efficiency problem.

In order to explain my answer clearly, I need to explain the JavaScript event system in detail first.

　The event system is the entry point for the integration of javascript, html and css. This entry point is like the main function in java. All the magic starts from here. So how does the browser complete this entry? I have researched a total of 3 methods, they are:

Method: html event processing

HTML event processing is to write the event function directly in the html tag. Because this writing method is tightly coupled with the html tag, it is called html event handling. For example, the following code: