Performance Archives - Aurelio De Rosa blog

Event delegation in JavaScript

One of the most common tasks a web developer deals with is to add event listeners to the elements of a page. Event listeners are employed to perform one or more actions when a given event occurs on one or more elements.

For example, by using an event listener we could display a dialog when a button is clicked by a user. In this case, the developer is running a single action (showing the dialog) when a click event occurs on one element (the button). Another example is a pagination widget. The latter is made of many links that have to lead the user to a given page when clicked. Here, the developer is performing the same, single action on many elements. The final example I want to mention is to use an event listener with elements that don’t yet exist in the page but will. This happens when injecting elements in the web page after an Ajax request is performed.

In this article, I’ll discuss how you, as a web developer, can optimize the addition of event listeners in all these situations by employing a technique called event delegation.

From JavaScript developer to JavaScript engineer: find all celebrities in a set of people

In the first article of my series From JavaScript developer to JavaScript engineer titled From JavaScript developer to JavaScript engineer: Re-implementing ECMAScript 2015’s String.prototype.repeat() method I’ve discussed how computer science concepts can help in writing better and more elegant software. Specifically, I’ve demonstrated how to use appropriate algorithms and data structures, together with techniques like memoization, to re-implement the String.prototype.repeat() method so that it’s blazing fast.

In this second article of the series, I’ll discuss how important is reasoning about the problem we’re facing. To do that, I’ll analyze the problem of finding all celebrities in a set of people.

If you want to take a look at the final solution, you can either go to the section An efficient solution or browse my Interview questions repository on GitHub.

From JavaScript developer to JavaScript engineer: re-implementing ECMAScript 2015’s String.prototype.repeat() method

As developers, our work is to solve problems which often implies writing code. Some of the problems we face look really simple in nature, but their simplicity leads us to write sub-optimal solutions without even realizing it. JavaScript developers come from very different backgrounds, and assuming that everyone has the same base knowledge of computer science is, at least, misguided. However, we should strive to gain understanding of this field as computer science concepts can help in writing better and more elegant software.

In this article, the first of a series titled From JavaScript developer to JavaScript engineer, I’ll discuss how to re-implement ECMAScript 2015’s String.prototype.repeat() method. What this method does, repeating a string, is pretty simple and a basic implementation would be simple as well. But by using appropriate algorithms and data structures, we can heavily improve the performance of this method.

If you want to take a look at the final solution, you can either go to the section An efficient solution or browse my Interview questions repository on GitHub.

The power of simplicity in code

A few days ago I found an online test featuring six exercises on JavaScript. For fun, whishing to challenge myself with something tricky, I decided to take it. The test proved to be very simple, so it isn’t worth a discussion. It’s what happened next that inspired this article.

I was talking with a workmate about the test and he decided to take it despite my warning about its simplicity. We compared the solutions we wrote for two of the six exercises and we found out that they were quite different: his solutions were terse and clever, mine were long and extremely simple in their approach to the problem. These differences have generated an interesting discussion that touched several topics: readability, complexity, performance, and maintainability.

Starting from the analysis of the two exercises we compared and the solutions we wrote, in this article I’ll share my thoughts about the power of simplicity in code.

15 Tips to Improve Your jQuery Selectors

Who don’t know what jQuery is and how it can help in developing a web project. Based on the latest statistics, jQuery is used on ~60% of the Quantcast Top 100k websites. We use it constantly and sometimes we tend to think it’s almost magic, that jQuery is capable to understand what we want to achieve and optimize all for us. There is no need to say this is wrong. You need to be aware of what jQuery does and does not for you and optimize as much as you can to improve your website’s performance.

In this article, extracted from my book Instant jQuery Selectors, you’ll learn some useful tips and tricks to improve the performance of your website by simply selecting elements in the right way.