Chapter A, The Importance of Frontend Performance
"This book offers precise guidelines for reducing that 80–90% of end user response time"
Chapter B, HTTP overview
- HTTP Request: Accept-Encoding: gzip,deflate
- HTTP Response: Content-Encoding: gzip
- If the browser has a copy of the component in its cache, but isn’t sure whether it’s still valid, a conditional GET request is made. ( basically the browser is not sure if it is still valid because the component doesn't have Expires header)
- the browser sends a GET request with "If-Modified-Since: Wed, 22 Feb 2006 04:15:54 GMT", the server responds "304 Not Modified" with "Last-Modified: Wed, 22 Feb 2006 04:15:54 GMT" header.
- if the content has modified, the server responds "200 OK with content".
- ETag & If-None-Match headers are other ways for Conditional GET, will talk about them later.
- as mentioned before, the browser sends Conditional GET because the component doesn't have Expires header, add Expires header to save this round trip.
- each HTTP request required opening a new socket connection (too much)
- browsers can make multiple requests over a single connection by using Connection: keep-alive header. The server also responds with Connection: keep-alive.
- The browser or server can close the connection by sending a Connection: close header.
- in old browsers, a browser sends a request, wait for the response and then sends another request, Pipelining has been defined in HTTP/1.1 which allows for sending multiple requests over a single socket without waiting for a response. ( better performance, not supported in old Browsers.