Critical rendering path - Crash course on web performance (Fluent 2013)
Vložit
- čas přidán 5. 07. 2024
- Slides: www.igvita.com/slides/2013/flu...
From the ground up introduction to the field of web performance optimization: network bottlenecks, the document parsing and evaluation pipeline, visual layout, javascript, and more. We'll investigate each in order and then pull it all together through case studies and hands-on examples. - Věda a technologie
one of the best video about CRP
00:37 what's so critical about the CRP, a very simple example 01:21 first part 02:01 done incrementally, HTML5 parser 03:03 waiting on CSS 04:12 CSS, in 2 packets, we got the first line 05:09 finally we got the last line 05:26 next, we actually take this two trees, render trees 06:28 in fact there is no one render tree 07:05 so the idea of the CPR is exactly this 07:32 what is layout and paint 08:00 the second strategy is actually much better 08:32 a fun example, google search page, we immediately send you the header response
========================================
JavaScript
========================================
10:02 javascript, it actually makes the things more more complicated 10:32 JavaScript can query the DOM and can also query the CSS object model 10:49 here is an example 11:20 , an arbitrary piece of something 11:40 literally it block the DOM construction and everything else 11:55 we have to fetch the JavaScript and we have to execute it before we can proceed, JavaScript at the bottom, CSS at the top 12:45 synchronous block the parse, asynchronous scripts, example, google + 13:43 the async keyword is basically a promesse, its a handshake 15:04 here is an example, JavaScript can block both the DOM and CSS 16:22 put in together, so that will helps us to speed up the initial rendering of the page 16:46 let's say we want to break the one second mobile barrier 19:18 here is an example, we have to start inlining things 20:32 a lot of JavaScript enhancing experience, jQuery 21:52 DevTools
Incredible presentation. This deserves more views.
08:20 sending HTTP-headers immediately after receiving a request, before analyzing a query
09:09 deliver CSS that only needed for rendering the particular page as soon as possible, deliver later CSS for the rest part of the site.
34:00 aggregate scroll events and defer them.
35:00 split a long running function, execute it partly, then yield control to the browser for updating the screen, and finish the rest part of the function
One of the best presentation on CRP!!!
Boy am I glad I ran across Ilya Grigorik he lays out everything so beautifully pure gold.
Best explanation till today 🥂
Thanks
this is the best 😄, Thanks Ilya!
Excellent talk
thank you very much!!!
Best video ever ❤️
at 28:12 when you said “they viewed less stories” talking about facebooks experiment on showing 30 fps instead of 60, i was surprised a lot!
we’re there stories in 2014??? i thought they first appeared in 2018 in instagram!
Good one
Such a gem! But could anybody clarify one thing for me: don't browsers wait for loading all the external styles to construct CSSOM? According to the presentation it seems like dividing styles into multiple stylesheets is good for performance, but I'm not sure if I understood this part correctly...
Best video on CRP
agree
LLya , is linode better then google compute?
Very interesting your PDF but Chrome developer tools are changed so fast... this is a big problem for everybody and I don't understand why they have this approach.
Can you please share this ppt with us ?
would we very helpful
Is this content still applicable to this date?
where can I find the last part of this talk ?
For any future viewers, it's the video directly after on the uploaders page.
czcams.com/video/rpNXWxMyzHQ/video.html
Can you create iTunes podcast, please?
How do you stream the HTML to the browser?
e.g. node js streams
So basically the render tree phase is where browser developers stopped refactoring their code and said look web developers this part is a very large code and it works and honestly we don't how it works so let say its a magical box okay......lets move on XD.....Great Talk
Another note from this video is: framework people, what the hell are you doing?
I'm still wondering why they can't take advantage of P2P networks to solve latency issues on cell phone networks. Especially in areas where even 3g is not available like Bolivia and Cameroon.JUst cache popular websites and save on a P2P network. Then connect to the P2P network using WIFI. THis is one way for Satellites services on sailboats to solve this problem....Just cache the web. I"m liking ANdroid's new API for WIFI networks and HTML 2.0 --> UDP.