Debugging memory leaks - HTTP 203

[@hypersonic12]

For me, this was one of the most useful episodes so far, on a tool I have mostly avoided thus far. Also it felt like reading a suspense novel after every “success.” Thanks for the great walkthrough!

[@jakearchibald]

I've added a link to the leaky version of Squoosh in the description, in case you want to follow along

[@itsdevdom]

These episodes could be an hour long and I wouldn't mind. Great content as always!

[@mc-ty4br]

I feel like we're passively/partly enabling Apple to keep on slowing down the web by supporting its browser. Sometimes, I just wanna add a banner telling people to use a proper browser. In my last job I had a native datepicker, and for safari, i had a input/text with clickable question mark next to it that alerted "your browser does not support date pickers, please enter date manually dd-mm-yyyy"

[@dhkatz_]

This seems like an uninformed answer. All three major browsers do a great job in certain areas and less than great in others. None of the development teams *want* any of these bugs to exist, they're bugs. Safari is usually not too slow to fix things like this anyways.

[@gabrielmachado7315]

I work on a big typescript application, and memory leaks haunt us from all places, kind of 70% us, 20% libraries, 10% browsers fault. Sometimes I think it would be easier if we write everything in C.

[@technikhil314]

Am I the only one who likes video before watching it fully? My mind after watching this video: Lets run and analyze memory on every site that we have created. :)

[@jakearchibald]

Everyone should do this, I reckon

[@technikhil314]

@@jakearchibald Yup Cant agree more. I would spread the word for you for free. But there is hardly anyone who listens to me :)

[@HazzMan2409]

Jake and Surma are the Messi and Ronaldo of the software dev world 😄 Constantly amazed by their smarts and I’m thrilled that they share it with us mere mortals!

[@saidooubella]

They're more like Chet and Romain from Android staff!

[@wladmeixner76]

Exactly the procrastination I needed while learning for my exams, really glad to see you’re back!

[@switchfoot-7777]

Haven't watched fully yet. But last mem leak issue i had was related to Audio context, the mem used there cannot be seen in devtools and must use taskmanager. That day i learnd that mp3 loaded into an js context takes 10x the filesize in mem.

[@jakearchibald]

Decoded audio will always take up more space than compressed audio (like decoded images in this episode), but please file a bug about the lack of attribution in devtools!

[@cintron3d]

Really informative and entertaining as always, so glad you're back!

[@robertosantanaperdomo9388]

Wow, guys! Keep it up with this format, I loved it. It has been one of the episodes I've learned the most and I can actually use this to solve my everyday problems.

[@spidfire]

Epic, I never know how to tame the memory tab. Could you maybe do other features of the inspector in following episodes?

[@luluakram]

that safari memory usage,, 1.2 GB by the end.. that's just surprising. thank you for the video, super helpful.

[@dynamics]

Yay! Thank you! Google Chrome Developers series is my favorite! 😄

[@autodidact2590]

It's great learning things. Awesome explanation. If video gets longer.please keep it following video as part - 2 so on. It's helps alot in understanding the things under the hood.

[@SudharshaunMugundan]

I like how they gently pulled the leg of Safari and Firefox :P

[@LeeSmith-cf1vo]

I'm liking the new "studio", although those raining artifacts are really annoying. I think it would be useful to have a similar episode to this but talking about the DOM itself. How can we minimise the memory usage when we have a very large DOM? Also, it seems like it would be useful if those memory tools had a button that can remove from the snapshot anything that is _only_ referenced by the console

[@r0ger80]

its funny that even a google channel makes fun of Chrome`s memory usage problem xD

[@kalleguld]

It's not a problem, it's a feature. Since everything you do should be on the web anyway, the browser might just as well use all your memory :)

[@mc-ty4br]

That was worth the wait. Thank you all, it was great 👌

[@gouravkhator]

Both were event listeners, that's great

[@duncan-dean]

Such a good episode!

[@hashzones]

very useful and interesting, memory leaks debugging is always dev-time leaks :S

[@tkv559]

Wow this feels great, learn many things here

[@victornpb]

The trash can with an X in the top right is a CollectGarbage button in Safari

[@jakearchibald]

hah, I think I assumed that was "delete". Same UI problem as Chrome.

[@NitinPasumarthy]

Another insightful conversation / presentation. Thank you! Is there a way to detect these leaks in production via RUM?

[@ctna211]

Insightful and lovely convsersation! thanks.

[@shamsartem]

guys you are the best. this content is pure gold

[@krasimirk]

Wow great. nice point of logging in console is breaking memory usage. keep going

[@shubhamlatiyan7972]

Awesome information guys

[@waldemarenns4874]

4:18 - my favorite scene 🤯😂😂😂

[@thomasmeerpohl2438]

the studio seems professional but the audio is somehow bad.

[@jakearchibald]

Yeah, we had some sound issues in this series, sorry about that.

[@weizhiyang6873]

This is really helpful video! Thanks a lot!

[@riddixdan5572]

Would be awesome if we could do something similar in node.

[@FallingDreamFlowingSand]

Thanks for this episode, it was very informative.

[@pdkama]

nice content, well presented. Thanks

[@DenisTRUFFAUT]

Great episode !

[@mayankvora8116]

What a great explanation 👍

[@GiovanniOrlandoi7]

Great video!

[@ehsankhorasani_]

Thank you very much. it was so much informative

[@CyberAcidPlanet]

The big question is: do we have to remove listeners from elements that are going to be removed from DOM or are they automatially destroyed if the element is garbage collected after removal?

[@GuskiS]

DOM nodes always cleanup after themselves, meaning that listeners are removed/freed. However, working in a world of components, it is easy to forget to handle global listeners properly. In React it is generally done in useEffect callback function.

[@SimonBuchanNz]

Event emitters are pretty much literally just an array of listeners, so it's less "cleaning up after themselves" and more the GC just tosses the lot out at the same time. In practice the GC is just making things easier: you still have the basic problem of having to ensure that you have a protocol for ensuring things are cleaned up after they are no longer used (at least you don't have the problem of making sure they aren't cleaned up before they are used!)

[@dav_kat]

Where is upvote 100 times button

[@aymanpatel5862]

So you use a memory leak profiler to find a memory leak in your app only to find memory leak in the profiler itself. 😂

[@jakearchibald]

haha not just the profiler, it was a leak in Safari in general!

[@wmhilton-old]

Oh Safari

[@PierreSoubourou]

excellent ! and quite readable even on smartphone ;-)

[@ZMYaro]

May I ask what set-up you are using to control your slides with a Joy-Con? 👀

[@jakearchibald]

It's just bluetooth, so it connects as a gamepad. Then we're using the gamepad API in the browser to pick up button presses.

[@ZMYaro]

@@jakearchibald Oh, I didn't realize Joy-Cons map like regular gamepads-thanks!

[@rishabhanand4270]

you guys are the best

[@avi98717]

I didn't get what is unfoldable thing at 10:49 . Can some explain.

[@jakearchibald]

The bit where is displayed? That's the JS console

[@rajshekharmishra9151]

Really interesting 👍

15:55 😂

[@delulu6969]

Is window.matchMedia any more performant than window.onResize? Or it depends?

[@jakearchibald]

Roughly the same in terms of performance I imagine. I went for matchMedia because it followed what we were doing in CSS

[@SaurabhKumar-ee6dj]

Is it possible to use ram for cache not my ssd

[@jakearchibald]

--disk-cache-dir lets you change the location of the cache, and you could create a ramdisk for this if you wanted. I don't know what you're trying to gain from that, and I don't recommend it, but that's all I know.

[@SaurabhKumar-ee6dj]

@@jakearchibald thank uou so much sir ❤

[@BipinOli90]

Fantastic

[@firiasu]

Nice subject!

[@mishasawangwan6652]

safari is the new ie

[@jimiscott]

No more bedrooms!

[@jakearchibald]

Hey, there was only ever one bedroom. Unless you think I sleep in my study? Which… I guess is believable.

[@dassurma]

You just wait. I’ll demand that there’s a bed on our set!

[@Manish-fm5iv]

Interesting...

Am I the only one seeing the artifacts in the video?

[@jakearchibald]

What kind of artifacts? What quality are you watching at?

[@YOUTUBEACEHBERDIKARI]

Hello,, salam kenal dari aceh

[@cintron3d]

First!

[@ruby_gleyzes]

Great video!