What happens when you enter a URL? I hope you understand these 15 knowledge points by the way

foreword

Hello everyone, I'm Lin Sanxin. I believe that you have been asked many times in the interview. "Tell me what happens when you enter a URL in the URL bar?" It's not enough. In fact, this question contains a lot browser and performance optimization. Today I will share with you these 15 knowledge points of

`What happens when you enter a URL?`

1. Enter the URL in the address bar of the browser and press Enter.
2. The browser checks whether the current URL exists in the cache, and compares whether the cache is expired.
3. DNS resolves the IP corresponding to the URL.
4. Establish a TCP connection according to IP (three-way handshake).
5. HTTP initiates a request.
6. The server processes the request and the browser receives the HTTP response.
7. Render the page and build the DOM tree.
8. Close the TCP connection (wave four times).

`Eternal Diamond`

`1. What functionality should a browser have?`

1. Network: The browser downloads various resources through the network module, such as HTML text, JavaScript code, CSS style sheets, pictures, audio and video files, etc. The network part is especially important because it is time-consuming and requires secure access to resources on the Internet
2. Resource management: Resources downloaded from the network or obtained locally need to have efficient mechanism to manage them. For example, how to avoid repeated downloads, how to cache resources, etc.
3, web browsing: This is the core of the browser is the most basic features, the most important functions. This function determines how the resource is turned into a visual result
4. Multi-page management
5. Plug-ins and management
6. Accounts and Sync
7. Safety mechanism
8. Developer Tools The main functions of the browser can be summed up in one sentence: converts the url entered by the user into a visual image.

`2. The browser's kernel`

There is one of the most important modules in the browser. Its main function is to turn all the resources requested by into visual images. This module is the browser kernel, which is usually called the rendering engine.

Here is a summary of the browser kernel:

1、IE：Trident
2. Safari: WebKit . WebKit itself is mainly composed of two small engines, one is the rendering engine "WebCore", and the other is the javascript interpretation engine "JSCore", both of which are derived from KDE's rendering engine KHTML and javascript interpretation engine KJS.
3. Chrome: Blink . Beginning with the Chrome 28.0.1469.0 version released in 2013, Chrome abandoned the Chromium engine and switched to the latest Blink engine (based on WebKit2 - the new WebKit engine launched by Apple in 2010). Blink simplifies the code compared to the previous generation engine. , improve the DOM framework, but also improve security.
4. Opera: In February 2013, it announced to abandon Presto , adopt Chromium engine, and switch to Blink engine
5、Firefox：Gecko

`3. Processes and threads`

1, process: once the implementation of the program, it occupies a unique memory space is operating system executing basic unit
2, the thread: an independent execution units within a process, is the smallest unit of CPU scheduling, running base unit
3. In a process, at least one running thread: main thread. It is automatically created after the process starts
4. A process can run multiple threads at the same time. We often say that the program is multi-threaded . For example, if you use listening to songs, this software is a process, and in this software, you listen to songs with collect songs with 161e770ab3a9c3. , likes and comments, this is multiple thread operations in one process
5. The data in a process can be directly shared , but the data between the process and the process cannot be shared by
6. The JS engine is running on a single thread

`4. The main modules of the browser rendering engine`

1, HTML parser: Explain HTML parser document, the main role is the HTML text interpreted as a DOM tree
2, CSS parser: its role is subject to various elements in the DOM calculated style information for the layout provides infrastructure
3. JavaScript engine: JavaScript engine can interpret JavaScript code, and modify webpage content and style information DOM interface and CSS interface, thereby changing the result of
4. Layout: After the DOM is created, WebKit needs to combine the element objects with the same style information to calculate their layout information such as the size and position form an internal representation model that can express all the information
5. Drawing module (paint): Use the graphics library to draw the nodes of each web page after the layout calculation into image results

`5. Rough rendering process`

The seventh point of the first question, renders the page, builds the DOM tree, and then talks about the general rendering process

1. The browser parses the document from top to bottom
2. When encountering an HTML tag, call the HTML parser to parse it into the corresponding token (a token is the serialization of a tag text) and build a DOM tree (that is, a piece of memory that saves tokens and establishes the relationship between them)
3. When the style/link tag is encountered, the corresponding parser is called to process the CSS tag, and a CSS style tree is constructed.
4. When encountering script tags, call JavaScript engine to process script tags, bind events, modify DOM tree/CSS tree, etc.
5. Merge the DOM tree with CSS into a render tree
6. Render according to the rendering tree to calculate the geometric information of each node (this process needs to rely on the GPU)
7. Finally draw each node on the screen

`Supreme Star`

`6. CSS blocking and optimization`

1. The style in the style tag: parsed HTML parser will not block browser rendering (may cause "splash screen phenomenon"), and will not block DOM parsing
2. CSS style introduced by link: parsed CSS parser will block browser rendering, block the execution of subsequent js statements, and not block DOM parsing
3. Optimization: use CDN nodes to accelerate external resources, compress CSS, optimize CSS code (don't use too many layer selectors)

HTML at the picture below, 061e770ab3aca2 and CSS are parsed in parallel, so CSS will not block HTML parsing, but will block the rendering of the entire page (because CSS and HTML must be parsed together and synthesized in one place to render)

`7. JS blocking problem`

1. js will block subsequent DOM parsing. The reason is: the browser does not know the content of the subsequent script. If the following DOM is parsed first, and the subsequent js deletes all the following DOM, then the browser does nothing. , the browser can't predict what operation is done in the script, for example, operations like document.write, simply stop all, and after the script is executed, the browser will continue to parse the DOM down
2. js will block page rendering. The reason is: js can also set styles for the DOM. After the script is executed, the browser will render a final result to avoid useless work.
3. js will block the execution of subsequent js, the reason is to maintain dependencies, for example: jQuery must be introduced first and then bootstrap

`8. Resource loading blocking`

No matter css is blocked or js is blocked, will not block the browser from loading external resources (images, videos, styles, scripts, etc.)

Reason: The browser is always in one: "send the request first" working mode, as long as it involves the content of the network request, whether it is: pictures, styles, scripts, it will first send requests to obtain resources, as for resources to When to use it after local, it is up to the browser to coordinate itself. This approach is very efficient.

`9. Why CSS parsing order is from right to left`

If it is from left to right:

1. The first time from master node -> child node -> grandchild node 1
2. The first time from master node -> child node -> grandchild node 2
3. The first time from master node -> child node -> grandchild node 3 If you can't match three times, you have to go at least three times: master node -> child node -> grandchild node, which does a lot of useless work.

If it is from right to left:

1. The first time from grandchild node 1, can not find, stop
2. The first time from grandchild node 2, can not find, stop
3. The first time from grandson node 3, can not find, stop In this case, if you can find it as soon as possible and stop it as soon as possible, you can reduce a lot of useless effort.

`the strongest king`

`10. What is redraw reflow`

1. Redraw: Redraw is a browser behavior triggered by a change in element, such as changing attributes such as outline and background color. The browser will repaint based on the element's new properties, giving the element a new look. Redrawing does not bring about a rearrangement, so it doesn't necessarily accompany a rearrangement.
2. Reflow: When the rendering object is created and added to the rendering tree, it does not contain position and size information. The process of calculating these values is called layout or reflow, or reflow
3. "Redraw" does not necessarily require "reflow". For example, changing the color of a web page element will only trigger "redraw", not "reflow", because the layout has not changed.
4. "Reflow" will cause "redraw" in most cases. For example, changing the position of a web page element will trigger "reflow" and "redraw" at the same time, because the layout has changed.

`11. Properties that trigger repaints`

` color background * outline-color

    * border-style                    * background-image                            * outline
    * border-radius                    * background-position                        * outline-style
    * visibility                    * background-repeat                            * outline-width
    * text-decoration                * background-size                            * box-shadow`

`12. Properties that trigger reflow`

` width top * text-align

    * height                    * bottom                                * overflow-y
    * padding                    * left                                    * font-weight
    * margin                    * right                                    * overflow
    * display                    * position                                * font-family
    * border-width                * float                                    * line-height
    * border                    * clear                                    * vertival-align
    * min-height                                                        * white-space`

`13. Common behaviors that trigger redraw reflow`

1. When you add, delete and modify DOM nodes, it will cause Reflow and Repaint.
2. When you move the position of the DOM
3. When you modify CSS styles.
4. When you Resize window (the mobile terminal does not have this problem, because the zooming of the mobile terminal does not affect the layout viewport)
5. When you modify the default font of the web page.
6. When obtaining the height or width of the DOM, such as clientWidth、clientHeight、clientTop、clientLeft、offsetWidth、offsetHeight、offsetTop、offsetLeft、scrollWidth、scrollHeight、scrollTop、scrollLeft、scrollIntoView()、scrollIntoViewIfNeeded()、getComputedStyle()、getBoundingClientRect()、scrollTo()

`14. Optimization scheme for redrawing reflow`

transform instead of top，left and other operations when the element position is moved and transformed
2. Do not use table layout
changing the style attribute multiple times into one operation
4. Using document fragment (documentFragment), vue uses this method to improve performance
5. During the animation implementation, enable GPU hardware acceleration: transform:tranlateZ(0)
6. Create a new layer for the animation element and increase the animation element's z-index
7. When writing animations, try to use requestAnimationFrame

`15. Browser Cache Classification`

Strong cache
1. No request is sent to the server, data is obtained directly from the local cache
2. The status code of the requested resource is: 200 ok(from memory cache)
3. Priority: cache-control > expires
Negotiate cache
1. Send a request to the server, and the server will determine whether to hit the negotiation cache according to the resource in the request header
2. If hit, return 304 status code to notify the browser to read the resource from the cache
3. Priority: Last-Modified and ETag can be used together, the server will first verify ETag , if it is consistent, it will continue to compare Last-Modified , and finally decide whether to return 304

`Epilogue`

I'm Lin Sanxin, an enthusiastic front-end rookie programmer. If you are motivated, like the front-end, and want to learn the front-end, then we can make friends and fish together haha, touch the fish group, add me, please note [Si No]