Like any kind of apps, JavaScript apps also have to be written well.
Otherwise, we run into all kinds of issues later on.
In this article, we’ll look at some best practices we should follow when writing JavaScript code.
Compress Built Files
We should compress built files with gzip, Brotli, or other compression methods so that users don’t have to download as much data.
The less code users have to download, the faster the loading time will be.
Limit Library Dependencies
We should limit the libraries that we use.
There’re smaller alternatives and we can remove the ones that are built into the JavaScript standard library.
Minify our Code
Before putting our code on production, we should minify them so that the size of the files are smaller.
There’re many tools to let us do this.
Frameworks have tools that use Webpack to minify files without doing any work.
There’re also other libraries like Parcel to do the same thing.
Add Post-Load Dependency Managers
Webpack also lets us manage our dependencies.
This include non-JavaScript files like CSS files and images.
They can be loaded as modules with Webpack for example.
They can also track JavaScript dependencies.
This way, nothing is loaded twice and avoid other issues.
Cache as Much as we Can
Caching reduce the number of requests that have to be made to get assets.
They’ll only be downloaded again when the cache expires.
This will speed up loading times.
We can also use content delivery networks to speed up delivery to users.
Mind our Event Handlers
Some event handlers like mousemove or resize run every time those actions are taken.
This means they’ll run many times in quick succession.
An event handler shouldn’t take more than 2 to 3 ms to run.
If it takes longer, then we need to optimize our code.
Replace click with mouseup
Mouseup fires before the click event provide a performance boost by ensuring no interactions are missed if users make multiple mouse clicks in quick succession.
Use Reference Types Responsibly
If we use reference types, then they can be passed around into different parts of the code.
They’re passed by reference into functions.
This can let us cut down on the number of DOM traversals needed.
Primitive values are always passed by value into functions so a copy is made everywhere.
Comparing references if always faster than comparing strings.
Favor Native Functions and Constructs
If something is available in the JavaScript standard library or available as a language feature, then we should use it.
This lets us reduce the number of dependencies that we use.
Prefer async and defer
We should use the async and defer attributes to load scripts asynchronously.
async load scripts asynchronously without regard to order.
defer load scripts asynchronously one after the one as listed in the code.
They can let us load other things while waiting for the scripts to load.
Animate with requestAnimationFrame
requestAnimationFrame fixes the rendering at 60 FPS.
Therefore, if our animation is running slow, we can use requestAnimationFrame to get them up to speed.
Conclusion
We can minify our code to speed them up.
Also, there’re ways to improve animation speed.
