Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Critical rendering path presentation
Similar to Critical rendering path presentation (20)
Recently uploaded
Recently uploaded (20)
Critical rendering path presentation
- 2. Agenda: What is critical rendering path? Why we need to know critical rendering path? DOM construction DOM partially loading CSSOM CSSOM render blocking Render Tree Layout Analytics on browser
- 3. My reactions when first time I heard of CRP
- 4. What and Why? CRITICAL RENDERING PATH IS THE SEQUENCE OF STEPS BROWSERS GOES THROUGH TO CONVERT HTML, CSS AND JAVASCRIPT TO ACTUAL PIXELS ON THE SCREEN. AND WE NEED TO KNOW THIS TO BUILD PERFORMANCE ORIENTED WEB APPLICATIONS.
- 5. Browser Actions to render content The browser follows a well defined set of steps and it all starts with processing the html and building the DOM.
- 6. Browser Actions to render content First we grab the html and we create the document object model (DOM) . Then we fetch css and we build css object model(CSSOM). Then we combine both and create render tree. Then we have to figure out where everything goes and it happens in layout step. Then finally we paint the layout on actual screen.
- 7. Lets go in depth!!
- 8. The html specification contains a set of rules to process the received data for example the text contain in angle brackets (<html>) as special meaning and is set to be a tag as result. So when browser encounter such tokens browser emits a token called start tag html token, next head tag token then meta and so on.. The entire process is done by tokeniser while tokeniser does this process there is another thing happening simultaneously these tokens are converted into node objects. As the tokeniser emits the relation ship between node objects for example the start tag head token comes inside close tag html token so head tag will be child of html tag. Similarly the meta tag , link tag and so on. Similarly once we consume all tokens we arrive at document object model (DOM) which is a tree structure which captures the content and properties of html and there relation ship between the nodes. Also note that all these objects contains all of their properties for example img node as src attribute. The DOM is the full parts presentation of html mark up.
- 9. Cool.. We have built the DOM.
- 10. DOM partially loading The browser constructs the DOM incrementally so we can take advantage of this to speed up the rendering of your page Whenever you send a search request to Google the server actually does something very clever before it knows what the search results are it immediately returns the header of the page. As this header is same for all the users, this allows the browser to start processing the response and begin constructing the DOM incrementally and potentially even render the header and once search results are ready the rest of the html arrives and then the browsers parses that and displays the content.
- 11. Returning partial html can be good performance optimization.
- 12. CSSOM Now we have constructed DOM, DOM contains the content of the page we should also know how to display the page, to do that we should build css object model.
- 13. The first thing the browser as to do is identify tokens and convert the tokens to node. The first would be body with font-size 16px and the paragraph node. Paragraph is child of body as all the visible content is part of body. Also children of the body node inherits its parents styling rule this is what we call cascading rules and cascading style sheets.
- 14. CSS is render blocking We cant use partial css tree because if we render the css with current styles and later if the style is changed then we would be rendering wrong css. So browser blocks page rendering until entire css is processed.
- 15. Well Done– We generated CSSOM
- 16. Render Tree Now we have DOM and CSSOM need to combine them into render tree. One of the important property of render tree is it only captures visible content.
- 17. To construct the render tree we have start at the root element which in this case is paragraph element. First render tree picks paragraph element and correspondingly checks for any style in CSSOM if it finds style then it creates render tree. Then it navigates to Hello node and no corresponding css but it renders as is, then it goes to span node , span as css rules but if you the rule says display:none, so it ignores span node and styles as render tree just picks visible content. and then moves to student node which is text and renders that.
- 18. Render tree is very similar on what we see on phone
- 19. Quiz Time
- 20. Awesome – you learnt it!!
- 21. Layout - Calculating positions and dimensions Where and how all the elements are positioned on the page is the layout step. Here is a simple render tree and in the layout step body tag will be taken complete width of view port and its Gray in color Next div tag takes 50% of width from its parents body which we can see in Green and then p tag takes 50% of div tag which we can see taken in red color.
- 22. Paint : So the final step is putting pixels on the page.
- 23. Quiz time
- 24. Well Done!! You learnt it guys
- 25. Analytics:
- 28. Follow me on twitter and Linkedin @kavithavikas https://www.linkedin.com/in/kavitha-vikas-43024b19/