20 articles in this category.
Server Side Rendering (SSR) is a very hot topic today. What’s with React Server Components bringing all these buzz words that “I just have to implement in my project”… Let’s see what’s all the fuss about by implementing our own SSR server for web components. At Vonage we have a public project called Developer Portal. […]
Here’s how we made our website load 97.5% faster by using service workers, how we ensure the users will get the newest version every time, and how you can do it too. Our website is more than 1 year old. It started from a few static pages and has grown to a fully-fledged documentation with […]
How can we profile and optimize our JavaScript code? How can we profile and optimize rendering in the browser? How does it all relate to the all-mighty Event Loop? This year I participated in ConfrontJS 2022. ConfrontJS is a conference for everything JavaScript based Warsaw. It is run by an amazing team who I am […]
The Array Nesting interview question might seem complex at first and very simple after you solve it. But sometimes, a deeper dive into it can expose some more performance optimizations that can be interesting. After this article, you’ll be able to amaze your interviewers with some new insights they didn’t think of! What is the […]
Google’s Material Web Components had a performance issue and I thought I could help. The results: 90% performance improvement in big lists removal. Here’s how I did it, and how you can duplicate it in your application. At Vonage, we are working on a unified UI library called Vivid. A core library we are using […]
On august 2020 I spoke at WarsawJS, explaining about the event loop and how it works. I hope you will enjoy this talk. If you prefer to read – here’s the blog post this talk is based on.
In order to solve performance issues, you must learn how to profile and monitor an application. How to do that using Google Chrome developer tools? How to start a recording Open the chrome browser with any website. Hit F12 OR right click on the screen and select “inspect element” In the dev tools screen that […]
In the former article, we saw how to measure the JS heap in the browser and a few use cases it can come in handy. I was asked how this can be done in a nodejs app as well. Let’s do something a bit more interesting – create a script that will measure the heap […]
Part of the tools frontend developers have in their arsenal is the performance API. Part of it is the memory object. It can be used for various causes – from debugging performance through experimenting to performance budget monitoring.
Force reflow (or Layout Reflow) is a major performance bottleneck. It happens when a measurement of the DOM happens after a DOM mutation. With this knowledge, I was able to improve performance of an app in my workplace by 75%. Read on to understand how. The browser is a wondrous thing. We give it JS, […]
The critical rendering path (CRP from now on) is also known as The Pixel Path. It’s actually what happens from the moment your javascript code runs, until the moment the pixels are shown on screen. We can also call it a “frame”. This is the flow of the CRP: The colors are purposefully as they […]
In my last article, I talked about the flyweight design pattern. I mostly talked about how it can save you (and your end user) bandwidth. I failed to mention the save on memory. If we continue the example from the aforementioned blog post, let’s measure the memory consumption. A short reminder – the client code […]
Your users expect a fast and smooth experience. Sometimes what stands in the way is how long it takes to download data. The flyweight design pattern is a possible solution to help reduce bandwidth in your app.
My talk (in Hebrew) at Javascript Israel about Optimization Patterns in Javascript is now online. Enjoy 🙂
https://youtu.be/gLj-p7gHwj8
How a followup chat with a meetup attendee helped me distill a javascript memory issue? Read more about memory allocation and garbage collection.
After the Object Pool article went online, I was asked this on Facebook: What I take from here is 2 fold: The one paragraph spent explaining about use cases might not be enough – we need an example that is somewhat like real life. From the article, it might seem that Object Pool is the […]
In a former article I’ve shown the consequences of memory allocation and garbage collection. Object pool is a simple design pattern that can be used in order to solve both problems.
Javascript developers usually don’t care much about memory management. The JS engine does most of the heavy lifting for us. In this post I’m going to demonstrate how important it is to understand JavaScript memory management. Let’s take a look at an example: The two functions – buildArray and buildArray2 do the same thing. They […]
My talk from CodeTalks 2019 is live. You can watch it here: In this talk I go over 3 design patterns I’ve used in production in order to enhance performance in Javascript: Dirty flag, data locality and Object pool. Some extra material about the subjects: 1. Dirty flag in cesium 2. Object pool example 3. […]