COMP5347: Web Application Development The Browser and the Rendering Process
Dr. Basem Suleiman
School of Computer Science
The University of Sydney
Page 1
Outline
– Review of Browser – How browser works
– HTTP Connection Management – HTTP Caching
– Browser Rendering Process
– CriticalRenderingPath
– DOM and CSSOM
– Render Path Analysis
The University of Sydney
COMP5347 Web Application Development
Page 3
How Browsers Work
http://taligarsiel.com/Projects/howbrowserswork1.htm
The University of Sydney
COMP5347 Web Application Development
Page 4
HTTP Connection Management
http/1.0
https://developer.mozilla.org/en-US/docs/Web/HTTP/Connection_management_in_HTTP_1.x
http/1.1
Server can support this easily, but most browsers don’t
http/1.1
The University of Sydney
COMP5347 Web Application Development
Page 5
HTTP Connections
– Short-lived
– Own connection, sequential requests
– Default in HTTP1.0 (in http1.1 “Connection” header sent with “close”)
– Persistent (keep-alive)
– Reuseconnectiontosendmultiplerequests
– Idle connections will be closed (“keep-alive” header = min time open)
– Pipelining
– Successive requests without waiting for a response
http://sgdev-blog.blogspot.com.au/2014/01/maximum-concurrent-connection-to-same.html
The University of Sydney
COMP5347 Web Application Development
Page 6
Parallel Connections
– All HTTP/1.x connection is serializing requests (without pipelining)
– To improve performance, browser open several connections to each domain, sending parallel requests
– Max. no. of parallel connection small (not DoS attack) – Max.concurrentconnections:
• Chrome (4-23): 6 connections, Chrome (34): 8 connections • IE (8-9): 6 connections, IE(10): 8 connections
• Safari (3-4): 4 connections
• Firefox (4-17): 6 connections
http://sgdev-blog.blogspot.com.au/2014/01/maximum-concurrent-connection-to-same.html
The University of Sydney
COMP5347 Web Application Development
Page 7
Caching in HTTP
– Goal of caching in HTTP
– Sending less requests
• Less round-trips
• “Expiration” mechanism
– Sending less full responses
• Less network bandwidth • “Validation”mechanism
– Level of caches – Server-side
– Client-side (proxy and browser)
– Cache correctness
– Response correctly served from the cache
– Otherwise, communication error or warning
The University of Sydney
Page 8
COMP5347 Web Application Development
Caching in HTTP (cont)
– Expiration Model
– Server-SpecifiedExpiration
• e.g.,Cache-Control:no-cache
• Cache-Control:max-age=60 – Heuristic Expiration
• Assign expiration times using heuristic algorithms – Validation Model
– When a cache has a stale entry that it would like to use as a response to a client’s request, it checks with the origin server to see if its cached entry is still usable
– Entry is still valid, no overhead of re-transmitting the whole response
The University of Sydney
Page 9
COMP5347 Web Application Development
Caching in HTTP (cont)
– ValidationModel
– Last-ModifiedDates
– Entity Tag Cache Validators
• Entity tags are used for comparing two or more entities from the same requested resource.
– Requestorside: • If-Match
– If-Match: “xyzzy” • If-None-Match
• If-Modified-Since
– If-Modified-Since: Sat, 29 Oct 2018 19:43:31 GMT
The University of Sydney
Page 10
COMP5347 Web Application Development
Conditional GET: Browser caching
– Goal: don’t send object if up-to-date cached
– client: date of cached copy in HTTP request
If-modified-since:
If-None-Match:
– server: response with no object if cached copy is up-to-date:
HTTP/1.1 304 Not Modified
The University of Sydney
Page 11
Decide expire time
COMP5347 Web Application Development
Outline
– Review of Browser – How browser works
– HTTP Connection Management – HTTP Caching
– Browser Rendering Process
– CriticalRenderingPath
– DOM and CSSOM
– RenderPathAnalysis
The University of Sydney
COMP5347 Web Application Development
Page 12
Critical Rendering Path
– Webpages to provide good user experience
– Performance (speed), secure, intuitive design, …
– Think of user experience when there’s long delay or non-responding pages
– Web developers write HTML, CSS and JavaScript (JS) and the browser
displays content accordingly
– How the browser render webpages from corresponding HTML, CSS and JS?
– The actual steps browsers take to receive/parse/display data from web server is called critical rendering path
– Understanding the rendering process is important for performance optimization
The University of Sydney
COMP5347 Web Application Development
Page 13
Critical Rendering Path
– Optimized (progressive) rendering prioritize the display of a webpage content to minimize the total amount of time required to display the content
The University of Sydney
COMP5347 Web Application Development
Page 14
Overall Rendering Process
1. Process HTML elements and build the DOM tree
2. Process CSS rules and build the CSSOM tree
3. Combine the DOM and CSSOM into a render tree
4. Run layout on the render tree to compute geometry of each node
5. Paint them on the screen
The University of Sydney
COMP5347 Web Application Development
Page 15
Constructing the Object Model
– Document Object Model (DOM) for HTML
– Each element inside a HTML document is represented as a node
– Attributes and text between a pair of tags are also nodes
– Nested element becomes the child node of its parent node
– The whole HTML document can be represented as a tree called DOM tree
– Constructing the object model
Bytes → characters → tokens → nodes → object model
The University of Sydney
COMP5347 Web Application Development
Page 16
Constructing the DOM
Conversion
• convert bytes to characters
Tokenizing
• Converts strings into distinct tokens (W3C HTML5 standard)
Lexing
• Convert tokens into objects (properties and rules)
DOM
• Construct a tree structure from the created objects
The University of Sydney
COMP5347 Web Application Development
Page 17
DOM Construction – Example
Hello web performance students!
The University of Sydney
COMP5347 Web Application Development
Page 18
Request Supporting Objects
– Requesting support objects happens at the same time while the DOM is constructed
– E.g., to CSS file → constructs the node → send a request to obtain the object specified by the link
– E.g., tag → constructs the node → sends a request to download the image
– After receiving the style sheet file, the browser starts to parse it and build a CSSOM tree
The University of Sydney
COMP5347 Web Application Development
Page 19
CSS Object Model (CSSOM)
– CSSOM defines generic parsing and serialization rules for CSS files, media queries and selectors
– A W3C standard with a working draft as of 17 Mar. 2016 (https://www.w3.org/TR/cssom-1/)
The University of Sydney
COMP5347 Web Application Development
Page 20
Constructing CSSOM
• DOM construction process but using CSSOM rules to construct the corresponding CSSOM
The University of Sydney
COMP5347 Web Application Development
Page 21
Bytes Characters tokens Nodes
CSSOM
CSS Object Model (CSSOM)
– The true structure is organized following the “cascading” principles
– The final set of rules an element has is the result of inheritance and conflict resolving
– Default browser’s styles not shown, only user agent styles (overrides the browser defaults)
– Use tools to see the timeline of CSSOM
The University of Sydney
COMP5347 Web Application Development
Page 22
CSSOM – Example
body { font-size: 16px } p { font-weight: bold } span { color: red }
p span { display: none } img { float: right }
The University of Sydney
COMP5347 Web Application Development
Page 23
Render Tree Construction
– DOM and CSSOM objects are independent
– By merging both DOM and CSSOM
– Contains only the nodes required to render the page
1. Traverse each visible node starting from the room of DOM tree
2. Find appropriate CSSOM rules for each visible node and apply it 3. Produce visible nodes with content and their computed styles
The University of Sydney
COMP5347 Web Application Development
Page 24
Render Tree Construction – Example
The University of Sydney
COMP5347 Web Application Development
Page 25
Layout (Reflow)
The University of Sydney
COMP5347 Web Application Development
Page 26
Layout (Reflow)
– Computes the exact position and size of each object within the viewport of the device
– The output of the layout is a “box model” which captures the exact position of each element
– Last is the paint process which renders the pixels on the screen taking the final render tree
– Time to construct the render tree, layout and paint depends on the size of the document, styles used and the device it is running on
The University of Sydney
COMP5347 Web Application Development
Page 27
–
Render Blocking CSS
HTML and CSS are render blocking resources
– Browser needs to have all of them before it can start to display something
• CSS links near the top of HTML page browser to obtain them early
– CSS media type and queries to specifying some resources non-render
blocking
– Pages with multiple CSS to be used under different conditions
• To print an article/email, all side bars should not appear
• Screen size is too small, less important content can be hidden
– CSS not intended for the current condition will not block the rendering process
The University of Sydney
COMP5347 Web Application Development
Page 28
Render Blocking CSS
– Classify each of the following CSS resources in terms of render blocking when the page is first loaded? Explain your answer
1.
2.
3. 4.
The University of Sydney
COMP5347 Web Application Development
Page 29
– –
– –
Render Blocking CSS
– Default media type is set to “all” if not specified.
– Render-blocking (applies to all media types, the default is “all”)
– Could be both (evaluated when the page is loaded and depends on the
device position when the page is loaded)
– Non-render blocking (only when the page is being in “print” mode)
The University of Sydney
COMP5347 Web Application Development
Page 30
JavaScript and DOM
– JS allows to modify every aspect of a page
– JS may block DOM construction and delay when the rendering
– Depends on location of JS code
– Embedded or inline script→may block DOM construction
– Script tag→DOM construction pauses until the script finishes executing
– External JS → stop constructing the DOM tree and wait for the file to be downloaded and executed→continue constructing the DOM tree
The University of Sydney
COMP5347 Web Application Development
Page 31
Embedded JavaScript Example
document object represents the current page, it is the starting point to access all other HTML elements
Welcome to HTML5!
Hi, I am after the script
individual element’s style is accessed using this syntax:
element.style.property Document.body is a convenient way of returning the body element
The University of Sydney
COMP5347 Web Application Development
Page 32
Output of the Embedded JS xample
The University of Sydney
COMP5347 Web Application Development
Page 33
Global Variable Example
Welcome to HTML5!
Hi, I am after the script
…..
The University of Sydney
COMP5347 Web Application Development
Page 34
Global Variables Example (cont’d)
The University of Sydney
COMP5347 Web Application Development
Page 35
Asynchronous JavaScript
– By default all JS is parser-blocking
– The browser’s behaviour and allow it to continue to construct the DOM and let the script execute when it is ready
– Mark the script using the “async” keyword
The University of Sydney
COMP5347 Web Application Development
Page 36
Outline
– Review of Browser – How browser works
– HTTP Connection Management – HTTP Caching
– Browser Rendering Process
– CriticalRenderingPath
– DOM and CSSOM
– RenderPathAnalysis
The University of Sydney
COMP5347 Web Application Development
Page 37
Measuring Critical Rendering Path (CRP)
– Performance optimization requires good measurement and instrumentation approach
– “You cannot optimize what you cannot measure”
– One approach for measuring CRP is the Navigation Timing approach using an
API
https://www.w3.org/TR/navigation-timing-2/ The University of Sydney
COMP5347 Web Application Development
Page 38
Navigation Timing API
– An interface for web application to access the complete timing information for navigation of a document
– Another W3C working draft
– Browsers are expected to implement to capture the time of various stage
and also to fire relevant events
– JavaScript codes are able to access the timing information and to listen to the event
– “Navigation started by clicking on a link, or entering the URL in the user agent’s address bar, or form submission, or initializing through a script operation other than the ones used by reload and back/forward”.
https://www.w3.org/TR/navigation-timing-2/ The University of Sydney
COMP5347 Web Application Development
Page 39
Overall Navigation Timing 2 Process
https://www.w3.org/TR/navigation-timing-2/ The University of Sydney
COMP5347 Web Application Development
Page 40
Process related with Rendering
domLoading: the starting timestamp of the entire process
domContentLoaded: when browser has finished parsing the HTML document the DOM is constructed.
domComplete: all of the processing is complete and all of the resources on the page (images, etc.) have finished downloading, onLoad event will file
The University of Sydney
COMP5347 Web Application Development
Page 41
Analyzing Critical Rendering Path Performance
– Simple page with only HTML and an image
– A more complex page with HTML, an image and external CSS
and JS file
– An example with HTML, an image and embedded CSS and JS file
The University of Sydney
COMP5347 Web Application Development
Page 42
A page with HTML and image
Hello web performance students!
Round trip time
Content Downloading
Parsing
The University of Sydney
COMP5347 Web Application Development
Page 43
Image downloading starts during page parsing
A Page with external CSS and JS file
Hello web performance students!
The University of Sydney
COMP5347 Web Application Development
Page 44
Page with embedded CSS and JS
Hello web performance students!
The University of Sydney
COMP5347 Web Application Development
Page 45
Performance Patterns
– Critical Resource: resource that needs to be downloaded before rendering the page
– HTML, CSS, and JavaScript
– Critical Path Length: number of round trips to fetch all critical
resources; ignore the initial tcp connection set up time
– Critical Bytes: total amount of bytes required get before rendering the page (sum of the transfer file sizes of all critical resources)
The University of Sydney
COMP5347 Web Application Development
Page 46
Page with only HTML and image
Hello web performance students!
The University of Sydney
COMP5347 Web Application Development
Page 47
One critical resource One round trip
5KB critical bytes
Page with external CSS – Question / Exercise?
Hello web performance students!
The University of Sydney
COMP5347 Web Application Development
Page 48
Page with external CSS
Hello web performance students!
Two critical resources Two round trips
9KB critical bytes
The University of Sydney
COMP5347 Web Application Development
Page 49
Page with external CSS and JS – Question / Exercise?
Hello web performance students!
The University of Sydney
COMP5347 Web Application Development
Page 50
Page with external CSS and JS
Hello web performance students!
Three critical resources Two round trips
11KB critical bytes
The University of Sydney
COMP5347 Web Application Development
Page 51
CRP Optimization
– Variables influence the CPR
– Number of critical resources
– Critical path length
– Number of critical bytes
– General guidelines to optimize the CRP
– Analyse and characterize the critical path
– Minimize number of critical resources (defer, eliminate, async)
– Optimize the number of critical bytes to reduce download time
– Optimize the order in which the remaining critical resources are loaded
The University of Sydney
COMP5347 Web Application Development
Page 52
References
– Randy Connolly, Ricardo Hoar, Fundamentals of Web Development, Global Edition, Pearson
– W3Schools, JavaScript tutorial [https://www.w3schools.com/js/default.asp]
– Ilya Grigorik, Google Developers Web Fundamentals[
https://developers.google.com/web/fundamentals/?hl=en]
– Critical Rendering path
[https://developers.google.com/web/fundamentals/performance/critical- rendering-path/?hl=en]
The University of Sydney
COMP5347 Web Application Development
Page 53
W4 Tutorial: The Browser tutorial + Quiz
Week 5 Lecture: Server-side Development
The University of Sydney Page 54