CS计算机代考程序代写 cache js javascript Java algorithm COMP5347: Web Application Development The Browser and the Rendering Process

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

Critical Path

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)


Critial Path: Hello world!

Hello world!


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



Week 2

document object represents the current page, it is the starting point to access all other HTML elements

Welcome to HTML5!

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



Week 2

Welcome to HTML5!

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

Critical Path: No Style

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


Critical Path: Measure Script

Hello web performance students!



The University of Sydney
COMP5347 Web Application Development
Page 44

Page with embedded CSS and JS

Critical Path: Measure Inlined


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


Critical Path: Measure Script

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?


Critical Path: Measure Script

Hello web performance students!


The University of Sydney
COMP5347 Web Application Development
Page 48

Page with external CSS


Critical Path: Measure Script

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?


Critical Path: Measure Script

Hello web performance students!



The University of Sydney
COMP5347 Web Application Development
Page 50

Page with external CSS and JS


Critical Path: Measure Script

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