Web page loading, parsing, rendering process, web page

Web page loading, parsing, rendering process, web page

To optimize web projects, we first need to know how the browser works. Here we recommendHow browsers workChinese version;

I. Browser

The main function of the browser is to present the selected web resources. It needs to request resources from the server and display them in the browser window. The resource format is usually HTML, it also includes PDF, image, and other formats. The user uses URI (Uniform Resource Identifier of the Uniform Resource Identifier) to specify the location of the requested Resource, and converts the URL to an IP address through DNS query. The workflow of the entire browser:
1. Enter the URL.
2. Search for the IP address of the domain name in the browser.
3. the browser sends an HTTP request to the web server
4. Permanent redirect response of WebSite Services
5. the browser tracks the redirection address. Now, the browser knows the correct address for access, so it will send another request for access.
6. The server processes the request. The server receives the request and then processes the request and returns a response.
7. The server sends back an HTML response
8. The browser starts displaying HTML
9. the browser sends a request to obtain objects embedded in HTML. When the browser displays HTML, it will notice the tags that need to be obtained from other addresses. In this case, the browser sends a request to obtain these files again. These files include CSS, JS, images, and other resources. The addresses of these resources must undergo a process similar to HTML reading. Therefore, the browser will find these domain names in DNS, send requests, redirect, and so on;

The main components of the browser include

1. User Interface: including the address bar, the back/forward button, and the bookmarked directory, that is, what you see is not only used to display the main window of the page you requested;

2. Browser Engine: interfaces used to query and operate rendering engines;

3. Rendering Engine: used to display the request content. For example, if the request content is html, it parses html and css and displays the parsed results;

4. Network: Used to complete network calls, such as http requests. It has platform-independent interfaces and can work on different platforms;

5. UI backend: it is used to draw basic components such as a combination selection box and a dialog box. It has a common interface not specific to a platform and uses the user interface of the operating system at the underlying layer;

6. JS Interpreter: used to explain and execute JS Code;

7. Data Storage: H5 defines the web database technology, which is a lightweight and complete client storage technology;

Ii. Page Generation Process

1. the DNS server searches for the corresponding web server IP address through the domain name;

2. Access the web server through a browser;

This involves tcp three-way handshake and four-way handshake between the client and the server. For more information, see TCP three-way handshake (establish connection) and four-way handshake (close connection) in the previous blog.

3. After server processing is complete, html is returned;

4. parse and load pages in the browser

Parse html to build the dom tree-> build the render tree-> layout the render tree-> draw the render tree:

We know that the browser does not parse all documents to draw them onto the screen, but parses html from top to bottom. when it encounters css, it will enable the thread to download css;

Resolution:
1. Construct HTML into a DOM tree (DOM = Document Object Model). The DOM tree construction process is a deep traversal process: after all the child nodes of the current node are created, the next sibling node of the current node is constructed.
2. parse CSS into CSS to construct the CSSOM tree (CSSOM = CSS Object Model)
3. Construct the Rendering Tree based on the DOM Tree and CSSOM ). Note: The Rendering Tree is not equivalent to the DOM Tree, because something like Header or display: none does not need to be placed in the Rendering Tree.

4. With the Render Tree, the browser can know the nodes in the webpage, CSS definitions of each node, and their subordination.
5. the next operation is called Layout. As the name suggests, it is to calculate the position of each node in the screen. layout render tree.
6. Next, draw, that is, traverse the render tree and draw each node using the browser UI backend layer.

Redraw and rearrange performance optimization:
(1) Reflow (reflux/shuffling): when it finds that a change has affected the layout, the rendering tree needs to be re-computed.
(2) Repaint: changes the background color and text color of an element without affecting the attributes of the element's surrounding or internal layout. This will only cause the repaint of the browser, redraw the element based on its new attributes to make it look new. Re-painting will not bring about re-layout, not necessarily accompanied by re-arrangement;
Reflow takes more time than Repaint, which affects performance. Therefore, when writing code, try to avoid excessive Reflow.

Reflow causes:

(1) page initialization;
(2) when operating the DOM;
(3) The size of some elements has changed;
(4) If the CSS attributes change.

Reduce reflow/repaint

(1) do not modify the DOM style one by one. In this case, it is better to pre-define the css class and then modify the DOM className.
(2) do not put the value of the DOM node in a loop as a variable in the loop.
(3) Use fixed or absoult position for the HTML element of the animation, so modifying their CSS will not reflow.
(4) do not use table layout. A small change may cause the entire table to be re-laid.

3. page rendering affected Css considerations

The css separator is matched from right to left. So, # nav li we think this is a very simple rule that matches the desired element in seconds, so we will find all the li, then determine whether its parent element is # nav. Therefore, note the following when writing css:

Javascript location

If Javascript is used to parse html, page rendering will be blocked. Therefore, we usually place all script labels at the bottom of the page, that is, before the body closes the tag, this ensures that the DOM tree restore has been completed on the page before the script is executed.

Dyeing. Merge scripts as much as possible. The fewer script labels on the page, the faster the load, and the faster the response. This applies to both external and embedded scripts.

Use the method of downloading JavaScript scripts without blocking:
(1) Use the defer and async attributes of the script tag ,;
(2) Use dynamically created script elements to download and execute code and other asynchronous loading methods;

Difference between defer and async:

Defer and async are both asynchronous downloads, but the execution time is inconsistent;

Similarities:

• Page rendering is not blocked when files are loaded;
• The document. write method cannot be called in scripts using these two attributes;
• Attribute values cannot be defined. Attribute names are used only;

Differences:

• Defer is defined in html Version html4.0 and async is defined in html5.0. This will cause different browser versions to support different levels;
• The script for each async attribute is executed immediately after it is downloaded and before the window load event, so the script execution sequence may be disrupted;
• The script for each defer attribute is executed in the original order after the page is parsed, and will be executed before DOMContentLoaded of the document;

Dynamic DOM Creation

function downloadJSAtOnload() {            var urlList = [                "@ViewHelper.Content("/Content/plugin/alert/js/j_alert.js", "20170111")",                "@ViewHelper.Content("/Content/js/swiper.min.js")",                "@ViewHelper.Content("/Content/js/imageview_new.js", "201702271")"            ];            for (var i = 0; i <= urlList.length - 1; i++) {                var element = document.createElement("script");                element.src = urlList[i];                document.body.appendChild(element);            }        }