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
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
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!
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...
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.
Why in the end of 2024 we still need to worry about this bs and our devices can't just render everything in a blink now? Isn't it weird? I mean, the increase in raw chip and network performance is enormous, yet we still need to optimize layout and js. Is it the future we all waited for?
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
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.
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
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
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
Boy am I glad I ran across Ilya Grigorik he lays out everything so beautifully pure gold.
Incredible presentation. This deserves more views.
one of the best video about CRP
One of the best presentation on CRP!!!
Best explanation till today 🥂
Thanks
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!
Best video on CRP
agree
this is the best 😄, Thanks Ilya!
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...
Excellent talk
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.
Best video ever ❤️
Is this content still applicable to this date?
Can you please share this ppt with us ?
would we very helpful
LLya , is linode better then google compute?
where can I find the last part of this talk ?
For any future viewers, it's the video directly after on the uploaders page.
ua-cam.com/video/rpNXWxMyzHQ/v-deo.html
How do you stream the HTML to the browser?
e.g. node js streams
Why in the end of 2024 we still need to worry about this bs and our devices can't just render everything in a blink now? Isn't it weird? I mean, the increase in raw chip and network performance is enormous, yet we still need to optimize layout and js. Is it the future we all waited for?
Good one
thank you very much!!!
Can you create iTunes podcast, please?
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.