URL to a page showing the input, which occurred in the middle of what?

When the interviewer asked, would you please tell me "URL to the page display from the input, which occurred in the middle of what?"

The old me is the kind of answer:

After entering the URL, the server initiates a request, if successful, then get the network response, the browser parses the resource, and finally render it onto the page.

Specific steps:

1. First build request

2. Find the cache, if the cache hit, the direct use of cache resources

3. Otherwise, DNS resolution, converts domain names into the corresponding IP address

4. Establish a TCP connection

5. Send an HTTP request

6. If you successfully get the network response, the browser start parsing and rendering

7. HTML interpreter parses the HTML into a DOM tree

8. Meanwhile CSS interpreter parses CSS document styleSheets

9. Create a tree layout, layout calculation

10. Integration layer, show page

At first glance, it seems nothing wrong, but the problem is that, if the interviewer to ask questions for a point that I could automatically switch to a black question mark face, or a [just] any woman of silence performance.

But no, after learning of the "working principle and practice of the browser's" course and other reference material Bing teacher, if we encounter the interviewer asked, I believe I can keep an elegant smile.

Additional knowledge

Processes and threads

• The process is the smallest unit CPU resource allocation (the smallest unit is able to have the resources and run independently);
• A thread is the smallest unit of CPU scheduling (threads is to establish a program running on the basis of unit processes on).

Chrome's multi-process architecture

The latest Chrome browser includes:

• A browser (Browser) main process
• A network (NetWork) process
• A GPU Process
• Multiple rendering process
• Multiple plug-in process

These processes function:

Browser process:

• It is mainly responsible for the display interface, user interaction, child process management, while providing storage and other functions.

Network processes:

• Network resources are mainly responsible for the page to load before running as a module inside the browser process, only recently independent, to become a separate process.

The rendering process:

• The core task is to convert HTML, CSS and JavaScript for the user can interact with the page layout engine V8 JavaScript engine and Blink are running in the process, by default, Chrome will create a rendering process for each Tab label. For security reasons, the rendering process is run in a sandbox mode.

GPU process:

• When Chrome was released no beginning GPU process. The original intention was to use the GPU to realize 3D CSS effects, but then the page, Chrome UI interface are selected using the GPU rendering, which makes GPU become popular browser requirements. Finally, Chrome on its multi-process architecture also introduces GPU process.

Plug-in process:

• Mainly responsible for running plug-ins, plug-ins and easy due to the collapse, so it is necessary to isolate plug-ins through the process to ensure that the plug-in process crashes will not affect the browser and the page.

URL to a page showing the input, which occurred in the middle of what?

With some additional knowledge, we can look at this issue, URL to the page display, which can be described as the middle of the process is very complex from a user input, I will navigate the process and rendering processes to explain, man of few words said, directly on the flow chart.

Navigation stage

A substantially complete navigation process can be summarized as follows:

1. Url and enter a user input;
2. Browser process checks url, assembly agreement to form a complete url;
3. Between the browser processes by communication (IPC) to process the network request to the url;
4. After receiving the network processes the request url check whether the local cache cache the requested resource, if the resource is returned to the browser process;
5. Otherwise, look for the existence DNS cache, and if not, the first DNS resolution, IP address request to the server to obtain the corresponding domain name;
6. Determining whether the request protocol is HTTPS, if so, the need to establish a TLS connection;
7. Otherwise, direct TCP connection is established, the client through a three-way handshake to establish a connection with the server;
8. Browser sends an HTTP request to the server;
9. After the server receives the request information, generates response data according to the request information, distributed network processes;
10. Network processes parse the response data;
11. If the response status code row jump information includes a class 301, the browser the address of the Location response header field, splicing and jump, continue navigating; if the response line 200, the browser can continue showing process the request;
12. If the value of the Content-Type field is judged browser for downloading type, the request will be submitted to the browser download manager, while the URL request navigation process to an end. But if it is HTML, then the browser will continue to navigate the process.
13. Allocation process for the browser to render the page. Open the render process strategy a new page using is: Under normal circumstances, open a new page will use a separate rendering process; if you open the page B from A page, and A and B belong to the same site, then B page multiplex A the rendering process of the page; if other cases, the browser process will create a new rendering process is B.
14. Browser process issues a message "to submit documents" to the rendering process, the rendering process to receive, process and establish a network "pipe" to transmit data. After the document data transfer is complete, the rendering process will return the message "confirm to submit" to the browser process. Browser process after receiving the message "Confirm Submit", the updated browser interface state, including the state security, URL address bar, forward and backward history of the state, and update Web pages.

Rendering stage

A complete rendering process can be broadly summarized as follows:

1. The rendering process converts HTML content to be able to read the DOM tree structure.
2. The rendering engine CSS style sheet into styleSheets browser understandable, calculated style DOM node.
3. Create the layout tree, and calculates layout information elements.
4. Hierarchical tree layout, and generating a hierarchical tree.
5. Draw a list generated for each layer, and submit it to synthetic thread.
6. Synthesis of the thread layer into tiles, and the tiles thread pool rasterization into a bitmap.
7. Synthetic thread sends drawing commands DrawQuad to block the browser process.
8. Browser process generates pages according DrawQuad message and displayed on the monitor.

Here, great service and not rolled together. The interviewer may continue to ask more questions N, only well prepared, the interview process will not seem so humble.

Furthermore, a problem will be able to understand thoroughly, it can also help us to better carry out future work, after all, we are faced with more than just an interview.

Continue to ask the interviewer

The interviewer went on to say: Yes, for this process is the macro grasp, that I will visit you a few specific knowledge of it!

Browser-related

• Why do so many sites open second speed quickly?
• How to log status is maintained?
• JavaScript implementation mechanisms related issues in the browser
• 。。。

Reference: "Theory and Practice your browser '

TCP protocol

• Can you talk about the three-way handshake and four wave
• 。。。

Reference: ask God protocol soul ternary --TCP

Interviewer, do not ask me four times and waved three-way handshake

HTTP protocol

• Please tell us what HTTP status codes
• Learn HTTP / 2 do? What improvements compared to the previous agreement have?
• 。。。

Reference: Q HTTP soul

Front-end performance optimization

• Tell us about your browser cache
• What is the local storage of the browser it?
• Repainting understand how you are returning?
• In response to this whole process, you have thought we can to optimize performance in what areas it?
• 。。。

Reference: "front-end performance optimization theory and practice"

Where knowledge involved is really too much, we really need the system in-depth study, but in this job Season Four gold, three silver, and if we prepare quite late, you can pick some knowledge points, such as HTTP-related, front-end performance optimization of in-depth research, as well as TCP three-way handshake protocol and fourth wave, we certainly can not escape, other arrangements can be put back put off learning, if not asked, you can say no or simply to understand, remember to keep smiling.