An interactive version of this diagram is available with JavaScript enabled.
The example starts with a call to example.com/cat.html
The client (browser) makes a GET request for the resource (cat.html)
The webserver serves the GET request: it sends a response
with code 200
(“success”) and cat.html as the payload.
The browser parses the HTML page and tries to display it.
The page contains CSS and an image, so the browser requests
each of these with new GET requests.
The server responds to each request with
code 200
(“success”) and the requested file as the payload.
The CSS arrives and is applied (the page goes pink). The
image arrives and is displayed (the cat appears).
An interactive version of this diagram is available with JavaScript enabled.
The example starts with a call to example.com/cat.html
The client (browser) makes a GET request for the resource (cat.html)
The webserver serves the GET request: it sends a response
with code 200
(“success”) and cat.html as the payload.
The browser parses the HTML page and tries to display it.
The page contains CSS and an image, so the browser requests
each of these with new GET requests.
The server responds to each request with
code 200
(“success”) and the requested file as the payload.
The CSS arrives and is applied (the page goes pink). The
image arrives and is displayed (the cat appears).
In this example, the same Keyshape diagram is loaded twice (each into its own
<object> element) — each running independently of the
other. ksd.js and ksd.css are being called only
once, for the page.
SVGs exported from Keyshape with JS embedded, and loaded here (as external
resources) with <object> tags.