I started watching your videos in 2020 as a way to learn. I told myself I'd self-teach myself enough to eventually land a junior job... 4 years later I still learn something new every time I watch one of your videos. And yes, I'm happily employed as a software engineer now :)
Garbage collection doesn’t happen immediately because it is thread blocking, so the browser may postpone it until an idle frame or until too much memory is used to avoid FPS drops. This is why you absolutely have to manually garbage collect (little icon showing a broom or brush) before testing. Otherwise your tests may be unreliable (as seen in this video when Kyle has to hard refresh). To check for memory leaks: 1. Manually garbage collect 2. Take snapshot 3. Perform the action that allocates memory (add some todos for example) 4. Perform the action that de-allocates memory (remove all todos) 5. Manually garbage collect 6. Take snapshot 7. Memory allocated between snapshots 1 and 2 should be close to 0. Better yet, repeat steps 2-6 and check the difference. If the difference increases you have a memory leak.
WeakMap i only use, when for example i want to figure out if data is duplicated or already added or not. But i could also just use a normal map, and clear it after the function. Or the map also get's cleared if initialized inside of the same scope
In Chrome, is there a difference between opening an “incognito” window and just opening a Guest profile window? Both seem to give you no extensions, a clean history, and empty cache?
see date exists on window object,so i will be staying in memory but date that we created will be holding in a variable that will be cleared by garbage collector.
Lots of wrong things Your strings were kept in memory because they were string literals in the code, not because they were strings. Numbers are also collected, but don't have memory anyway, since they are raw pointers. You actually didn't talk at all about how garbage collection works in the section for "how garbage collection works".....
enough of the clickbait titles. please just say WHAT your video is about. I'd hate to unsub after all these years but i don't play that clickbait bullshit.
Yeah i commented about the same thing on one of Kyles other video too where he kept the title too abstract and makes a soy face in the thumbnail. I don't understand why he can't just tell what the video is about in the title, will make it very easy to search in future and also know what I'm getting into before clicking the video.
Especially in the web scene where many people get a job without being qualified developrers, these concepts and specifically how to profile their JavaScript is barely known. I've been working in a web agency and except for two of twendy developers nobody knew about let and const, didn't even how what a class is (neither in JavaScript nor the general concept). Most of them didn't even use var, their coding standard was just huge files of implicitly declared global variables and functions. His titles are useless clickbait though... none of these people will ever find his videos when specifically searching for such information, contributing to the mess by making useful information not usefully accessible.
Even worse that he's wrong on quite a lot of things and doesn't actually tell how garbage collection works...despite half the video being that section...
I always lose concentration on your videos when you pronounce the W in known and own etc. I just can't. I start googling trying to find out which dialect does this, and I'm told that none do. It;s just you. lol
Dexie makes it pretty simple. They have some react specific hooks aswell but I use it in every framework for browser saved state that can take any ... even files!
5:09 "Any time you use a string, a number, a boolean - those [primitive values] will stay in memory forever, because they are not being garbage collected." Very inaccurate. Let's explain. Not all primitives are the same: some are stored in the heap, and some are in-place. Small integers (up to 31 bits) and booleans are in-place. They don't need clean-up (they'll be freed when the thing that holds them is freed). Larger integers (and floating point numbers) ARE stored in the heap. They are held by a pointer and they do need clean-up. All strings are stored in the heap! and hence, they WILL BE cleaned up, unlike what Kyle says. The reason that "innerString" wasn't cleaned is because V8 employs an optimization strategy called "Interning". Since people use strings pretty-much like enums, V8 keeps small strings in memory for longer, to avoid re-allocating them later.
I was going to ask if you are worried about memory then using classes more would result in better cleanup but doesn't sound like the case. Good video otherwise.
The other reason the "innerString" was retained in memory is because it is console logged, so the engine has to keep it in memory in case the DevTool needs to inspect it.
a fun fact - the word null (and its other variations zero, hero, xero, rexo, orex, rex, xer) comes from arabic word for a hole in the ground which used to imprison debtors (those who never paid their debt to the king) - ergo the word - hole - you see during the garbage collection - is basically putting garbage into the hole - or nullifying as arabs in the middle ages would say - PS: and yes they did not have a numeric value which would represent a zero - so they used a letter for it - and guess what was the letter? that was the letter O as in owe - the letter resembles rounded edges of the debtor's hole in the ground -
some of the comments are a little mean. the title is accurate; only the best developers know how memory works in v8 (and in general). you don't become a great developer by hopping javascript frameworks every week.
The engine does GC before taking heap snapshot, you need to look at the retain path to see why there are three Test objects in memory. This video has multiple mistakes and inaccurate information. Please double check.
Interesting. Keep up the good work. I am doing Enterprise Development for 11 Years now and never had to use this. Following best practices and writing clean code helps for sure. But once you might need to debug your Memory and Performance, this is quite a good Guide as to where to start from. Good Job man.
Isn't it a bit misleading to say that "primitives stay in memory forever?" True, they aren't stored in the exact way objects are. If you're declaring them on the global scope (or maybe even within the {} scope as you created in this video), then yes, they will likely stay in memory, but declaring them inside of a function (which is after all a specialized object) will reallocate their memory when the function's scope is popped off of the stack. Assuming the function isn't alive for the entirety of your running application, the primitives won't live forever.
Yes, he was just wrong on that. String literals are kept around (they exist directly in the code, so it's assumed they are likely to be used again), and also the console that the string was logged to is in memory as well, so the string is still in use in the console.
Wow, I thought javascript developers don't know that the information requires some memory to be stored in. Glad to see that at least best ones know such a thing.
@@someoneunknown8222 People who don't like programming would often start with HTML, CSS and end up learning JavaScript as that's what will land them a job. That is why most of the programmers working on JavaScript don't understand it well.
You can expose the GC and then trigger it with the little broom icon. That way, your snapshots are always "clean". I am currently struggling with a memory leak with Nuxt SSR - a small example like yours is easy, but as soon as you have a whole enterprise app, it gets really difficult to isolate things 😑
The debugging video and this one are like goldmines for developers. I always wondered why the performance part and debugging in chrome browser is not thought as it makes life so much easier.
I have had her for a few years. She usually sleeps in my office while I work, but tends to leave when I start recording videos since she doesn't like it when I move around all my lighting equipment. She must have been really tired when I recorded this, though, as she didn't move an inch.
I started watching your videos in 2020 as a way to learn. I told myself I'd self-teach myself enough to eventually land a junior job... 4 years later I still learn something new every time I watch one of your videos. And yes, I'm happily employed as a software engineer now :)
Grats
Congratulations on the job! It's a lifetime of learning. I still learn new things every week it seems like.
@@WebDevSimplifiedhave you ever tried reading the Ecmascript standards?
Garbage collection doesn’t happen immediately because it is thread blocking, so the browser may postpone it until an idle frame or until too much memory is used to avoid FPS drops. This is why you absolutely have to manually garbage collect (little icon showing a broom or brush) before testing. Otherwise your tests may be unreliable (as seen in this video when Kyle has to hard refresh).
To check for memory leaks:
1. Manually garbage collect
2. Take snapshot
3. Perform the action that allocates memory (add some todos for example)
4. Perform the action that de-allocates memory (remove all todos)
5. Manually garbage collect
6. Take snapshot
7. Memory allocated between snapshots 1 and 2 should be close to 0.
Better yet, repeat steps 2-6 and check the difference. If the difference increases you have a memory leak.
Great insight about how to debug memory leak. Thanks for the information.
Great video & explanation on garbage collection in Js!
i am learning more and more from your videos. this helps me alot as a beginner! thanks so much kyle!
Maybe hint in the title Wtf the video is about?
Nah, the title is clickbait for the first few days and then he changes it to something normal. Algo playing...
@@srdjagunjic Veritasium had a video explaining this
quit b**ching
Because it leaves you wondering "How WHAT works?" That said, Kyle's videos are gold and worth clicking. He doesn't need to bait us, imo.
good info Kyle. I learn something new from you all the time!!!! I appreciate you man!!!!!!!!!!!!
by the way, hovering over the grey text starting with @ will show more info. also clicking on a record on a heap shows retainers of this object
A bit of misinformation in the video. Values of primitive/scalar types are also subject to garbage collection, not just reference types.
Really appreciate this video. Is possible to have another video to talk about how to find memory leak efficiently in Node JS service ?
WeakMap i only use, when for example i want to figure out if data is duplicated or already added or not.
But i could also just use a normal map, and clear it after the function.
Or the map also get's cleared if initialized inside of the same scope
Could you create a video about Atlassian's new framework-agnostic, low-level dnd library called "pragmatic-drag-and-drop"?
I really needed this. Thanks 👍
Thank you, Kyle.
You hair looks amazing, how do you do your hair? tell me the brand of the wax or spay you are using if it is okay.
Exelent explanation! Thanks.
nice, we need for network too!
In Chrome, is there a difference between opening an “incognito” window and just opening a Guest profile window? Both seem to give you no extensions, a clean history, and empty cache?
ok does that affect local storage?
05:10 what about strings that don't exist in source code but created dynamically like `Date()`?
see date exists on window object,so i will be staying in memory but date that we created will be holding in a variable that will be cleared by garbage collector.
what do you think about SolidJS
just awesome.
It's best tutorial but can you make another js master like challenge or exercise even to master it 😊😊😊
Thank you! I had a blank spot in my knowledge.
I never noticed how much you move your head when speaking, but now I can’t unsee it
Really interesting
Okay. Now I think I'm one of the best developers.
The way how you look for memory leaks doesn't have a lot of sense. You know that you have problem with map. But what if you don't?
OK yo, I've been an JS engineer for years, I legit did not know you could just use curly braces by themselves to make a scope.
why does anyone ever talks about memory leaks in JS?
Gold
Lots of wrong things
Your strings were kept in memory because they were string literals in the code, not because they were strings. Numbers are also collected, but don't have memory anyway, since they are raw pointers.
You actually didn't talk at all about how garbage collection works in the section for "how garbage collection works".....
enough of the clickbait titles. please just say WHAT your video is about. I'd hate to unsub after all these years but i don't play that clickbait bullshit.
"You must know this!"
"Only The Best Developers Understand How This Works"
I think its called clickbait and alot of people know how it works.
Yeah i commented about the same thing on one of Kyles other video too where he kept the title too abstract and makes a soy face in the thumbnail. I don't understand why he can't just tell what the video is about in the title, will make it very easy to search in future and also know what I'm getting into before clicking the video.
@@bharatchakrabarthy7571 Because that's not how you make money on youtube lol
Especially in the web scene where many people get a job without being qualified developrers, these concepts and specifically how to profile their JavaScript is barely known. I've been working in a web agency and except for two of twendy developers nobody knew about let and const, didn't even how what a class is (neither in JavaScript nor the general concept). Most of them didn't even use var, their coding standard was just huge files of implicitly declared global variables and functions.
His titles are useless clickbait though... none of these people will ever find his videos when specifically searching for such information, contributing to the mess by making useful information not usefully accessible.
Thats who usually gets the jobs, people who don't know shit and might have a degree....
Even worse that he's wrong on quite a lot of things and doesn't actually tell how garbage collection works...despite half the video being that section...
I might be disliking every one I click on just because I hate the vague nondescript clickbait titles. So unbecoming.
Tile "Best Developer". Me as a backend: ???
I always lose concentration on your videos when you pronounce the W in known and own etc. I just can't. I start googling trying to find out which dialect does this, and I'm told that none do. It;s just you. lol
This was kinda unnecessary and rude.
@@Benjamin-Chavez 👍OK, Boomer
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
Would you be willing to do a bit of a deep dive into IndexedDB? I really want to figure out how to use it for state in a react application.
Dexie makes it pretty simple. They have some react specific hooks aswell but I use it in every framework for browser saved state that can take any ... even files!
Hey man you should definitely look up for tinybase. It offers reactivity and supports indexedDB too
@@Frostbytedigital Yeah, there is a fair amount of data I want to store that would do best in a database style method of storage!
Try SQL lite
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
5:09 "Any time you use a string, a number, a boolean - those [primitive values] will stay in memory forever, because they are not being garbage collected."
Very inaccurate. Let's explain.
Not all primitives are the same: some are stored in the heap, and some are in-place.
Small integers (up to 31 bits) and booleans are in-place. They don't need clean-up (they'll be freed when the thing that holds them is freed).
Larger integers (and floating point numbers) ARE stored in the heap. They are held by a pointer and they do need clean-up.
All strings are stored in the heap!
and hence, they WILL BE cleaned up, unlike what Kyle says.
The reason that "innerString" wasn't cleaned is because V8 employs an optimization strategy called "Interning". Since people use strings pretty-much like enums, V8 keeps small strings in memory for longer, to avoid re-allocating them later.
I was going to ask if you are worried about memory then using classes more would result in better cleanup but doesn't sound like the case. Good video otherwise.
The other reason the "innerString" was retained in memory is because it is console logged, so the engine has to keep it in memory in case the DevTool needs to inspect it.
This interning is the exat same as in java. THe nameing and the way of working is the same. So something more that makes javascript similar to java :)
@@gurusystem Yep. Console logs are pure evil when it comes to memory allocation. Had couple of bad memory bloats due to logs
a fun fact - the word null (and its other variations zero, hero, xero, rexo, orex, rex, xer) comes from arabic word for a hole in the ground which used to imprison debtors (those who never paid their debt to the king) - ergo the word - hole - you see during the garbage collection - is basically putting garbage into the hole - or nullifying as arabs in the middle ages would say - PS: and yes they did not have a numeric value which would represent a zero - so they used a letter for it - and guess what was the letter? that was the letter O as in owe - the letter resembles rounded edges of the debtor's hole in the ground -
some of the comments are a little mean. the title is accurate; only the best developers know how memory works in v8 (and in general). you don't become a great developer by hopping javascript frameworks every week.
The engine does GC before taking heap snapshot, you need to look at the retain path to see why there are three Test objects in memory. This video has multiple mistakes and inaccurate information. Please double check.
heyy!! great video... My question is how do you know this?? like where do u get ur info from?
Try wearing a neck brace.
Interesting. Keep up the good work. I am doing Enterprise Development for 11 Years now and never had to use this. Following best practices and writing clean code helps for sure. But once you might need to debug your Memory and Performance, this is quite a good Guide as to where to start from. Good Job man.
This one was very informational! Great work Kyle!
For example, in react. can we view the data stored in memory under the Memory?
So you're the best is it now?
Isn't it a bit misleading to say that "primitives stay in memory forever?" True, they aren't stored in the exact way objects are. If you're declaring them on the global scope (or maybe even within the {} scope as you created in this video), then yes, they will likely stay in memory, but declaring them inside of a function (which is after all a specialized object) will reallocate their memory when the function's scope is popped off of the stack. Assuming the function isn't alive for the entirety of your running application, the primitives won't live forever.
Yes, he was just wrong on that. String literals are kept around (they exist directly in the code, so it's assumed they are likely to be used again), and also the console that the string was logged to is in memory as well, so the string is still in use in the console.
recently learned Javascript, is it possible to make a pixelated multiplayer game, sandbox style or top down
yes
Wow, I thought javascript developers don't know that the information requires some memory to be stored in. Glad to see that at least best ones know such a thing.
People who don't understand a language would often criticise it.
@@ashwinsuryawanshi people who don't understand programming would often choose javascript
@@someoneunknown8222 People who don't like programming would often start with HTML, CSS and end up learning JavaScript as that's what will land them a job. That is why most of the programmers working on JavaScript don't understand it well.
@@someoneunknown8222 Thank you for making me laugh 🤣
Oh yay that means I’m one of the best developers! 🎉
@yoooo4177
No you’re not
Thanks Kyle ! Its very informative
Can you please make GC video for backend. And please make another video where we can use GC in real application. Thanks.
You can expose the GC and then trigger it with the little broom icon. That way, your snapshots are always "clean". I am currently struggling with a memory leak with Nuxt SSR - a small example like yours is easy, but as soon as you have a whole enterprise app, it gets really difficult to isolate things 😑
The debugging video and this one are like goldmines for developers. I always wondered why the performance part and debugging in chrome browser is not thought as it makes life so much easier.
This is why I started using web assembly instead of js
Really good video and very informative one. Thank you!
I have been using JavaScript for about 4 years and never knew there was a WeakMap class
Damn! This was extremely informative.
Great video !!!, Thank you
Sure, only the best, and I am glad that I and you are the best.
Perfect timing! Thanks for this.
Not really what I would call a memory leak, but we get the concept. Nice video
Thanks for your awesome videos, dude!
dark mode plz, luv ur content btw
Thanks for the upload. ))
08:00 - Golden tip!
Awesome video thank you so much!
Hi
you have a dog? 🤩
I have had her for a few years. She usually sleeps in my office while I work, but tends to leave when I start recording videos since she doesn't like it when I move around all my lighting equipment. She must have been really tired when I recorded this, though, as she didn't move an inch.
ClickBait!
How?
omG!!!!!!!!!!! STOP!!!!!!!!!!! so many haters. GEEZ
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
Bro, just buy another guitar stand.
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);