Browser Networking

In two acts

Michael Lange

ACT I

Browser APIs

1. Requesting data
   1. HTTP
   2. XHR
   3. fetch
2. Streaming data
   1. ReadableStream
   2. Web Sockets
   3. SSE/EventSource
   4. WebRTC
3. The evil that devs do

HTTP/1.1

• The protocol of the Internet.
• The "normal" way to request stuff

XMLHttpRequest

• A way to make HTTP Requests via JavaScript
• Has nothing to do with XML
• The work horse for AJAX
• Asynchronous JavaScript and XML
• Still has nothing to do with XML

Fetch

• The new way to make HTTP requests
• Much better name
• No cancellation*

*Cancellation coming soon

ReadableStream

• Modeled after node.js streams
• Built right into fetch
• Respond to events/chunks

Web Sockets

• Full Duplex streaming
• WS protocol has much less overhead than HTTP
•  

ServerSentEvents

• Server uses text/event-stream
• Browser can connect to this EventSource
• Browser can subscribe to an event
• Or handle every message
• NO WRITES!

WebRTC

• Built on UDP
• Known for P2P capabilities
• Typecasted as an audio/video tool
• Has a data channel for arbitrary p2p data sharing
• Yes, there's already a browser-based bittorrent client built on WebRTC

HTTP/2

• Request multiplexing
• Server Push
• Compressed headers
• Fixes all the things!

HTTP/2 :(

• Spec doesn't require encryption
• All browsers do

Land of Gimmicks

Concatenation and Minification

Resource Inlining

Domain Sharding

When was the last time your datacenter went underground or through a tunnel?

Mobile Network Performance

The latency!

Network Congestion

What happens when only some requests finish?

Be mindful!

It's easy to forget how bad the Internet can be from the comfort of our homes.

Go further

Assuming no friction

The End!