DevTools Waterfall Deep Dive - Diagnose Your Backend and Improve the Frontend User Experience

Поделиться
HTML-код
  • Опубликовано: 20 окт 2024

Комментарии • 59

  • @Fabreg01
    @Fabreg01 3 года назад +47

    24:16 I think are two different connection Id 4422, 4442. Superb content as always!!

    • @hnasr
      @hnasr  3 года назад +29

      Lol nice catch I am getting old 😅

    • @Fabreg01
      @Fabreg01 3 года назад +1

      @@hnasr 😅

    • @laurosf
      @laurosf 2 года назад +3

      @@hnasr if it helps, I didn't notice. Even after I read this comment I had to look twice lol

  • @vinisaveg
    @vinisaveg 2 года назад +4

    A terrific "must watch video" for any back-end or front-end engineers out there! Awesome DevTooling series btw. Keep it up!! :)

  • @javedutube10
    @javedutube10 3 года назад

    Whatever topic i think i need to understand more, here comes same video. Love you. Thanks.

  • @ca7986
    @ca7986 3 года назад +6

    ♥️ you are absolutely amazing! The content you display, the way you explain and teach. MashaaAllah ❤️

    • @hnasr
      @hnasr  3 года назад +1

      Thank you so much 😊

  • @ismail-talb
    @ismail-talb 3 года назад +1

    really beautiful tutorial...there was a missing piece in my head now I've found it . Thank you

  • @ADEL16111
    @ADEL16111 3 года назад +3

    I can't thank you enough for your content, allah yakramek

  • @RobHulsebos
    @RobHulsebos 9 месяцев назад

    It's easy to follow this lecture and with humor. Thanks Hussein :-)

  • @blingsingh1057
    @blingsingh1057 2 года назад +2

    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.

  • @nathansherrard4111
    @nathansherrard4111 3 года назад +2

    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.

    • @hnasr
      @hnasr  2 года назад +2

      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

    • @infatuation420
      @infatuation420 2 года назад

      can u explain in simple term plz i did not got your concept of Q?

  • @rschmidtzalles
    @rschmidtzalles 3 года назад +1

    Your content is just amazing. Thanks for sharing your knowledge.

    • @hnasr
      @hnasr  3 года назад

      Thank you Libert!! 😍 glad it helps

  • @HarshKapadia
    @HarshKapadia 3 года назад +1

    Amazing video! Thank you! This series is really good!

  • @johnm8358
    @johnm8358 3 года назад +1

    great content, i learned lots ! thank you

  • @aqumus
    @aqumus 3 года назад

    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👌🙂

  • @nathansherrard4111
    @nathansherrard4111 3 года назад +3

    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?

    • @hnasr
      @hnasr  2 года назад +3

      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.

  • @helios6193
    @helios6193 3 года назад

    woah...
    explained very well... i fell like i've gained a superpower now

  • @kirillzlobin7135
    @kirillzlobin7135 9 месяцев назад

    Amazing content

  • @mrcrazyenough007
    @mrcrazyenough007 3 года назад

    Superb content! MashaAllah

  • @tanyashreeatul9591
    @tanyashreeatul9591 3 года назад

    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 ?

    • @gerooq
      @gerooq 3 года назад

      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.

  • @karthiknayaka8611
    @karthiknayaka8611 2 года назад +1

    Nice

  • @hangtran4863
    @hangtran4863 3 года назад

    thank you a lot for the quality content

  • @kushalkamra3803
    @kushalkamra3803 Год назад

    Thank you 🙏

  • @KDOERAK
    @KDOERAK 2 года назад

    very well done - thx!

  • @Jack-uc5ly
    @Jack-uc5ly 3 года назад

    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!

    • @hnasr
      @hnasr  3 года назад +6

      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
      ruclips.net/p/PLQnljOFTspQWbBegaU790WhH7gNKcMAl-

    • @Jack-uc5ly
      @Jack-uc5ly 2 года назад

      @@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

  • @jinendrakhabiya2646
    @jinendrakhabiya2646 3 года назад

    This is awesome!

  • @peteradam4740
    @peteradam4740 3 года назад

    Great content, thanks

  • @hemasaitej563
    @hemasaitej563 2 года назад

    How can we get these values in python programming ?

  •  3 года назад

    Great content!

  • @ca7986
    @ca7986 3 года назад

    Make more on devtools!

  • @vybhaveswaraiah7114
    @vybhaveswaraiah7114 Год назад

    Can anyone please tell me how exactly we can identify which calls are parallel by using chrome dev tools ???

  • @rajashekhar433
    @rajashekhar433 3 года назад

    Thanks for the video and
    1. Can we get TCP connection info in req object
    2. Any Roadmap for learning Nodejs and AWS

  • @asimabusallam3147
    @asimabusallam3147 3 года назад

    thanks

  • @NizadSajeedAranghmedia
    @NizadSajeedAranghmedia 3 года назад

    Which is the best caching for build a caching server ?

    • @rubendariofrancodiaz6944
      @rubendariofrancodiaz6944 3 года назад

      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?

    • @NizadSajeedAranghmedia
      @NizadSajeedAranghmedia 3 года назад

      @@rubendariofrancodiaz6944 Our Use is to Cache the iptv middleware server.

  • @redditrecap7
    @redditrecap7 2 года назад

    Make a similar series on frontend ???? Or any similar channels like yours for frontend?

  • @mangeshgupta5677
    @mangeshgupta5677 3 года назад

    Heyy show it😂 thank you 😊

  • @abdulmoizsheikh8031
    @abdulmoizsheikh8031 3 года назад +1

    24:06 I think thats a different connection no? o.O

  • @rishiprotimbose6167
    @rishiprotimbose6167 3 года назад

    I wonder why you don't use COMMAND + ALT + I to access Dev tools... 🤔

    • @hnasr
      @hnasr  3 года назад

      I didn't know that shortcut thanks for sharing!!

    • @rishiprotimbose6167
      @rishiprotimbose6167 3 года назад

      @@hnasr Thanks to you for such detailed explanations ☺️

  • @racionator2668
    @racionator2668 3 года назад +1

    I wonna be that kid
    FIRST
    Yes i will go out now

  • @syrix5914
    @syrix5914 3 года назад

    Show it.

  • @ינוןאלבז-כ1ז
    @ינוןאלבז-כ1ז 3 года назад

    Probably it's too late but hi show it

  • @techwithimad4672
    @techwithimad4672 3 года назад

    07:20 actually it tooks less time (81 ms) instead of 95ms 🤣

    • @hnasr
      @hnasr  3 года назад +1

      Yeah the first call was stalled for some reason when i opened a new tab we didn’t get any stalling