Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what are the basic knowledge of browser". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "what are the basics of browsers" can help you solve the problem.

The main functions of the browser:

Is to render the web resource selected by the user, which needs to request the resource from the server and display it in the browser window, usually in the format of HTML, including PDF, image, and other formats. The user uses URI (Uniform Resource Identifier uniform Resource Identifier) to specify the location of the requested resource.

The main components of the browser include:

1. The user interface-including the address bar, back / forward buttons, bookmark directory, etc., that is, the part you see other than the main window that displays the page you requested.

two。 Browser engine-the interface used to query and operate the rendering engine.

3. Rendering engine-used to display the requested content, for example, if the request content is html, it is responsible for parsing html and css, and displaying the parsed results.

4. Network-used to make network calls, such as http requests, with platform-independent interfaces that can work on different platforms.

5. UI backend-used to draw basic components such as combined selection boxes and dialogs, with a general interface that is not specific to a platform, and the underlying user interface of the operating system.

6. JS interpreter-used to interpret and execute JS code.

7. Data storage-belongs to the persistence layer, browsers need to store all kinds of data similar to cookie on the hard disk. HTML5 defines web database technology, which is a lightweight and complete client storage technology.

The old question, everyone should have been asked this kind of question during the interview, the answer on the Internet is the same, let's have a more in-depth understanding.

The user enters url, for example, where http is the protocol, is the network address, and indicates which computer the required resources are on. The general network address can be a domain name or an IP address, here is the domain name. Domain names are used to facilitate memory. A string of numbers can easily be misremembered, but in order for the computer to understand the address, it needs to be parsed into an IP address.

If you have visited the url, you will first go to the browser cache to query whether there are any files to be requested (the browser cache is to save a copy of the resource locally).

When the browser finds that the requested resource already has a copy in the browser cache, it will intercept the request, return a copy of the resource, and directly end the request without going to the source server to download it again. If the cache lookup fails, you will enter the network request process.

Whether the request is requested on the server or in the browser cache is indicated in the network.

DNS records for a domain name are cached locally: browser cache and operating system (OS) cache.

1.2.1 browser caching-the browser caches DNS records for a period of time. It usually ranges from 2 to 30 minutes. When looking for the browser cache, it looks in order: Service Worker-- > Memory Cache-- > Disk Cache-- > Push Cache.

Service Worker:

Is a separate thread running behind the browser and can generally be used to implement the caching function. If Service Worker is used, the transport protocol must be HTTPS. Because request interception is involved in Service Worker, the HTTPS protocol must be used for security. Unlike other built-in caching mechanisms in browsers, Service Worker caching gives us free control over which files are cached, how to match the cache, how to read the cache, and that the cache is persistent.

Memory Cache:

The cache in memory mainly contains the resources that have been crawled in the current page, such as styles, scripts, pictures, etc., that have been downloaded on the page. Reading data in memory must be faster than disk, although the memory cache reads efficiently, but the cache persistence is very short and will be released with the release of the process. Once we close the Tab page, the in-memory cache is freed.

Disk Cache:

The cache stored in the hard disk is slower to read, but everything can be stored on disk, which is better than Memory Cache in terms of capacity and storage timeliness.

Of all browser caches, Disk Cache coverage is basically the largest. Based on the fields in the HTTP Herder, it determines which resources need to be cached, which can be used without a request, and which are expired and need to be rerequested. And even in the case of cross-site, once the resource with the same address is cached by the hard disk, the data will not be requested again. Most of the cache comes from Disk Cache.

Push Cache:

Push Cache (push cache) is the content of HTTP/2, and it will only be used when none of the above three caches are hit. It exists only in the session (Session), is released once the session is over, and the cache time is very short, only about 5 minutes in the Chrome browser, and it does not strictly execute the cache instructions in the HTTP header.

1.2.2 system cache-if the required record is not found in the browser cache, the browser will make a system call to get the record in the system cache (gethostbyname in windows).

1.2.3 Router cache * *-then the previous query request is sent to the router, which typically has its own DNS cache.

1.2.4 ISP DNS cache * *-the next thing to check is the server where ISP caches DNS. The corresponding cache records can generally be found here.

1.2.5 Recursive search * *-your ISP's DNS server starts a recursive search with the domain name server, from the .com top-level domain name server to the Facebook domain name server. In general, the DNS server will have the domain name in the .com domain name server in the cache, so the matching process to the top-level server is not necessary.

If the url has not been accessed, the DNS domain name resolution will be done.

Like domain names, IP addresses are used for network identification, and domain names and IP addresses are mapped one by one.

DNS:Domain Name System domain name system (based on RFC specification) is a distributed database that maps domain names and IP addresses to each other on the World wide Web, which makes it more convenient for users to access the Internet without having to remember the IP strings that can be read directly by the machine.

DNS parsing process:

1.3.1 there is a DNS client running on the user host, that is, our PC or mobile client is running the DNS client.

1.3.2 the browser extracts the domain name field from the received url, which is the host name of the access, for example, and transmits the host name to the client of the DNS application.

1.3.3 the DNS client sends a query message to the DNS server containing the host name field to be accessed (including some column cache queries and distributed DNS cluster work).

1.3.4 the DNS client will eventually receive an answer message containing the IP address corresponding to the hostname.

1.3.5 once the browser receives the IP address from DNS, it can initiate a TCP connection to the HTTP server where the IP address is located.

There may be multiple port numbers under the domain name, corresponding to different network functions, so after DNS resolution, the browser will also obtain the port number.

TCP connection is a familiar three-time handshake good friend, four waving is a passer-by.

TCP connection process:

1.5.1 the server is ready to accept external connections through socket,bind and listen, and the server status is Listen.

1.5.2 the client initiates an active connection by calling connect, causing the client TCP to send a SYN byte, telling the server client the initial sequence number of the data to be sent in the connection (to be established), and the client status is SYN_SENT.

1.5.3 the server acknowledges (ACK) the customer's SYN and sends a SYN of its own, which contains the initial sequence number that the server will send data over the same connection.

1.5.4 the client acknowledges the ACK and SYN of the service, sends the ACK to the server, and the client status ESTABLISHED.

1.5.5 the server receives the ACK and the server status ESABLISHED.

Now that we have successfully shook hands and connected to the Web server, the browser will issue a HTTP request based on the resolved IP address and port number.

1.6.1 the http protocol sends a request to the server. In the process of sending the request, the browser will transmit data to the Web server in the form of Stream (stream), telling the Web server which Web application in the server to access Web resources.

1.6.2 after receiving the data transmitted by the browser, the server begins to parse the received data. When parsing the contents of the request, the server knows which Web resource in the application the client browser wants to access, and then the server reads the contents of the Web resource and transmits the read content to the browser in the form of Stream (stream).

TCP connection termination process:

1.7.1 one end first calls close, which becomes the active shutdown end, and sends FIN segments to the other end, indicating that the data has been sent. At this time, the end status FIN_WAIT_1 is actively closed.

1.7.2 the passive closed end receives the FIN, and the FIN is confirmed by the TCP. The ACK is first sent to the active closed end and passed as a file Terminator to the receiving application process (after it has been queued for any other data received by the application process), because the reception of FIN means that the receiving application process has no additional data to receive in the corresponding connection, and the receiving end status is CLOSE_WAIT. The active shutdown end receives the ACK status and changes to FIN_WAIT_2.

1.7.3 after a period of time, the application process that receives the file Terminator calls close to close the socket and sends FIN to the active shutdown end with the receiver status of LAST_ACK

1.7.4 the active shutdown terminal acknowledges the FIN, changes its status to TIME_WAIT, and sends the ACK to the receiver. The receiver receives the ACK shutting down the TCP, and the active shutdown terminal also closes the TCP after a period of time.

When the browser gets a html file, it loads from top to bottom and parses the rendering during the loading process.

Parsing:

1. The browser parses the HTML into a DOM tree, and the construction of the DOM tree is a deep traversal process: all the children of the current node are built before the next sibling node of the current node is built.

two。 Parse CSS into CSS Rule Tree.

3. Rendering Tree is constructed based on DOM tree and CSSOM. Note: Rendering Tree rendered trees are not the same as DOM trees, because something like Header or display:none does not need to be placed in the rendered tree.

4. With Render Tree, browsers already know which nodes are in the page, the CSS definition of each node, and their dependencies. The next step is called Layout, which, as the name implies, calculates the position of each node on the screen.

The next step is to draw, which is to traverse the render tree and draw each node using the UI back-end layer

Render:

1. The receiving server returns the html file.

two。 The browser starts to load the html code and finds that there is a < link > tag inside the < head > tag that references the external CSS file. The browser sends a request for the CSS file, and the server returns the CSS file.

3. The browser continues to load the code in the < body > section of html, and the CSS file is in hand, so you can start rendering the page.

4. The browser finds a < img > tag in the code that references a picture and makes a request to the server. At this point, the browser will not wait for the image to be downloaded, but will continue to render the later code.

5. The server returns the image file, because the picture occupies a certain area, which affects the layout of the following paragraphs, so the browser needs to go back and re-render this part of the code.

6. The browser finds a < script > tag that contains a line of Javascript code. Run it quickly.

7. The Javascript script executes this statement, which commands the browser to hide some < div > (style.display= "none") in the code. Suddenly such an element is missing, and the browser has to re-render this part of the code.

8. Finally, when < / html > arrived, the browser burst into tears.

9. Wait, wait., wait, wait

10. The browser gathered all of you < div > < span > < ul > < li >, "everybody pack your bags, we have to start all over again." The browser requests a new CSS file from the server to re-render the page.

This is the end of the content about "what are the basics of browsers". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.