What are the basic steps that a web browser takes to load a web page when you type the address HTTP www Google com in the address bar?

1. You type maps.google.com(Uniform Resource Locator) into the address bar of your browser and press enter.
2. Every URL has a unique IP address associated with it. The mapping is stored in Name Servers and this procedure is called Domain Name System.
3. The browser checks its cache to find the IP Address for the URL.
   • If it doesn't find it, it checks its OS to find the IP address (gethostname);
   • It then Checks the router's cache.
   • It then checks the ISP's cache. If it is not available there the ISP makes a recursive request to different name servers.
4. It Checks the com name server (we have many name servers such as 'in', 'mil', 'us' etc) and it will redirect to google.com
5. google.com name server will find the matching IP address for maps.google.com in its’ DNS records and return it to your DNS recursor which will send it back to your browser.

6. Browser initiates a TCP connection with the server.It uses a three way handshake

   • Client machine sends a SYN packet to the server over the internet asking if it is open for new connections.

   • If the server has open ports that can accept and initiate new connections, it’ll respond with an ACKnowledgment of the SYN packet using a SYN/ACK packet.

   • The client will receive the SYN/ACK packet from the server and will acknowledge it by sending an ACK packet. Then a TCP connection is established for data transmission!

7. The browser will send a GET request asking for maps.google.com web page. If you’re entering credentials or submitting a form this could be a POST request.
8. The server sends the response.
9. Once the server supplies the resources (HTML, CSS, JS, images, etc.) to the browser it undergoes the below process:
   Parsing - HTML, CSS, JS
   Rendering - Construct DOM Tree → Render Tree → Layout of Render Tree → Painting the render tree
   
10. The rendering engine starts getting the contents of the requested document from the networking layer. This will usually be done in 8kB chunks.
    
11. A DOM tree is built out of the broken response.
    
12. 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).
    
13. At this stage the browser marks the document as interactive and starts parsing scripts that are in "deferred" mode: those that should be executed after the document is parsed. The document state is set to "complete" and a "load" event is fired.
    
14. Each CSS file is parsed into a StyleSheet object, where each object contains CSS rules with selectors and objects corresponding CSS grammar. The tree built is called CSSCOM.
    
15. On top of DOM and CSSOM, a rendering tree is created, which is a set of objects to be rendered. Each of the rendering objects contains its corresponding DOM object (or a text block) plus the calculated styles. In other words, the render tree describes the visual representation of a DOM.
    
16. After the construction of the render tree it goes through a "layout" process. This means giving each node the exact coordinates where it should appear on the screen.
    
17. The next stage is painting–the render tree will be traversed and each node will be painted using the UI backend layer.
    
18. Repaint: When changing element styles which don't affect the element's position on a page (such as background-color, border-color, visibility), the browser just repaints the element again with the new styles applied (that means a "repaint" or "restyle" is happening).
    
19. Reflow: When the changes affect document contents or structure, or element position, a reflow (or relayout) happens.
    

If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Learning Objectives

• Identify basic navigation tools used in a browser.

Now that you are familiar with what the three main browsers look like, where to locate them, and how to open them, it’s time to learn a few of the basic tools to navigate and use a browser window. Even though we are the Chrome browser as an example to show these tools, they can be used in almost any browser.

1. Arrow Buttons. These two arrows navigate the browser back (the left arrow) to a previously viewed webpage or forward (the right arrow) to more currently viewed webpages. These buttons can be pushed more than once to cause the browser to go back or forward further to web pages rendered in a browser session’s history.
2. Refresh Button. This button reloads a webpage. Refreshing will update the information on a webpage if it has changed. If a webpage has not completely loaded, refreshing will reload the page so that it completely renders on the screen.
3. New Tab Button. Opens a new page in the same window when selected. This option allows for many websites to be open but contained within one main window frame. This keeps the desktop from being cluttered with too many open windows.
   

   A browser with many tabs open will look to this.

4. Address Bar. This text field on a browser that identifies the webpage currently being viewed in a browser window. All address bars are located at the top of the browser window. A user can type in a new address to navigate to a new webpage. Each website on the internet is reached by a web address known as a URL (Uniform Resource Locator) that references a specific location on the internet. Type a URL into the address bar of a browser, then press the Enter (Return) key on the keyboard to make the browser load the webpage associated with the URL. As browsers have gotten more sophisticated, most do not require for http:// or even the www to be typed in order for the webpage to be discovered.
5. Resizing and Closing Buttons. As covered in Common Terminology, these buttons allow a user to change the size of a browser window.
   

   a. Minimize Button. Represented by an underscore in the upper right corner of the window. When minimized, the browser will remain on the taskbar but not be visibly open on the desktop.

   

   b. Maximize Button. Represented by a square in the upper right corner of the window. When maximized, a browser window will enlarge a window, typically filling the entire computer screen.

   

   c. Close Browser Button. The button in the upper right corner which is an X will terminate a browser session. This button allows a user to quickly close a browser window when they are finished surfing the internet. Note: If there are multiple tab windows open a browser it will usually ask if you want to close all of the tabs before shutting down the browser.

6. Menu Button. In Chrome, the menu is indicated by three vertical dots in the upper right corner of the browser window (Edge uses three horizontal dots; Firefox uses three stacked horizontal lines). Once the menu button is selected a dropdown menu will appear.
   

   Dropdown Menu. Once the menu button (#1) is clicked, it will display a dropdown menu (#2) with a variety of choices.

Hyperlinks

A hyperlink (also called a link) is a section of text, an image, graphic or icon that is linked to a specific webpage, image, file or object. This is commonly seen in a browser as text, often a blue color.

Once the link is selected, the webpage automatically navigates to the linked webpage, icon, image, graphic or file. This is one of the main tools used when conducting a search on the web.

Bonus Tool

If you are ever asked by a support technician for the version of your browser, a quick way to discover your version is to go to this website http://www.whatsmybrowser.org/. It will tell you the browser type and additional information (like the operating system you are working with on your computer) so you know how your browser is configured.

Now that you are more familiar with web browsers and their navigation, here is an explanation of the bigger picture about how they work. Watch this video to understand how browsers link you to the World Wide Web.