What happens when we type a URL in the browser (In Depth)?

If you are reading this then i would recommend to read this  article first for a clear visibility that what we will understand in depth 🙂

https://jogendras.wordpress.com/2017/07/17/what-happens-when-we-type-a-url-in-the-browser/

Have you ever wondered, precisely – 

  • What happens in the background when we type a URL in the browser?
  • How does a web page life-cycle sequence work?
  • How browser knows, where to send request for the requested page?
  • What happens on the Web Server when a request for a web page comes in?
  • How does the Web server handle the incoming request?
  • How is the HTML that is emitted to the client generated?
  • How browser renders the page on the screen?
  • Etc…

If you are also looking answers of above mentioned questions then this article is definitely for you. In this article, we will take a deeper look at the sequence of events that take place when we visit a ASP.NET page URL –

  1. URL is typed in address bar of the browser
  2. The browser parses the URL to find the protocol, host, port, and path. Ex- http://www.jogendras.com/about/ will be parsed as-
    • Protocol – http
    • Hostname – http://www.jogendras.com
    • URL path – /about
  3. Browser checks cache, if requested object is in cache and is fresh then return response from cache.
  4. The browser looks up the IP address for the entered domain name.  When we want to connect to www. google.com, we actually want to reach out to a server where web application is hosted. One such server is having an IP address of XX.XXX.XXX.XX. Now, if we type http:// XX.XXX.XXX.XX in the browser, this will take us to www. google.com itself. Which means, www. google.com and http://XX. XXX.XXX.XX are nothing but same stuff. But, it is not so. 
    As google has multiple servers in multiple locations to cater to the huge volume of requests. Thus we should let application decide which server is best suited to our needs. Using www. google.com does the job for us. When we type www. google.com DNS services comes into play and resolves the URL to a proper IP address. The DNS lookup proceeds as follows-

    • Browser cache – The browser maintain cache of DNS records for some time. So, this is the first place to resolve DNS queries. If not found in browser’s cache then it makes a system call to underlying OS to fetch the record.
    • OS makes a DNS lookup and replies the IP address to the browser: OS uses the DNS client service to find the IP address- win + r => services.mscDNSCIt first checks in Hosts file and then-
      • OS cache – If not found in hosts file then it checks in OS local DNS cache.
      • Router cache – If above steps fail to get a DNS record, the search continues to your router which has its own cache
      • ISP DNS cache – If above also fails then search moves on to ISP’s DNS server, first, it tries in its cache if not found then ISP’s DNS recursive search comes into the picture.
      • Recursive search – If everything fails then recursive search begins from the root level namesever.  For the DNS enthusiasts – here is a great guide worth reading
  5. As, now browser knows the domain’s IP address so a socket needs to be opened from the user’s computer to that IP number, on the port specified (most often port 80)
  6. When a connection is open browser sends the HTTP request to the host server.
  7. On the server protocol listeners receive protocol-specific requests. In this case we have http request so HTTP/S listener i.e http.sys (Hypertext Transfer Protocol Stack) first listen the http request from network. Now, HTTP.SYS is Responsible to pass the request to the particular web server application i.e IIS or Apache etc.. and send response back to the client browsers… Let’s assume we have .net web application request so request will go to IIS.image1abhijit20jana_634041501195202656_withall
    • HTTP.sys contacts WAS to obtain information from the configuration store
    • WAS requests configuration information from the configuration store, applicationHost.config
    • The WWW Service receives configuration information, such as application pool and site configuration
    • Now we know the application pool so WAS starts a worker process(w3wp.exe) for the application pool to which the request was made.
    • The worker process “w3wp.exe” looks up the URL of the request to load the correct ISAPI (Internet Server Application Programming Interface => a low level unmanged Win32 API) extension. ASP.NET interfaces with IIS through an ISAPI extension. ISAPI is the first and highest performance entry point into IIS. 
    • Depending on the extension ASP.NET routes the request to an appropriate handler that is responsible for picking up requests.

Coming Soon….. 🙂

 

https://docs.microsoft.com/en-us/iis/get-started/introduction-to-iis/introduction-to-iis-architecture

Beginner’s Guide: How IIS Process ASP.NET Request

 

Programming is Easy…

Advertisements

What happens when we type a URL in the browser?

If you are curious to know what happens in the background when we type a URL in the browser then this article is definitely for you. Below are the sequence of events that occurs when we enter a URL in the browser’s address bar-

  1. You type the URL into address bar in your preferred browser
  2. The browser parses the URL to find the protocol, host, port, and path.
  3. Browser checks cache, if requested object is in cache and is fresh, skip to #15
  4. Browser asks OS for entered domain’s IP address
  5. OS makes a DNS lookup and replies the IP address to the browser
  6. Browser opens a TCP connection to the server
  7. When a connection is open, browser sends the HTTP request to the host
  8. The host forwards the request to the server software (most often Apache, IIS) configured to listen on the specified port
  9. Server handles the incoming request i.e server inspects the request (most often only the path), and launches the server plugin needed to handle the request (corresponding to the server language you use, PHP, Java, .NET, Python?)
  10. The server plugin gets access to the full request, and starts to prepare a HTTP response.
  11. Server sends the HTTP response back to the browser
  12. Browser receives HTTP response and may close the TCP connection, or reuse it for another request
  13. Browser checks if the response is a redirect or a conditional response (3xx result status codes), authorization request (401), error (4xx and 5xx), etc.; these are handled differently from normal responses (2xx)
  14. If cache-able, response is stored in cache
  15. Browser decodes response (e.g. if it’s gzipped)
  16. Browser determines what to do with response (e.g. is it a HTML page, is it an image, is it a sound clip?) Browsers often use the MIME-type to determine what default action to do when a resource is fetched.
  17. If response is HTML then browser parses the HTML. A DOM tree is built out of the response HTML. New requests are made to the server for each new resource that is found in the HTML source (typically images, style sheets, and JavaScript files). Go back to step#7 and repeat for each resource. StyleSheets are parsed, and the rendering information in each gets attached to the matching node in the DOM tree. Javascript is parsed and executed, and DOM nodes are moved and style information is updated accordingly. The browser renders the page on the screen according to the DOM tree and the style information for each node
  18. Browser renders response, or offers a download dialog for unrecognized types

 

Hopefully this gives you a better idea of how a URL get proceeds 🙂

 

Programming is Easy…

How to slide HTML element using only JavaScript ?

If you are looking for, how to slide HTML elements using only JavaScript then this article may can help you. Below is an idea to do this-

<html>
<head>


<style>
        .carousel-container {
            margin: 10px;
            width: 1240px;
        }

        .item {
            width: 200px;
            background-color: red;
            height: 100px;
            display: inline-block;
            position: relative;
        }
    </style>


    <script>

        function MoveRight() {
            var containerWidth = document.getElementsByClassName('carousel-container')[0].offsetWidth;
            var itemWidth = document.getElementsByClassName('item')[0].offsetWidth;
            var widthToMove = containerWidth - itemWidth;

            var temp = 0;
            var time = window.setInterval(function () {
                if (temp >= widthToMove) {
                    window.clearInterval(time);
                }
                else {
                    document.getElementsByClassName('item')[0].style.left = temp + 'px';
                    temp += 1;
                }
            }, 10);
        }
    </script>

</head>
<body>


<div class="carousel-container">


<div class="item"></div>


    </div>


    <button class="btnMove" onclick="MoveRight();">MoveRight</button>
</body>
</html>

We can use properties like left, right, top, bottom, margin-left, margin-right, margin-top and margin-bottom as per need.

Programming is Easy…

How to prevent embedding web page inside an iframe?

If you don’t want to embed your web sites/pages into another sites then “X-Frame-Options”  response header is the easiest way to do this.

The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe> or <object> . Web sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.

There are three possible values for X-Frame-Options:

1) DENY :- The page cannot be displayed in a frame.

2) SAMEORIGIN :- The page can only be displayed in a frame on the same origin as the page itself.

3) ALLOW-FROM :- The page can only be displayed in a frame on the specified origin.

Configuring IIS :-

<system.webServer>
  ...

  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="SAMEORIGIN" />
    </customHeaders>
  </httpProtocol>

  ...
</system.webServer>

When an attempt is made to load content into a frame, and permission is denied by the X-Frame-Options header, Firefox currently renders about:blank into the frame. At some point, an error message of some kind will be displayed in the frame instead.

References :-

https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options

http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx

Programming Is Easy…

Web Applications Performance Optimization – 20 Best Practices

Following are the some “best practices” to enhance the performance of web applications:-

Optimizing Images:-

  • Resize: Check whether the pallet size for images is optimal and convert them to PNG format.
  • CSS Sprites: Rearrange the images and combine similar colors for a smaller file size.
  • Keep Favicon.ico small and cacheable:  This process can help in optimizing the rendering speed. It is also suggested to keep the size under 1kb and set expiry header.
  • Use only what you need: be mindful of scaling the images in HTML and using bigger images than absolutely required.

Optimizing CSS:-

  • Style sheets to be at the top: By placing style sheets at the top within the head document, users can let the pages to render in a progressive manner.
  • Avoid choosing @import: it’s important to choose <link> over @import, as @import causes CSS to go to the bottom of the pages in internet explorer.
  • Limit CSS expressions: Use one-time expressions which prevent them from being evaluated repeatedly.
  • Avoid filters: To avoid browser freezes and rendering blocks, consider utilizing degrading PNG8.

Optimizing JavaScript:-

  • Place scripts at the bottom: By using the defer attribute, JavaScript can be forced to the bottom of the page.
  • Remove duplicate scripts: Integrate the script management in the templating system to avoid multiple HTTP requests.
  • Compress JavaScript and CSS: Remove unnecessary code and characters from the script and reduce its size.
  • Make CSS and JavaScript external: We suggest employing external files except home pages for browsers caching. Use in-lining for home pages.
  • Develop smart end handlers: Use event delegation methods to avoid problems of excessive event handlers.
  • Reduce Dom Access: Avoid DOM access with JavaScript to boost page response metrics.

Optimizing Server:-

  • Use Content delivery network: Using a content delivery network is generally thought to be among the best ways for improving the performance and speed of websites for end users.
  • Use Gzip compression: Gzip compression can reduce HTTP requests and improve the response time of websites.
  • Early flush buffer: This allows saving browser idle time by flushing within the head.
  • Prevent empty image src:  This helps avoid server requests from the browser.
  • Use ‘expires’ and ‘cache control’: We suggest the use of the never expire method for static components of the website and for dynamic content the cache control header.
  • Cloud methodology: Cloud computing can play a key role in bumping up the performance of a website. The abundant resources of the Cloud can be a Godsend for resource hungry websites. In addition the “managed” services from most Cloud providers can be of added assistance when it comes to website performance optimization.

References :- http://www.vemployee.com/blog/web-performance-optimization-of-web-applications-20-best-practices

 

Programming is Easy…

What is Proxy, Gatway and Tunnels?

These are intermediaries that participate in the HTTP message exchange and are visible to clients.

1)Proxy:- A proxy is an agent that handles making HTTP requests and receiving responses on behalf of the client. The client’s use of the proxy is deliberate, and it will be configured to use it. It is common, for example, for many organizations to have an internal proxy that users must go through in order to make requests to the Internet. A proxy that modifies requests or responses in a meaningful way is known as a transforming proxy. A proxy that does not modify messages is known as a nontransforming proxy.

2)Gatway:- A gateway receives inbound HTTP messages and translates them to the server’s underlying protocol, which may or may not be HTTP. The gateway also takes outbound messages and translates them to HTTP. A gateway can act on behalf of the origin server.

3)Tunnel:- A tunnel creates a private channel between two connections without modifying any of the messages. An example of a tunnel is when two clients communicate via HTTPS through a firewall.

What is Media Type?

A media type is a format for passing information across the Internet between clients and servers.
It is indicated with a two-part identifier like text/html. Media types serve different purposes. Some are extremely general purpose, like application/json (which is a collection of values or key values) or text/html (which is primarily for documents rendered in a browser).

Other media types have more constrained semantics like application/ atom+xml and application/collection+json, which are designed specifically for managing feeds and lists. Then there is image/png, which is for PNG images. Media types can also be highly domain specific, like text/vcard, which is used for electronically sharing business card and contact information.

The media type itself actually comprises two parts.
The first part (before the slash) is the top-level media type. It describes general type information and common handling rules. Common top-level types are application, image, text, video, and multipart. The second part is the subtype, which describes a very specific data format.
For example, in image/png and image/gif, the top-level type tells a client this is an image, while the subtypes png and gif specify what type of image it is and how it should be handled. It is also common for the subtype to have different variants that share common semantics but are different formats. As an example, HAL (Hypertext Application Language) has JSON (application/hal+json) and XML (application/hal+xml) variants. hal +json means it’s HAL using a JSON wire format, while hal+xml means the XML wire format.