How a web browser works

-
DNS resolution
tcp connection
hand shaking



understand with the help of chrome dev tools request pipeline

Comments

Post a Comment

Popular posts from this blog

Understanding focal length and aperture | Become a photographer with Shubham Part-9

-
Image
1. What if focal length Focal length is the distance from the center of the lens to the imaging point 2. Focal length and aperture relation: The aperture is a fraction that describes the ratio of aperture (entrance pupil) diameter to focal length. 3. How to differentiate between lenses: Camera name itself says, like: Nikon 18-55mm f/3.5-5.6 AF-P. Maximum aperture is f/3.5 but it shifts gradually from f/3.5 at the wide end to just f/5.6 at the longer focal lengths. It can be identified by column as well, like:Nikon 50mm 1:1.4G(Max aperture f/1.4). Nows lets get into the details: 1. What is focal length: Focal length is the distance from the center of the lens to the imaging point (focal plane) where the light for the image is collected. When a lens is described as a "50mm lens," it is referring to its focal length. Different focal lengths create different levels of magnification and change the viewing angle of the resulting photograph. As the focal length value decreases, the ...
Read more

HTTP2 vs HTTP1

-
Image
In 2015, Internet Engineering Task Force (IETF) release HTTP/2, the second major version of the most useful internet protocol, HTTP. It was derived from the earlier experimental SPDY protocol. SPDY is a deprecated open-specification networking protocol that was developed primarily at Google for transporting web content. SPDY manipulates HTTP traffic, with particular goals of reducing web page load latency and improving web security Request multiplexing HTTP/2 can send multiple requests for data in parallel over a single TCP connection. This reduces additional round trip time (RTT),  making your website load faster  without any optimization, and makes  domain sharding  unnecessary. Header compression HTTP/2 compress a large number of redundant header frames. It uses the HPACK specification as a simple and secure approach to header compression. Both client and server maintain a list of headers used in previous client-server requests. Binary Protoco...
Read more

Timing tab of chrome dev tools

-
Timing breakdown phases explained Here's more information about each of the phases you may see in the Timing tab: Queueing (no-color, transparent, white ) . The browser queues requests when: The request was postponed by the rendering engine because it's considered lower priority than critical resources (such as scripts/styles). This often happens with images. The request was put on hold to wait for an unavailable TCP socket that's about to free up. The request was put on hold because the browser only allows  six TCP connections  per origin on HTTP 1. Time spent making disk cache entries (typically very quick.) Stalled/Blocking (grey) . Time the request spent waiting before it could be sent. It can be waiting for any of the reasons described for Queueing. Additionally, this time is inclusive of any time spent in proxy negotiation. Proxy Negotiation (grey): Time spent negotiating with a  proxy server  connection. DNS Lookup (Dark green) . Time spent p...
Read more