Original: itsOli @ front-end 10,000 hours this article was first published in the public number "front-end 10,000 hours" this article belongs to the author, without authorization, please do not reprint! This article is adapted from "sparrow" private pay column "front end | ten thousand hours from zero basis to easily obtain employment"Copy the code


❗ ️ ❗ ️ ❗ ️

The following link is the latest erratum to this articleThe Old Story of what happens behind the Scenes from URL Input to page presentation


1. What happens behind the scenes from URL input to page presentation? 2. What does a complete HTTP transaction look like? 3. How do browsers render pages? 4. What are the cores of the browser? What are the representative browsers? 5. Refresh the page. Where will JS requests be cached?Copy the code

🙋 on the question “refer to the answer in detail”, please click here to view access!


Foreword: before learning front end, my commonly used browser is sogou, 360, what search engine uses is Baidu. After learning the front end, Google kind of re-opened the door for me to know the new world. But no matter what browser you use, logging on to the web is something every one of us does every day. But have we ever wondered what the web and computers have done for us, from opening a browser and typing a string of characters into the address bar to pressing Enter on the keyboard and the page is revealed to us? And the front-end work that you’re going to be doing which one or several of these things are you involved in?


1 Introduction to related concepts

First, open one of the websites you visit most often, and in the address bar at the top, you’ll see a string of characters. For example, Zhihu:

https://www.zhihu.com/people/Oli-Zhao/columns
Copy the code

The above string of characters, called Uniform Resource Locator (URL), is actually called “web address”.

1.1 Functions of URLS

In the vast web world, our browsers rely on urls to find the exact location of resources.

1.2 Components of the URL (illustrated by the following examples)

https://www.zhihu.com/people/Oli-Zhao/columns
Copy the code

1.2.1 Protocol

https
Copy the code

It’s the way the browser communicates with the WWW, and it tells the browser where to find resources in the web world. Common protocols include HTTP (the most common network transport protocol), HTTPS (encrypted network transport protocol), File (local folder protocol), FTP, and Telnet.

1.2.2 Network Address

www.zhihu.com
Copy the code

Domain names are often referred to as “Domain names”. To facilitate memory, people use semantic Domain names to log in to websites. But it’s important to know that every domain name has an IP address behind it.

IP is the rule protocol followed by every networked computer in the network world to achieve mutual communication. IP can be divided into:

1️ LAN IP:

  • For example, in a shared house, we share a routed WiFi. In fact, all computers connected to this WiFi are in the same LAN. The IP here is the LAN IP.
  • On the same LAN, you can use this IP address to access other machines on the LAN.
  • But strangers can not find you through this IP, because this IP is fake, only in this small circle can be used.

2️ public IP:

  • If you create a website to put on the public network, you need to apply for a public IP address, and you need to apply for a public IP address.

3️ local IP:

  • The current IP of the computer is 127.0.0.1, which stands for itself.

1.2.3 Resource Path

/people/Oli-Zhao/columns
Copy the code

1.3 the DNS

The Domain Name System (DNS) is used to record the mapping between Domain names and IP addresses.

  • DNS function: can let people avoid remembering those tedious strings of numbers;
  • National DNS information can be found on the Internet. Each province has a corresponding IP address segment.
  • Large enterprises have their own DNS servers to store the mapping between domain names and IP addresses.
  • For example, Google DNS server address 8.8.8.8; Well-known DNS server address 114.114.114.114.


2 General process overview

The process from URL input to page presentation is as follows:

  1. Enter the URL in the browser;
  2. The browser searches for the IP address corresponding to the domain name.
  3. The browser connects to the server based on the IP address.
  4. Browser to server communication: The browser requests, and the server processes the request and renders the page.


3 Process overview

3.1 Step 1: Enter the URL in the browser

Enter the corresponding URL in the address bar.

3.2 Step 2: The browser searches for the IP address corresponding to the domain name

In the first step, we have entered the corresponding URL, but the browser itself does not know what the URL is, so from the moment we enter the URL, the browser has to perform domain resolution to find the corresponding IP – DNS resolution is the actual way the browser addresses:

  • Find browser cache – For recently visited sites, the browser caches DNS records for a period of time (if not, then down);
  • Search system cache — Search for DNS information stored in the hosts file on drive C, and search for target domain name and corresponding IP address (if not, go down);
  • Find the router cache (if not, go down);
  • Lookup ISP DNS cache – Lookup from DNS cache information of Internet service provider (such as telecom) (down if not available);
  • If no corresponding IP address is found, the system searches for the IP address of the target URL to the root DNS server. The root DNS server relays the request to lower-level servers until the corresponding IP address is found.

3.3 Step 3: The browser establishes contact with the server based on the IP address

In step 2, the browser finds the server through IP addressing and sends the HTTP request from the user to the server. The server starts processing user requests:

  • The application that handles the request, the Web Server, is installed on each Server;

  • Common Web Server products are: Apache, Nginx, IIS and Lighttpd, etc.

  • Web Server can be understood as a manager, it does not do specific request processing, but will combine the configuration file, the request sent by different users to the Server dedicated to processing the corresponding request program (the corresponding program on the Server starts to process this part of the request, commonly known as the actual background processing work) :

There are many frameworks for background development, but most of them are built in accordance with the MVC (Model View Controller) design mode. It divides the application program on the server into three core components and processes its own tasks respectively to achieve the separation of input, processing and output:

3.3.1 Model

  • Model is to model the business rules and data formats involved in the actual development process;
  • Code applied to a model can be written once and reused by multiple views;
  • Among the three components of MVC, the model has the most processing tasks;
  • A model can provide data for multiple views.

3.3.2 View

  • A view is an interface that users see and interact with;

3.3.3 Controller (Controller)

  • Function: Accept user input and call model (M) and view (V) to fulfill user requirements;
  • Status: The controller is also in the position of a manager — receiving requests from view (V) and deciding which model artifact (M) to call to process the request, and then deciding which view (V) to use to show the data returned by model (M) processing.

🏆 In summary:

  • First, the controller (C) receives the user’s request and decides which model (M) should be invoked for processing;
  • Model (M) then uses business logic to process user requests and return data;
  • Finally, the controller (C) formats the model (M) with the corresponding view (V) and returns the HTML string to the browser.

3.4 Step 4: The browser communicates with the server

In step 3 above, the server returns an HTML string to the browser, which parses it, renders it, and eventually draws the page:

3.4.1 track loading

  • Browsers load an HTML page from the top down;
  • Browser in the loading process, at the same time for parsing, rendering processing;
  • In this process, when the link tag, image tag, script tag is encountered, the browser will send a request to the server again to obtain the corresponding CSS file, image resource, JS file, and execute THE JS code for synchronous loading and parsing.

3.4.2 Parsing and rendering

  • The process of parsing, in fact, is to generate “tree” (Document Object Model Document Object Model);
  • DOM tree is composed of DOM elements and attribute nodes, plus CSS parsed style objects and JS parsed action implementation;
  • Rendering: A visual representation of a DOM tree.

3.4.3 Drawing web pages

  • The browser through rendering, the DOM tree visualization, rendering tree;
  • Build a rendering tree so that pages are drawn in the correct order, and the browser follows certain rendering rules to achieve the rendering of the site page, and finally complete the display of the page.


Postscript: the above is from the URL input to the page display of the whole process, have to admire the computer really omnipotent, human really infinite wisdom. The world of code is rigorous and meticulous, and you get what you put in.

Of course, each of the above nodes contains a lot of knowledge at the front and back end. For you and me at the front end, keep humble and keep learning. We will also explain in detail what front-end engineers need to know about HTTP in the following “JavaScraipt Advanced” section.

I wish you good, QdyWXS ♥ you!