Это видео недоступно.
Сожалеем об этом.
Web Performance Mini Series: Responses
HTML-код
- Опубликовано: 14 янв 2019
- Ooh it's 2019! Let's get it rolling with a mini series on web performance, and what finer way than responding to user interactions? I'm going to show you the impact of delays, how to instrument your code and a little UX pattern you can put to good use if your responses are running long.
All aboard!
Amazing. I really appreciate how you focus on the concept you are explaning while still commenting the rest of the code.
60 fps is the refresh rate for most of the monitors(60FPS is the frequency that is smooth to humans). 1sec = 1000ms.
1000/60 = 16.6ms. 16.6ms is the max time that your task/animation should take otherwise it'll feel laggy.
Great video Paul!
Yeah, typically you have less because of browser housekeeping
I'm watching you for the first time, and like the expressions you throw.
Love you, Web Dev Vin Diesel
Lol... Is that a good thing?
I'm not sure why your channel is not popular... That was fantastic!
I have been working 4 years as web dev and I still struggle to utilize the performance tab of chrome's Dev tools.
Any chance of a video which explains what each section is for in the performance tab?
Yeah that will likely come at the end of mini series :)
@@aerotwist Cool, I was going to ask for the same thing. Thanks for the video, glad to see you back!
Looking forward for more videos in this series - One thing I would love to see: Often I know multiple ways of how to do something but am not sure whats the best way (performance oriented) to do it, maybe you could go over some common things (e.g. classes vs closures vs prototype, loops...) and tell us the advantages of the given options.
I think the thing to do there is test. It changes as js engines update... Also within reason you don't want optimize for the engines like that.
Its good to see u, my daily motivation
Missing your videos for last 3 weeks... Thanks Paul...Today Learned Performance mark and measure and how it is displayed on the performance...Please do one video on the page rendering steps and best practices.
Nice! Tbh I was a little bit worried that you decided not to continue with your vids in the new year, glad you finally showed up!
I very nearly didn't. Fun fact: every upload requires me to steel myself. Same with being on stage. Isn't psychology wonderful?
@@aerotwist I thought so. It's really inspiring to see people like you, who can create interesting and educational content (be it vid, presentation or blog post etc) and at the same time make it fun and interesting. I'm so envious od that skill :D Thank you for the time and effort you put into this. You could obviously spend it on something else but decided not to 👏
Awesome video, great tip to show *some* feedback at 100ms no matter what. Thanks!
Thank you. Your videos are much appreciated.
As is your comment :)
Perfmatters! I've introduced so many people (colleagues, guests of meetups or confs) to the RAIL model over the past 3 or maybe more years, and now I have your miniseries to back it all up with some practical show cases. Looking forward to your next episodes :) Really appreciate your work, thanks!
Thank you!
great video! I love it!
Love the tutorial. Joined your channel from devtips, and I found the channel quite interesting and the way you share your thoughts.
Welcome aboard!
I subscribed to you and have waited... weeks to get an upload! I'm glad you're back from what I anticipate was a break - welcome back!
It was a monster break, and a very necessary one! 😂👍 Super glad you're aboard!
Great to know you take of of yourself when needed. I really enjoy your content and would hate to see the quality deteriorate.
You're truly an inspiration - just thought you'd like to know that 😊
Thank you! That's really kind :)
Thanks for video. I've watched it :)
2019 has officially begun!
Good to have you back!!! I was going through Paul withdrawals!!!
Hilarious intro. first laugh of the day. Loving your videos Paul!
Very nice! Was not familiar with the performance functions. I've usually been writing my own datestamp calculations. This seems so much easier. 💪
I was waiting for the ending to be "...on the flip side". lol
I know right? I watched it back and I was ... surprised at myself.
mark and measure added to toolbox 👷🔧
Great! I would love to have some contents about Render Optimization.
Great video! One thing though about the spinner response - if the doSomeWork function takes longer than 100 ms to resolve (but only a little bit, maybe 150-200 ms), the spinner would only appear as a short "flash" which is just as bad for UX than a long delay. For that use case the spinner should have a minimum timeout for which it's visible on the screen.
Yeah I actually recommend fading / animating them in to soften any UI changes
Nice intro :)
Thanks!
Oh Hi Paul
Hi!
First of all a reaaaaaaaaaly late happy new year 🎈
Can you please move on with this series? I‘m really interested in Performance! This could help me at work and can keep a lot of pain away if the projects are done in right way or if they are propperly optimzied.
When there are more Videos to come could you optimize a Real-World example and demostrate the prpl pattern?
Optimizing an existing project is challenging because of permissions and the like :-/
Still, will go as fast as I can!
At last ! First !
Great ideas, thanks for sharing! I like the humo(u)r in your comment about colo(u)r. I don't want to labo(u)r the point though or our american neighbo(u)rs may notice this behavio(u)r and start to harbo(u)r bad feelings. (Sidewalk|Footpath).
(Tap|Faucet), (Autumn|Fall) :)
How would you measure how quickly react renders since you can mark when you call set state but you don't know when the page actually gets rendered?
Mark the start, use a requestAnimationFrame to get the start of the next frame.
@@aerotwist Well you know all the tricks, don't you?
No I just know some quite well :)
hey. where you've been?
I was having a nice long break! :D
Can I do this with NodeJS too? performance.mark ?
perf_hooks 👍
4:29
#thesqueak
RAIL pattern
Correct
So uh... did you upgrade to Mojave yet : )
Don't think so
Nice video, btw what is the music track ?) 😇
Have a look around Epidemic Sound, it's where it all comes from!
Hey Paul, I think you still need to upgrade to Mojave.
You're the best
More importantly, what editor do you use?
Notepad
@@aerotwist what theme and font?
No theme, just comic sans
First , again
Ooh I'm not sure!
I thought you died...
Well that's grim