how the web works

when we hit a URL say 'https://www.flipkart.com/' , check in the network tab of dev tools, in the response subtab for this request we get a HTML page

• in HTML file we can see some css,js files also

• so when we type a URL like flipkart.com there is a machine in internet that gives all resources [HTML,CSS,JS,IMAGES etc...] to load the website on our browser

why our machine cannot be a server?

• limited CPU,RAM,memory --- results in crashing of device when multiple requests comes

how can we control, lights,fans,gates,cookers etc... from our phone?

• coz these ITEMS have IPADDRESSES -- we are connecting to these items via internet

what happens when we type google.com on our mobile browser?

• we usually get internet connection to mobile, via a mobile tower

• mobile tower gets its connectivity from a phone company

• phone company/ISP takes our request 'www.google.com' and asks DNS [domain name server] to give us IP Address of server to be hit for google website resources

• then once our browser gets that IPAddress it hits the server and gets the resources [check above image]

what happens if we have WIFI in our home?

• if iam using a laptop, i can have a LAN cable connected to it , or i can use WIFI --- both LAN/WIFI comes from a router

• earlier we need telephone line for internet, if we use telephone line for internet we need modem to convert signal from phonelane into internet connectivity signal

• but now-a-days we dont need a phone lane, as we are getting a fiber optic connection from operators/ISP [jio,airtel etc...]

• from ISP we can reach whole INTERNET

how to setup internet in an office?

we will have a central router connected via LAN cables to router of each floor, and computers in each floor are connected via LAN cable/wifi to floor routers

• in our local ISP provider office --- there are big routers from which we get optical fiber connections to our home for WIFI connection

DomainName Hierarchy

DNS itself is a set of servers and in those sets we reach our destination as shown in above diagram

check clearly --- www, download, sales --- these are 3rd lvl domains

for huge websites with more traffic, one server/machine is not enough, so there are big datacenters -- in which there are lots of servers together serve such huge website

if the server we require is at another part of world, the ways to get data from that server are:

• via satellite --- our request goes to satellite and satellite gets data from server and sends back to us

  • problem here is distance is too high from us and satellite, so data will reach us slowly

  • this is wireless communication -- so what if there is bad weather? -- so this mthd is not reliable

• optic fibers laid from under OCEANS --- fastest way to get data [light speed]

ISP Architecture

• multiple local ISP’s connect to regional ISP [both local,regional ISP’s are same companies jio,airtel …]

• if we wanna block websites / or any data in a country , tat can be done from regional ISP’s

• Global ISP’s are governed by a central org, tat decides wat information can be distributed from one part of globe to another part

• 

  the data tat we get as reply, will come in small parts called packets from different possible paths and assemble at requested place as response

• why should i know all these as a webdev —-

  • eg: if we are doing a payment in website and wat if some payment successful msg packets didnot reach us correctly, our site still get payment processing screen and we will suffer

  • so as a developer, we have to know how data flows, and at wat data hop points we can optimise the performance for our website

Wat happens in browser after hitting a URL even before our request reaches our router

• first browser checks its cache , to see if any info related to ipaddress is present

  • if present request is not sent to sever

• browser also checks if any info related to ipaddress is present in service worker cache, if yes no request is sent to server

• if not found there too, browser checks operating system

  • fun fact: if we tweak host,ipaddress mapping of google.com to our website in our OS hosts file, our website occurs if we hit google.com ,instead google’s website

• now even we are having smart routers , which also cache the data

  • once we restart the router , those caches refresh

at ISP level we have lot of caching happening

if server responds with 304 , means —- there is no changes , use cached data

**imp note :**when a web application makes request, only 6-8 number of parallel requests can be made not more than tat , if there are more requests they will be queued by browser

what companies like google and netflix are doing for performance:

• google introduced peering concept

  • google kept its servers at different parts of world for quick access

    • and even in each locations for more quick access , to reduce hops, google server connected directly to more local ISP’s, so tat it can avoid data going to regional ISP and then going to another local ISP

    • 

• netflix, instead buying its own datacentres at different parts of world, it its using servers/datacenters from ISP’s ; to host its data[movies etc..] for faster streaming

ICANN governs all DNS related things, domain—ipmappings etc…

WHOIS —— this body does privacy protection ——

• using a domain , usually we can know all details of person who owns it

• if we dont wanna display tat details, WHOIS does privacy protection

• so plz know —— we have to register our website domain on our name , if we start one!!!

• we have to renew our domain name timely as it will be expired, after expiry if some one else bought tat domain name , we will be in pblm

• so from WHOIS site , when can know when a website is registered , updated etc…

wat happens b/w ISP and server

• TCP request happens:

• SSL handshake is done —- for https websites

• real http get request happens

• make sure the bareminium website data which we are gonna show to user just after url is hit, have less size so tat it loads faster and comes in 1st response itself , so that user also gets good experience, and we can load full data in consequent responses

• 

SSL handshake

• changing cerificate,clientkey for secured connection and encryption

• after client sends hello, server sends its certificate

• client—publickey is sent with every request from then on

• 

what browser will do once it gets HTML,CSS,JS etc…

how our webpage renders? [interview qn]

1] loading necessary data [html,css,js,assets …]

• when we request a page —> we get HTML —> from there css,js get requests are made

  • css is render blocking —- until css loads nothing is shown on UI

• javascript is PARSER BLOCKING —- next lines of code will not be executed until js parsing happens

• building of DOM happens

using css —- CSSOM is created

• in CSSOM creation — comparision happens what css properties should apply to a element based on priority,inheritance,specificity etc…

2]JS execution is done

• jsengine has only single main thread, so it is blocked from loading till executing JS

• JS code is loaded,parsed ——- then AST tree is created with right set of tokens

• then AST tree code is compiled into BYTE code and executed

• 

3]merge of DOM and CSSOM into rendertree happens

• • 

4]layout happens

where on screen wat element has to be placed

5] painting happens,

• wat css should be painted at wat place on screen

• 

6] compositing happens

• • which layers has to be visible and which layers has to be hidden

    * eg: when showing a dialog/popups, having z-index,

imp note:

• in below image in styles tab we can see all the styles tat we try to apply for an element

• in computed list we can see the actual styles tat were really applied

Communication protocols

• these are guidelines,architecture for how 2 systems should communicate

• 

• 

• req,response structure is defined by http/https protocols

• every new HTTP/HTTPS request , requires a new TCP connection

  • TCP has 3 way handshake

  • while server is sending SYNACK —- it sends a number to client

  • client sends ACK — saying i acknowledge the number u had given

  • TCP guarentees all data will be reached from server to client,no pkt is missed

  • in HTTPS there is extra SSL/TLS[transport lyr security] handshake also happens

    • here client encrypts data using public key sentby server,a session key and sends data to server along with sessionkey

    • server also sends back encrypted data only

• Youtube mostly uses HTTP/3 — QUIC protocol —- uses UDP

  • UDP tranfers data superfast even if some data is missed

  • no handshake happens here — so it is super fast

  • header compression is also done here

  • improves performance, lessens network congestion —- coz no pblm even some pkts are missed

• websockets:

  • for livechat, livedatastreaming, googlechat, comments, likes, analytics dashboard

    • does HTTP upgrade —- first established HTTP connection and upgrades it to websocket[WS]

    • once WS connection is established there is fullduplex communication, means no new connection is required for every request/response

SMTP:

• mails are delivered via SMTP protocol via SMTP server

• here we dont have to get a response to a request , we just have to send something tats it

  • FTP:

• transfers heavy files

• upload/download files

• used a lot