How I Optimized My JavaScript Project (Complete Walkthrough) | Faster Spatial Hash Grids

Follow me on:

In this project, we're doing some JavaScript optimization. This is a follow-up to our last project that covered spatial hash grids, or spatial hashing as it's sometimes referred to. Anyway, we're continuing and building on that JavaScript spatial hash grid implementation, but we'll be examining it in detail with Chrome's DevTools profiler, looking for hotspots and optimization opportunities. I'll take you step by step through the process, benchmarking the code, examining the profile, and ultimately making the existing implementation dramatically faster.

Whether you're a game developer interested in this specific spatial hash grid data structure, or a JavaScript developer looking to work on your optimization skills, this has a lot to offer.

Understanding datastructures, having a complete and thorough basis with them is a key skill for any game developer. It's a complex field with tradeoffs between memory, time complexity, and even development and maintenance cost all come into play. Understanding how to look at code, profile, optimize, and in short speed it up are import skills for a developer.

In the video, we cover:
* Looking at the overall optimization strategy, how to approach a chunk of code for improvement.
* Profiling & Optimization in Chrome, using the built-in DevTools to capture profiling data and examine it.
* Walking through the sources tab to look at line-by-line hotspots in JavaScript code.
* Weighing datastructure options, discussing the tradeoffs between Set containers, Map containers, arrays, and linked lists.
* Actually making the JavaScript code optimized.

[NateLevin]

Who knew devtools had that line-by-line performance thing! Awesome!

[jwr]

The pregnant women analogy! 😂

Why didn't I dive into this channel sooner? Amazing content; sprinkles of dry, quirky humor; great high-level overviews in the most accessible programming language, but applicable to any language. You rock, man.

[lenargilmanov]

Dude, that trick with exchanging the item to be removed with the last one is genius!

[To-mos]

Thanks for taking the time to make corrections to the code, the biggest problems I see with tutorials is they just say it's "good enough" and don't explain the pitfalls.

[kered]

It's worth mentioning that the queryId technique you are using for cell deduplication is not thread or async safe. Two queries cannot be run against the same hash grid at the same time, because they could stomp on each other's queryIds. This is not a problem in Javascript, as long as the functions are synchronous, or in any other game where you are not using threads. But it is an important limitation to point out, especially because doing multiple such queries on the same frame would normally be trivial to parallelize across threads.

[BipinOli]

Loving these optimization videos man. Keep up the good work :)

[sehbanomer]

Wow, how did I not think about swapping the target item with the last item when removing it from the array. Now I feel stupid.

[PixelguardianGame]

“Nine pregnant women can’t produce a baby in one month”

_you’re not trying hard enough_

[piegpa]

This is some next level JS, wow! I bet none of the devs in my company know how to optimise JS like you. Thanks for the video!

[SegNode]

This video is a banger, watching it made me realize the importance of knowing data structures. Super well explained and engaging too, thanks for making it ❤

[Crosility]

I love how each of your videos gives progressive understanding, and it's clear, concise, and only as long as it needs to be. No fluff. Thank you! Please continue to make videos!

[JEsterCW]

You're amazing, even tho i don't understand any part of code your explanation is amazing and clean and gives many ideas how to write faster running code. Thank You ❤️!

[insertoyouroemail]

I love this, I would just like to add that having tests in performance optimization is important to know you're not breaking anything.

[TheTrojan]

Thanks for this. Its hard to find videos on actual indepth JS optimization. I rewatched several times

[dachr]

This is awesome! Thanks for the great step by step guide of how you actually do your optimizations.

[ZynSays]

I was practically yelling at my screen during the previous video to just use a big array! This video was very satisfying to watch.

[thomasfrc]

I even learnt how to call that hamburger button you clicked on ! 10/10 thanks !

[AndrewKay]

I realise this is an old video, but I had a look and didn't see anyone comment on this yet. In the "slow" version of your spatial hash grid, you initialise _cells as a Map, but then you are using it like an object - if(k in this._cells), this._cells[k] = ..., etc.

The Map API should be like if(this._cells.has(k)), this._cells.set(k, ...), and so on. This won't make an asymptotic difference because JS objects are essentially themselves just hashmaps, but there is some performance difference between a regular object and a map since the former is more optimised for fixed accesses like obj.static_key rather than dynamic ones like obj[dynamic_key]. V8 does try to tell when you're using an object like a dictionary and switches its internal representation, but when you know you want dynamic accesses, using the Map API should be better.

[maxpaju]

This is exactly what I needed to push myself to learn more about DS/algorithms, thank you!

[Rssks]

11:36 swap, pop was new for me :)!
12:11 that's like exactly what i do in my delete methods for lists :D i also keep track of deleted cell id's to re-use them when needed :)
13:08 actually that's the way strictly typed languages demand you to code- by predefining your arrays or lists with fixed length and types. I find this method better cause of the "sense of control" over what you are doing ^_^

I just discovered this video and it was great! I love how unintuitive it feels when optimization actually sometimes means you need more code :D and i loved how for an optimization you needed to involve lower level programming approach (pre-define & linked lists) to achieve greater speeds, it shows well how you need to strive away from javascripts dynamic and loosely typing to gain performance.

Also, about javascript, i have experienced that array's specially "push" operation is pretty slow. Instead i used key-value pair object, i am not sure why but {a: 'b'}, accessing and iterating this datatype is ~10x faster than ['b'].