...suddenly frontend developers stopped being those guys that played a bit with colors and pixels, implemented some neat transitions for buttons, here and there...we suddenly became quite important.
Other protocols interesting to us The IP or Network Layer It has a routing function, with the purpose of delivering packets, from the source host to the destination, based on IP addresses. IP: Internet Protocol
TCP or the Transport Layer When a browser opens dialogue with a server, the TCP protocol opens a connection, that allows HTTP data to be transferred reliably TCP: Transfer Connection Protocol TCP’s reliability derives mostly from it being full duplex, which means that communication is bidirectional, and for every packet sent, an acknowledgement is sent back, in the same order. Other protocols interesting to us
HTTP Transaction Types ✱ SINGLE The client makes a single request, gets a single response. ✱ SERIAL Several requests are issued, each of them opening a new TCP connection. (rarely occurs anymore)
HTTP Transaction Types ✱ PARALLEL A different implementation of the keep-alive, multiple TCP connections are open in parallel, to send several requests. ✱ PERSISTENT Introduced with HTTP 1.1 in 2000, and also known as keep-alive, enables the use of a single TCP connection to send and receive multiple requests and responses
And how does an HTTP transaction work? Open Connection DNS Server Web Server DNS Lookup Connect Send Wait Load Client tries to resolve the domain name for the request by sending the DNS query, to which the DNS Server responds with the IP address.
Open Connection DNS Server Web Server DNS Lookup Connect Send Wait Load Client opens TCP connection with IP address of host. Three way handshake occurs. (SYNC, ACK-SYNC, ACK = circa 90 milliseconds.) And how does an HTTP transaction work?
Open Connection DNS Server Web Server DNS Lookup Connect Send Wait Load When three way handshake is successful, finally client sends HTTP request over to server. And how does an HTTP transaction work?
Open Connection DNS Server Web Server DNS Lookup Connect Send Wait Load Client waits for response. Server looks for resource and sends response with first byte of first packet (headers and content of response) And how does an HTTP transaction work?
And how does HTTP transaction work? Open Connection Close Connection DNS Server Web Server DNS Lookup Connect Send Wait Load Further TCP segments are sent. Connection is closed with another three way handshake.
Contributors to Network Latency ✱ PROPAGATION The times it takes for packets to travel from origin to destination ✱ TRANSMISSION Delays caused by media, repetition, packet size, etc. ✱ ROUTER AND OTHER GATEWAY NODES Examination and processing of headers, for example
HTTP/2 goals ✱ Decrease latency and increase speed ✱ Create negotiation mechanisms to elect the protocol to be used ✱ Maintain high level of compatibility with HTTP/1.1 ✱ Support common existing cases of HTTP (such as desktop browsers, mobile browsers, web API’s, web servers, proxies, firewalls and CDN’s)
The following stays the same: What is not changing between protocols? All high level syntax, such as methods, header fields, status codes, URI’s, they all remain.
Establishing an HTTP/2 connection ALPN Based over HTTPS/TLS (in binary) TLS + ALPN TLS Handshake Extension PRI * HTTP/2.0\r\n\ r\nSM\r\n\r\n) 001001010… 001001010… (Conn. Preface)
Each stream... ✱ ...is a unique channel within a TCP connection, through which the request/response takes place Anatomy of an http/2 connection ✱ ...has a weight, that defines what resources are in charge of it ✱ ...may have a dependency to another stream, that indicate what resources are more important than others ✱ ...also have states
A message... ✱ ...is a complete sequence of header and data frames, that map to a request/response Anatomy of an http/2 connection Please notice that this mapping between binary and text, is what makes HTTP/2 work over HTTP/1.x (clear-text) although they’re not compatible, but have compatibility in semantics
The frames... ✱ ...are the smallest individual units of communication involved in the protocol Anatomy of an http/2 connection ✱ ...each of them contain a header section and a data section ✱ ...each of them have a type, a length, a flag and a stream id
The most important fields in the headers frame are ✱ the type: it determines the use of the header Anatomy of an http/2 connection ✱ the flag: it’s associated to the type and determines some characteristic of the header ✱ the stream id: which determines to what stream a frame belongs to, and is transported through
That is known as MULTIPLEXING Anatomy of an http/2 connection The mechanism that allows for several requests to be sent one after another, over the same TCP connection, at the same time that several responses are received, out of order, by combining signals into one.
No sequence streams interchange Stream 5 Stream 3 Stream 3 Stream 1 Directional flow control (adjusting window size) through use of WINDOW_UPDATE ensures that streams are never blocked.
HTTP/2 solution for headers is HPACK ✱ It’s a compression format for efficiently representing header fields ✱ HPACK uses a static predefined and a dynamic table, to associating header fields to indexes
Predictive serving of resources Along with multiplexing, this is one of the most exciting features of HTTP/2, which enables us to predictively push content to a client’s cache
According to caniuse.com 78.1% of browsers currently support HTTP/2 ✱ 5.8% only partially and all of them over TLS (https) Client support Source https://w3techs.com/technologies/details/ce-http2/all/all
According to w3techs.com 11.2% of websites currently implement HTTP/2 Website adoption Source https://w3techs.com/technologies/details/ce-http2/all/all
Over the years, frontend developers have come up with workarounds to the HTTP/1.1 over TCP issues, in order to optimize performance, given that 80% of a response loading time correspond to frontend components.
Inlining resources Grouping resources to minimize requests Inlining consists on embedding a necessary resource right in the HTML, right where you need it. If it’s an image, you can do it on BASE-64. CSS and JS can be embedded using the <br/>and <script> tags respectively.<br/>This technique has negative impact as well<br/>
Domain sharding Opening multiple connections Domain sharding is an attempt at overriding the max-amount of connections at a time, by downloading resources from different domains or aliases. If a site downloads around 50 resources at the front-page, it could have it more or less covered, by establishing TCP connections to 9 different aliases at a time. Again, there is a downside to this too
Other techniques that we should keep Resources Storage Code Optimization Predictive Serving Minifying Source Files Prefetching CDN + Caching Compressing Source Image Optimization Optimizing HTML
Be aware of the flip side too! ● Server push may be pushing resources that are already in the browser. ● Compression rates for larger files are better than those for smaller file sizes!
anfibiacreativa
k1low
aramaki
kentosuzuki
hanhan1978
wadayusuke
xibuka
ykanoh
jacopen
uzulla
yayoi_dd
aiji42
sumiren
tammielis
brad_frost
akmur
afnizarnur
eileencodes
thekraken
lynnandtonic
garrettdimon
panda_program
samlambert
sachag
reverentgeek