Browser input URL to the page to present the detailed process (front-end interview must ask)

1. Find IP 2. Construct HTTP request 3. Build DOM tree 5, build CSSOM tree 6, build rendering tree 7, Layout backflow 8, painting repainting 9, page rendering 10. Interview questions are often asked about relevant knowledge

1. Find the IP

After entering IP in the browser, the browser needs to find the server IP address for the URL domain name. The browser first checks whether there are records in the cache. The search sequence of the cache is as follows: 1. Search the browser cache first, then the system cache, and finally the router cache. 2. If no record exists in the local cache, check whether there is any record in the hosts file. 3

Construct the HTTP request

3. HTTP response

Wrap so hungry TCP packets, can in turn after the transport layer, network layer, data link layer and physical layer, and finally to the server, the server to respond to the request and returns the corresponding data after obtaining the server code browser, open a stack memory in the memory to provide code execution environment, at the same time distribution of a main thread to line to parse and execute the code

Create a DOM tree

Create the CSSOM tree

The CSSOM tree is created in the same way as the DOM tree. After the DOM tree is created, the internal and external styles are loaded and the styles are inlined to build the CSSOM tree.

6. Build the render tree

7. Layout backflow

At the time of drawing the page for the first time, a maximum backflow will be carried out. According to the above rendering tree, the exact position of the device when it is used is calculated, the layout will be carried out on the page, and then the page will be rendered. (HTML text, images, video and audio resources, etc.)

8. Repainting

9. Page rendering

After all the above steps are complete, the pixels are sent to the COMPUTER’s GPU (graphics card) to start drawing the page



At this point, the user will see a page

10, Interview often ask related knowledge

1. Operations and solutions for backflow and redrawing

An operation that produces reflux:

Render the page for the first time (content, text, etc.). 2, browser window size changes. 3. Change the position and size of page elements (pictures, text). 4. Add and delete visible elements. 5, some style attributes change to cause element changes (such as border, underline, CSS pseudo-class) above are better understood as page elements change to cause backflow

The operation that produces a redraw:

Changing element attributes, changing the appearance (color) of an element without changing the layout

Backflow and redraw can result in dom redrawing, increasing the burden on HTTP requests, servers, and browsers, so how do you avoid them

How to avoid and reduce backflow and redraw:

2, style set, try to use external style sheets and external JS, read and write separation, which is conducive to the server and browser cache 3, can use CSS without JS operation style: 4. Position is absolute or fixed 5 for elements that need to be rearranged more than once on the page. Do not use table layout as much as possible (the width and height of a table with no fixed width is determined by the last line, and calculation will be repeated if the last line is not reasonable)

2. Three ways of JS delay loading

// This code should be placed before the  tag (near the bottom of the HTML file)
<script type="text/javascript">  
   function downloadJSAtOnload() {  
       varelement = document.createElement("script");  
       element.src = "defer.js";  
       document.body.appendChild(element);  
   }  
   if (window.addEventListener)  
      window.addEventListener("load",downloadJSAtOnload, false);  
   else if (window.attachEvent)  
      window.attachEvent("onload",downloadJSAtOnload);  
   else 
      window.onload =downloadJSAtOnload;  
</script>  
Copy the code

Cookie and session localStorage and sessionStorage

Common: These are used to cache browser or server resources, so that clients can load resources directly on their next request

The difference between cookies and sessions:

Cookies and sessions are used to store user information. Cookies are stored on the client, sessions are stored on the server and the information stored on the client is not secure and may be stolen. Sensitive information is generally stored in the server in session. Cookies are generally sent to the server in the HTTP header when the request is made. The size is limited, usually 4k

Cookie, LocalStorage and SessiontorAge

1, life cycle cookie can set cache expiration time, default is browser closed cache expiration LOCALStorage unless manually cleared, or permanent storage sessionStorage is only valid in the current webpage, webpage or browser closed invalid

2, store data cookie store 4K data, relatively small localstorage and sessionTORage can store about 5m information, relatively large

3. HTTP request cookie is in the HTTP request header every time, so it can only store 4K data, because it needs to frequently transfer LocalStorage and Sessiontorage to store in the browser

4. Easy to use cookies need to be encapsulated by themselves. The native cookie is not friendly and the other two can use the native interface and can also be encapsulated here

At present summary of these, the back will continue to meet in the text behind the summary, welcome to pay attention to the collection, the late continue to update this article is their own understanding according to the data, and write the imperfect place I hope you until the big man, very grateful!!