Only The Best Developers Understand How This Works
ฝัง
- เผยแพร่เมื่อ 29 มิ.ย. 2024
- JavaScript Simplified Course: javascriptsimplified.com/?utm...
Managing memory in JavaScript is generally pretty easy because of garbage collection, but it isn’t always easy. In this video I will explain exactly what garbage collection is, how it works, and more importantly show you how you can debug and fix the most common memory related problems in your applications.
📚 Materials/References:
JavaScript Simplified Course: javascriptsimplified.com/?utm...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:27 - How garbage collection works
08:00 - Memory Management Advanced Tip
09:58 - How To Find Memory Leaks
13:55 - WeakMap & WeakSet
#GarbageCollection #WDS #MemoryManagement
![อาจารย์ยอด : ลุงแว่วเล่าเรื่องผี [ผี]](http://i.ytimg.com/vi/Fd2Qsy4dqpM/mqdefault.jpg)
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?
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.
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
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.
This one was very informational! Great work Kyle!
Great insight about how to debug memory leak. Thanks for the information.
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 bytes) 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.
good info Kyle. I learn something new from you all the time!!!! I appreciate you man!!!!!!!!!!!!
Thanks Kyle ! Its very informative
Perfect timing! Thanks for this.
Awesome video thank you so much!
I really needed this. Thanks 👍
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.
Really appreciate this video. Is possible to have another video to talk about how to find memory leak efficiently in Node JS service ?
Not really what I would call a memory leak, but we get the concept. Nice video
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.
Thanks for the upload. ))
Damn! This was extremely informative.
recently learned Javascript, is it possible to make a pixelated multiplayer game, sandbox style or top down
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 😑
I never noticed how much you move your head when speaking, but now I can’t unsee it
Could you create a video about Atlassian's new framework-agnostic, low-level dnd library called "pragmatic-drag-and-drop"?
I have been using JavaScript for about 4 years and never knew there was a WeakMap class
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
Sure, only the best, and I am glad that I and you are the best.
Really interesting
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?
It's best tutorial but can you make another js master like challenge or exercise even to master it 😊😊😊
For example, in react. can we view the data stored in memory under the Memory?
Thank you! I had a blank spot in my knowledge.
Okay. Now I think I'm one of the best developers.
A bit of misinformation in the video. Values of primitive/scalar types are also subject to garbage collection, not just reference types.
dark mode plz, luv ur content btw
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.
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.
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.
Gold
why does anyone ever talks about memory leaks in JS?
Try wearing a neck brace.
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.
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.
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".....
"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...
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.
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
ClickBait!
How?
omG!!!!!!!!!!! STOP!!!!!!!!!!! so many haters. GEEZ
Absolutely awful title & screenshot. 👎
Clickbait, no?
Bro, just buy another guitar stand.
[].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);
}
}
);
[].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);
}
}
);
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);