DevTools Waterfall Deep Dive - Diagnose Your Backend and Improve the Frontend User Experience
ฝัง
- เผยแพร่เมื่อ 26 ก.ค. 2024
- In this video we will learn the performance waterfall in devtools networking tab and how you can use it to diagnose your backend and improve the user experience o your web application
0:00 Intro
1:20 Simple Insecure WebSite
6:45 Simple Secure WebSite
9:10 HTTP/1.1 WebSite with Many Resources Single Domain
18:46 WebSite with Many Resources in Different Domains and Protocols
🎙️Listen to the Backend Engineering Podcast
husseinnasser.com/podcast
🏭 Backend Engineering Videos
• Backend Engineering (B...
💾 Database Engineering Videos
• Database Engineering
🏰 Load Balancing and Proxies Videos
• Proxies
🏛️ Software Archtiecture Videos
• Software Architecture
📩 Messaging Systems
• Message Queues & PubSu...
Become a Member
/ @hnasr
Support me on PayPal
bit.ly/33ENps4
Stay Awesome,
Hussein - วิทยาศาสตร์และเทคโนโลยี
24:16 I think are two different connection Id 4422, 4442. Superb content as always!!
Lol nice catch I am getting old 😅
@@hnasr 😅
@@hnasr if it helps, I didn't notice. Even after I read this comment I had to look twice lol
A terrific "must watch video" for any back-end or front-end engineers out there! Awesome DevTooling series btw. Keep it up!! :)
Whatever topic i think i need to understand more, here comes same video. Love you. Thanks.
really beautiful tutorial...there was a missing piece in my head now I've found it . Thank you
Amazing video! Thank you! This series is really good!
great content, i learned lots ! thank you
Wow what a amazing content, lot of learning for me from this video, definitely going through other videos.
Thanks for creating such content and sharing it👌🙂
It's easy to follow this lecture and with humor. Thanks Hussein :-)
This is awesome!
I can't thank you enough for your content, allah yakramek
very well done - thx!
Great content!
Great content, thanks
Awesome content! Hats off to you for the effort being put here.
One suggestion: Please zoom in for the mobile viewers. Font is bit smaller to read.
Superb content! MashaAllah
thank you a lot for the quality content
Amazing content
Your content is just amazing. Thanks for sharing your knowledge.
Thank you Libert!! 😍 glad it helps
♥️ you are absolutely amazing! The content you display, the way you explain and teach. MashaaAllah ❤️
Thank you so much 😊
Thank you 🙏
Awesome vid as always!
I noticed in your multiple TCP socket example for badssl (around @18:30 ), there were no orange/purple bars for the secondary connections (until you moused over), which I thought was odd. But when I try it on mine now, I see them, so perhaps was a Chrome UI bug that has since been fixed.
probably I had opened them in another session in preparation of this video and they got "cached" .. Chrome seems to cache those connection even if I close the browser. I have to make sure to restart the machine and do a clean recording next time. Good catch
can u explain in simple term plz i did not got your concept of Q?
Nice
thanks
Make more on devtools!
Heyy show it😂 thank you 😊
woah...
explained very well... i fell like i've gained a superpower now
Another amazing and very insightful video Hussein ! Thanks! 🙂
Just wanted to ask one thing.. as you described the mechanism of how resources are fetched to browsers.. you told that they were getting downloaded. Where is this downloading actually happening? Does it get downloaded in the browser.. some cache ? It would be great if you could elaborate a bit on that ?
Chrome and other browser software, when installed, dedicate a folder on your system to things like cookies and cache. That is likely where it gets stored. Something like C:/Program Files/Google/Chrome/cache/cache327.txt or C:/Users/Documents/Google/cache/cache82394.txt. Just pulled these examples from my head but its the same idea I guess.
Make a similar series on frontend ???? Or any similar channels like yours for frontend?
Love your videos, quick question:
You said 'h2' requests are not cheap on the CPU, how do you know this? Are there any popular resources you can share on this subject please?
Thanks in advance and keep up the awesome content!
Hey Jack, if you know how H2 works you will understand why it takes more CPU/memory compared to H1. You can watch my http/2 video on the topic I have a whole playlist discussing this
My main resources are the RFC
HTTP/2
th-cam.com/play/PLQnljOFTspQWbBegaU790WhH7gNKcMAl-.html
@@hnasr so sorry I missed this reply, and here I am again trying to find something else.
I'm working on a nodejs backend service at work, which sends a lot of HTTP requests to get the information it needs to respond to the client.
I'm trying to debug the slow performance, had some major breakthroughs but, one tool which would be really helpful, is to have this network request waterfall chart but for the backend service itself. Just to get a visual representation instead of sifting through logs and building up a picture myself.
Any ideas of such tools? Can't seem to find any so might just make my own
Thanks for the video and
1. Can we get TCP connection info in req object
2. Any Roadmap for learning Nodejs and AWS
It's interesting to observe all the time and effort Google and others put into the HTTP/2 and TLS 1.3 protocols, specifically around reducing the # of round-trips, while their pages have multiple redirects and contents served across a ton of different domains (despite using H2). While I applaud the protocol optimization efforts, it does end up feeling like in trying to increase your car's MPG (fuel efficiency) you got ideal pressure in your tires, turned down the A/C, removed your cargo rack... but are driving an SUV in stop-and-go traffic.
On a related note, if website still have their content spread all around via domain sharding from the 1.1 days, won't that actually make things worse if they switch to H2? Are they waiting for a critical mass of new connections to use/support it before adjusting their content serving strategy, or is it just overlooked/forgotten and thus they'll never really reap the benefits of H2 they imagined?
I always think about that and my guess are new engineers take over and the knowledge is "lost" and people forget why they were doing things the way they were.
How can we get these values in python programming ?
Can anyone please tell me how exactly we can identify which calls are parallel by using chrome dev tools ???
Which is the best caching for build a caching server ?
That depends on your needs... Does it have to be asynchronous? What data structures do you want it to support? What caching strategy are you willing to use? Do you want to have replicas/clusters?
@@rubendariofrancodiaz6944 Our Use is to Cache the iptv middleware server.
Show it.
24:06 I think thats a different connection no? o.O
oops just saw another comment addressing the same
I wonna be that kid
FIRST
Yes i will go out now
Probably it's too late but hi show it
I wonder why you don't use COMMAND + ALT + I to access Dev tools... 🤔
I didn't know that shortcut thanks for sharing!!
@@hnasr Thanks to you for such detailed explanations ☺️
07:20 actually it tooks less time (81 ms) instead of 95ms 🤣
Yeah the first call was stalled for some reason when i opened a new tab we didn’t get any stalling