One of the important books to study for front end performance is Ilya Grigorik’s High Performance Browser Networking from O’Reilly.
I’m going to summarize some of the key chapters. If you’re interested, pick it up!
The browser: more than a socket manager
Modern browsers do a bunch of things: “. . . process management security sandboxes, layers of optimization caches, JavaScript VMs, graphics rendering and GPU pipelines, storage, sensors, audio and video, networking, and much more.” Fortunately, when designing web applications, we don’t need to see or know about all these functions. However, knowing about how to optimize for the browser can lead to performance improvements.
The browser organizes the sockets into pools and can reuse connections. The browser can then automate TCP reuse, which has performance benefits. The browser keeps the user safe as well by sandboxing connections, enforcing connection limits, and warning users of self-signed certificates. It also keeps users safe by only giving applications access to APIs and necessary resources.
Resource caching
The best and fastest request is a request not made.
With that quote in mind, making sure resources are cached so the request is not made is important. Browsers check if a resource has a cache and reviews if it should be updated. It also makes sure that a user’s cache doesn’t become too bloated. What steps can you take as the application developer? From chapter 13:
Whenever possible, you should specify an explicit cache lifetime for each resource, which allows the client to use a local copy, instead of re-requesting the same object all the time. Similarly, specify a validation mechanism to allow the client to check if the expired resource has been updated: if the resource has not changed, we can eliminate the data transfer.
Browsers also keep track of cookies and sessions so you don’t have to re-authenticate users unnecessarily.
Browser APIs
Grigorik closes the chapter with a rundown of the different features and capacities of XHR, SSE and WebSocket. He points out that one is not better than the other, they all have their place in a complex application and that the key is to learn what they can do and to use the correct one at the correct time.