Posted on Oct 18 If your app feels more like a lumbering tortoise than a sprightly hare, it might be time to look for some pesky bad habits in your Code. Let’s dive into 10 of these culprits that can make your JavaScript applications drag their feet.Example: You've got a main.js file that's as long as a Tolstoy novel.Fix: Use tools like UglifyJS or Terser to minify your code. They'll squeeze out all the unnecessary bits and give you a sleeker, faster-loading file.Example: var everythingIsGlobal = "Why?!";Fix: Not only can global variables lead to conflicts and potential bugs, but they can also increase memory consumption. Stick to local variables and closures.Example: Every time a user visits, you're fetching the same old data from your server.Fix: Use service workers, local storage, or even simple variable caching to store data that doesn’t change often.Example: You’re using an array to manage a list of unique items instead of a Set.Fix: Know your data structures! Using the right one for the job (like a Set for unique values) can speed things up immensely.Example: You're adding 1000 rows to a table one by one.Fix: Batch your DOM changes, or better yet, use a virtual DOM solution like React to minimize direct DOM manipulation.Example: Your 'mousemove' event is firing a bazillion times a second.Fix: Use debounce or throttle techniques to limit the number of times these functions execute, especially for events that can fire frequently.Example: Your user lands on the homepage, and you’re loading every JS library known to humanity.Fix: Use code splitting and lazy loading. Load only what's needed when it's needed.Example: console.log("I forgot about this log!");Fix: Clean up your debug statements before deploying. They can clog up the console and slow down your app. Use tools or build processes to strip them out in production.Example: Your UI is frozen while waiting for a synchronous XMLHttpRequest.Fix: Embrace the asynchronous nature of JavaScript. Use promises, async/await, or callbacks to ensure your UI remains snappy.Example: You assume your code is efficient without any metrics to back it up.Fix: Use tools like Chrome DevTools' Performance tab or Lighthouse to profile your application and find bottlenecks.JavaScript is powerful and flexible, but with great power comes... you know, the potential for sluggishness. By being aware of these bad habits and actively working to avoid them, you can keep your apps running like well-oiled machines. So go forth and code swiftly! 🚀Templates let you quickly answer FAQs or store snippets for re-use.Nice and informative postthese are good advices to improve app performance!I want to add another technique that blew my mind when I discovered it, it's event delegation: When you are displaying a large list of items, and each item has an event handler like an onClick event, you may want to apply event delegations, that means to add just one event handler on the PARENT component, container or wrapper of that list, with this, whatever item you click inside that container, you can access to its information with event.target.What I like to do when implementing this approach is to set data-something attributes in the item, so I can access it via the parent event handler through event.target.dataset.something Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Carlos Azaustre - Oct 17 Mohamed Yahia - Oct 16 Ege Aytın - Oct 17 Rhys - Oct 16 Once suspended, Mattryanmtl will not be able to comment or publish posts until their suspension is removed. Once unsuspended, mattryanmtl will be able to comment and publish posts again. Once unpublished, all posts by mattryanmtl will become hidden and only accessible to themselves. If mattryanmtl is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Matt Ryan. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag mattryanmtl: mattryanmtl consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging mattryanmtl will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.