High Performance Browser Networking - Book Review

I will try to make it concise and give my personal opinion.

  • Author: Ilya Grigorik, a Web performance engineer at Google
  • Pages: 408
  • Published: September 2013
  • Amazon rating: 4.6/5
  • My rating: 4.1/5

This piece of writing has many levels to it. Ilya goes over all the building blocks which play part in Web performance. He briefly describes work mechanisms for each block and then based on acquired knowledge shows how to squeeze as much as possible out of it.

The fact that Ilya goes all the way from TCP / Mobile network work principles to Javascript API is both an upside and a downside. Many Web developers don't care about such level of detail and are only worried about steps they can do at the top of the stack, not server side TCP tweaks and peculiarities of different Mobile networks.

Nevertheless, if you are like me and you prefer deeper knowledge I advise you to read the whole book. If what interests you is only the top of the stack and you have few coins to spare then go ahead and read just the latter part of the book. I guarantee that you can find of lot of juicy revelations in there.

Brief summary of book contents:

1. Effects of latency and bandwidth
While bandwidth keeps increasing and all ISPs advertise it latency for the most part remains unchanged and it is latency that is often a speed bottleneck.

2. TCP
Describes basics of TCP and how we can tweak our servers to provide best performance

3. UDP
Tells about UDP and when we should use it over TCP.
Also covers STUN, TURN and ICE, techniques allowing to establish a connection between 2 peers even if they are behind NAT.

4. TLS
History, basic principals and performance implications of using a secure connection.

5. Wireless networks
Intro to wireless networks

6. WiFi
Performance characteristics of WiFi connections

7. Mobile Networks
History, all the different types of mobile connections and their performance.

8. Optimizing for Mobile Networks
Being energy efficient for mobile networks is perhaps as important as being fast.
Keep update checks and uploads to a minimum. Batch your uploads. Make your application work well both with good and bad networks.

9. HTTP history
Well... HTTP history

10. Primer on Web Performance
Human perception of speed. How browsers render pages. Different optimizations browser does to make loading process faster. The way we can give tips to a browser on what resources to load.

11. HTTP 1.x
Principles of HTTP 1.x. Protocol imperfections and the way Web developers overcome them (optimizations).

12. HTTP 2.0
Principles of HTTP 2.0. HTTP 2.0 usages in the wild (or more precisely usage of SPDY).

13. Optimizing Application Delivery
Universal optimization tips (apply to all protocols)
Optimizing for HTTP 2.0. Making applications work with both HTTP 2.0 and HTTP 1.x clients.

14. Primer on Browser Networking
Building blocks of a browser

15. XMLHttpRequest
History, use cases, performance, limitations

16. Server Sent Events
SSE API, use cases and performance

17. WebSocket
WebSocket API, use cases and performance.
What makes WebSocket different from other transports and it's flexibility

18. WebRTC
Use cases, work principles, API, possible complications. Delivery audio/video + custom data over WebRTC.

Not sure how useful it is, quickly wrote it at 4 AM :-)

Popular posts from this blog

Next.js: restrict pages to authenticated users

Image
Many websites have pages that need to be restricted to authenticated users, for example profile pages or dashboards. Next.js web framework comes with a lot of functionality built-in JS compilation, rendering code on server and caching. When it comes to most other aspecs, it's up to a programmer to build, including such needed functionality as restricting access to some pages only to authenticated users. In this article we are going to build just that: a function that augments a page object, that could be used like that: Here's the implementation in TypeScript: In order to make it work on server we are going to need one more utility function fetchWithCookies . When making HTTP request from inside a Web Browser, the browser automatically sends cookies with each requests and then stores new cookies if a response comes in with set-cookie header. On server-side we need to build this feature ourselves, because neither Next.js nor NodeJS make any a
Read more

HTTP server in Ruby 3 - Fibers & Ractors

Image
This is part #2. Head over to part #1 to learn about HTTP in Ruby. Motivation Historically Ruby's been lacking in the concurrency department. Ruby has "native" threads (prior to 1.9 there were only "green"), which means there can be multiple threads controlled by an OS, but only 1 thread can be executed at a time, this is managed via Global Interpreter Lock (GIL). However, native calls and I/O calls can be executed in parallel. During an I/O call, a thread gives up control and waits for a signal that the I/O has finished. This means I/O heavy applications can benefit from multiple threads. In this article we are going to explore different concurrency modes for our HTTP server: Single-threaded Multi-threaded Fibers Ractors Single-threaded Let's start simple and see how a single threaded HTTP server could look like ( full code ): def start socket = TCPServer.new(HOST, PORT) sock
Read more

Using image loader is Next.js

Image
Next.js has managed to kill off create-react-app and despite new rivals (in the face of Remix) is a de-facto way to start new React apps. One of the awesome features that Next.js and its platform Vercel provides is a way to automatically optimize images for different screens to make both user and developer experience much smoother. However, if your app has any non-trivial number of images that are generated by users you may soon end up visiting Vercel's limits page . Turns out that even on Hobby and Pro plans you are limited to 1000 and 5000 images per month, any overage is going to cost you dearly. At this point, you are going to start shopping for alternative image optimization solutions. You can either host your own via Thumbor or imgproxy or use one of the hosted solutions like Cloudinary . Regardless of what service you choose, it needs to be integrated into Next.js. After taking a look at Cloudinary as an example, even their free plan o
Read more