From graduation to work is over a year and a half hours, in for the first question asked is what happened after the browser enter the URL, so he gave what happened in the process of and work may encounter in the knowledge points and some basic computer knowledge, made a series of if there are bosses to see what’s wrong with, welcome to correct and complement

1. Domain name addressing phase

process

  • The browser first checks the domain name rule corresponding to the host of the local disk. If the IP address is directly used (browser cache, OPERATING system cache, local host file, router cache),
  • Browsers send DNS requests to local DNS servers, such as Telecom and Netcom (ISP DNS cache)
  • The local DNS server queries cached records recursively. If there are cached records, the DNS server returns the cached records. If there are no cached records, the DNS root server is queried
  • If the DNS root server does not find the relationship between the domain name and IP address, the DNS server returns to the local DNS server and uses the domain server to continue the query. This process is iterative query
  • www.xyz.abc.com Query information from the.com domain server to the xyz.hws.com domain server (top-level DNS server/root DNS server)

The problem

1. What is DNS

The essence is an IP and domain name relationship phone book

The Domain Name System (DNS) is a distributed database that maps Domain names and IP addresses on the Internet. It enables users to access the Internet more conveniently without having to remember IP numbers that can be read directly by machines. The process of obtaining an IP address from a host name is called domain name resolution (or hostname resolution).

2, DNS query in two ways: recursive query, iterative query

Recursive query

When the local DNS server cannot answer DNS queries by itself, it needs to query other DNS servers. The query commands are delivered one level at a time in descending order. The obtained query results are returned to the local DNS server one level at a time, and then returned to the client by the local DNS server.

Iterative query

If the local DNS server cannot answer the client’s DNS query by itself, the local DNS server can perform iterative query. Instead of querying the domain name from other DNS servers, the local DNS server returns the IP address of another DNS server that can resolve the domain name to the client DNS program. The client DNS program queries these DNS servers until the query results are obtained. In other words, iterative parsing just helps you find the relevant server, not look it up.

3. What is DNS load balancing?

For the same in the DNS server host name configure multiple IP addresses, in response to the DNS query, the DNS server for every query will with the IP address of the DNS host file record return different analytic results according to the order will lead to different client access machines, make different client access server, so as to achieve the purpose of load balancing . For example, it can be based on the load of each machine, the distance of the machine from the user’s geographical location, etc.

2. Establish the TCP connection

process

  • The browser opens a socket and establishes a TCP connection with the destination IP address port through a three-way handshake

The problem

1. What is the TCP three-way handshake

  • The client first sends a TCP SYN=1, Seq=x packet to the server port, indicating that I am going to send the request.
  • The server replies with SYN=1, ACK=x+1, Seq= Y, indicating that I have received a notification telling the client to send the request.
  • When the client receives it, it returns an ACK=y+1, Seq=z response, indicating that I am ready to send the request for acceptance.
  • The TCP connection channel is established

2. Why do TCP connections need to be established three times

An error is generated to prevent an invalid connection request segment from being sent to the server suddenly

The essence of the problem is that channels are unreliable, but we need reliable connections to send reliable data, which means that data transmission needs to be reliable. The three-way handshake is a theoretical minimum at this point, not required by TCP, but required to transmit reliable data over unreliable channels.

3. What is the difference between TCP and UDP

  • Connection-based and connectionless
  • TCP requires more system resources than UDP
  • TCP ensures data correctness, while UDP may lose packets
  • TCP guarantees data order, UDP does not

4. What does SYN, ACK, Seq stand for

5. What are TCP retransmission, sliding Windows, flow control, congestion control

3. Data processing

process

  • After establishing a TCP connection, make an HTTP(S) request
  • The server processes the HTTP(S) request and returns a response
  • The browser processes the status code and decides whether to read the cache

The problem

1. What are HTTP and HTTPS, and what are the differences?

  • HTTP: Hypertext transfer protocol
  • HTTPS: hypertext transfer protocol using SSL/TLS encryption

The difference between

  • Security: HTTPS encrypts content asymmetrically using SSL or TLS for greater security
  • Different ports: HTTP uses port 80. HTTPS uses port 443
  • Efficiency: The performance of HTTPS is lower than that of HTTP because of encryption

2. Why does HTTPS require a certificate? How is it authenticated?

What is/why is a certificate required

  • All certificates are issued by the Root certificate recognized by the CA

  • To prevent man-in-the-middle attacks and verify server identity

Contraction process:

  • The client sends the message with the SSL or TLS version supported by the browser
  • The server returns a confirmation of the encrypted communication protocol version used as well as the encrypted random number and certificate
  • The client authenticates the certificate and generates a random number for modifying the symmetric encryption algorithm
  • The public key in the certificate encrypts the random number and transmits it to the server. The server decrypts the random number through the private key after receiving it. The subsequent data exchange is encrypted and decrypted through the symmetric encryption algorithm.

Verification process:

  • Whether the certificate expires
  • Whether the CA is reliable (querying trusted local root certificates)
  • Whether the certificate is tampered with (Users use the CA root public key to decrypt the signature to obtain the original fingerprint, and then use the fingerprint algorithm to obtain the new fingerprint of the certificate. If the two fingerprints are different, the certificate is tampered with.)
  • The server domain name matches the domain name on the certificate

3. What is a man-in-the-middle attack?

The attacker, sender and receiver create separate links and exchange the data they receive, making the two sides of the communication think they are talking to each other directly through a private connection, but in fact the whole conversation is completely controlled by the attacker.

4. How to handle and prevent HTTP/certificate hijacking/tampering?

  • Use an HTTPS address and configure the server to redirect HTTP requests to HTTPS as much as possible
  • Apply for an SSL certificate to ensure authenticity and use a certificate issued by a large CA to prevent certificate forgery
  • Use Expect-CT in the header to increase transparency

5. What are the common HTTP status codes?

  • 1XX message, the server receives the request and requires the requester to continue the operation
    • 100 Continue, the client should continue with its request
  • 2XX succeeded. The operation is successfully received and processed
    • 200 success
  • 3XX redirect, further action is required to complete the request
    • 301 permanent move. The requested resource has been permanently moved to the new URI
    • 302 Temporary move, the resource is only temporarily moved, the client should continue to use the original URI
  • 4XX client error, request contains syntax error or request cannot be completed
    • 401 The user is not authenticated
    • 403 Request Rejection
    • 404 no resources
  • 5XX server error. An error occurred while the server was processing the request
    • 500 The server has an internal error
    • The 501 server did not support the requested function and could not complete the request
    • 502 Invalid response

6. What are the application scenarios of HTTP cache types?

  • The browser forcibly refreshes: cache-control: no-cache
  • SPA application: A negotiated cache is used to keep resource files up to date

7. What is strong caching?

  • Mandatory caching is implemented by setting the cache expiration time. Within the expiration time, the cache will not expire and the browser will directly read resources from the browser cache
  • The main way to enforce caching is by setting the Expires and cache-Control fields in the header
  • cache-control
    • The private client can cache
    • Both public clients and proxy servers can be cached
    • Max-age = XXX The cached content will be invalid in XXX seconds
    • No-cache does not allow strong cache, but only negotiated cache
    • No-store does not allow any caching
  • Expires Sets the expiration time, but the weight is lower than max-age

What is negotiated cache

  • A request is made to the server to get the cache identifier. This request will return only the response header, without the body part, which will be stored in the cache
  • Sends the cache identifier to the server. If the comparison is successful, the server returns the 304 status code, telling the client that the cache can be used. If the comparison is unsuccessful, the server directly returns the new resource.
  • Last-Modified / If-Modified-SinceBased on the time
    • When responding to a request, the last-Modified server tells the browser when the resource was Last Modified
    • If-modified-since This field is used to notify the server when the resource returned by the server was last Modified during the last request
  • Etag / If-None-MatchThe priority based on the identifier is higher than last-modified/if-modified-since
    • Etag The unique identification of the resource on the server
    • If-none-match Specifies the unique identifier of data cached by the server client when the server is requested again

9. What is CDN? What is the principle of CDN?

By deploying node servers everywhere in the network, the content of the source site can be distributed to all CDN nodes, so that users can get the content they need nearby

Principle: The local DNS server redirects the final domain name request to the CDN service in CNAME mode

  1. A user enters the domain name of the website to be accessed in the browser and sends a domain name resolution request to the local DNS.
  2. Requests for domain name resolution are sent to the site’s authorized DNS server.
  3. Site DNS server parse found the domain names have been CNAME to www.example.com.c.cdnhwc1.com.
  4. The request is directed to the CDN service.
  5. The CDN intelligently resolves domain names and returns the FASTEST CDN IP address to the local DNS.
  6. The IP address of the CDN with the fastest response time is obtained.
  7. After obtaining the IP address of the fastest node, the browser sends an access request to the CDN node.
  8. If the resource does not exist, the CDN node pulls the resource required by the user back to the source station and caches the resource to the node
  9. The CDN node returns the required resources to the user.

10, What is the status code of option, when is 100, why have option, what is the name of post request without option

  • Option requests are also called preflight requests.
  • Option obtains HTTP request methods supported by the server and checks the performance of the server to ensure the normal completion of subsequent requests
  • Not all CORS will have precheck requests. If the request is simple, the option request will not be sent

11. Simple and complex requests

Requests that meet the following criteria are simple requests, and the rest are complex requests:

  • Request methods: GET, POST, HEAD
  • There is no custom request header except for the following request header fields
    • Accept
    • Accept-Language
    • Content-Language
    • Content-Type
    • DPR
    • Downlink
    • Save-Data
    • Viewport-Width
    • Width
  • There are only three types of content-type values(Content-type is usually set in POST requests, but not in GET requests.)
    • text/plain
    • multipart/form-data
    • application/x-www-form-urlencoded
  • None of the XMLHttpRequestUpload objects in the request are registered with any event listeners(Not verified)
    • The XMLHttpRequestUpload object can be accessed using the xmlHttprequest.upload attribute
  • No ReadableStream object is used in the request(Not verified)

4. Close the TCP connection

process

  • After receiving the HTTP message, the browser closes the TCP connection or reserves the TCP connection for reuse

The problem

1. Disable the four-way handshake of the TCP connection

  • The active party sends fin =1, ACK = Z, seq=x
  • The passive sends ack=x+1, seq=z
  • The passive sends fin =1, ACK =x, seq=y
  • The active party sends ACK =y, seq=x

2. Why do you need four handshakes to close a TCP connection

TCP does not have a half-open transmission method, but a half-closed transmission method

5. Page rendering

process

  • Renderer process parsingHTMLgenerateDOM 树
  • parsingCSSGenerate the CSSOM rule tree
  • Load or executeJavaScript
  • Combine the DOM tree with the CSSOM rule tree to generate a render tree (Render Tree)
  • The main thread traverses the render tree, generating a series of paint records that generate a list of draws
  • Call THE GPU to draw, synthesize the layer and display it on the screen.

The problem

What are threads and processes?

  • Processes are the smallest unit of resource allocation
  • Threads are the smallest unit of CPU scheduling
  • Threads run in processes

2. What processes does the browser (Chrome for example) have? How do processes collaborate?

  • The Browser Process is responsible for moving the Browser TAB forward and backward, working with the address bar and bookmark bar, and handling some of the Browser’s invisible low-level operations, such as web requests and file access.
  • Renderer Process: Responsible for the display of a Tab. Also called the rendering engine.
  • Plugin Process: Controls the plugins used by web pages
  • GPU Process: Processes THE GPU tasks of the entire application

3. Why load JS files at the bottom of the page? (Render blocking)

When the browser encounters a script tag, DOM building is paused until the script completes execution, and then DOM building continues. Each time the JavaScript script is executed, it will severely block the DOM tree construction. If the JavaScript script also operates on a CSSOM that has not been downloaded and built, the browser will even delay the script execution and DOM construction until the CSSOM has been downloaded and built.

4. Is there a one-to-one correspondence between render tree and DOM?

No corresponding

  • When a JavaScript script is encountered during DOM tree construction, DOM parsing should be suspended and JavaScript executed first, because JavaScript may manipulate the DOM nodes that have been generated currently. (Javascript is possible to manipulate the currently generated DOM node)
  • When a JavaScript script is encountered during DOM tree construction, DOM parsing should be suspended and JavaScript should be executed first. At the same time, JavaScript should determine whether CSSOM has been parsed, because JavaScript may manipulate CSSOM nodes. The CSSOM node confirms that parsing is complete and executes JavaScript to create again back into the DOM tree. (So CSS parsing can also indirectly affect DOM tree creation.)

5. What can be done to optimize the rendering tree formation process?

  • CSS resources were introduced before JavaScript resources. The style file should be in the head tag and the script file should be at the end of the body to prevent blocking.
  • Minimize DOM manipulation in JavaScript.
  • Simplify and optimize CSS selectors to minimize nesting layers.
  • When modifying an element’s style, changing its class attribute is the most high-performance method.

What is a render tree?

Once you have the DOM Tree and CSSOM, you need to combine the two to generate the Render Tree, and this process removes the display: node nodes. At this point, the render tree has the element and its style information.

Pseudo-elements are visible in the render tree, although not in the DOM.

8. Reflow and redraw

  1. Layout(backflow) : According to the generated rendering tree, backflow is carried out to obtain the geometric information of nodes (location, size) (generate the Layout(flow), that is, all nodes of the rendering tree are planar synthesis).
  2. Painting: Get the absolute pixels of the nodes based on the rendered tree and the geometry obtained by backflow (paint the layout on the screen)

7. Reflow and Repaint

  • Redraw: the appearance of some elements has been changed, for example, the element’s fill color
  • Rearrange: Regenerate the layout and rearrange the elements.

Redrawing does not necessarily lead to rearrangement, but rearrangement does lead to redrawing

Page initial rendering, which is the most expensive rearrangement

Reduce redrawing and rearrangement methods

  • Don’t do DOM queries when layout information changes
  • Change the property once using cssText or className
  • Using the fragments
  • For elements that are rearranged multiple times, such as animations, use absolute positioning out of the document flow so that his changes do not affect other elements

Rearrangement attributes:

  • Width, height, padding, border, margin, position, top, left, bottom, right, float, clear

Redraw properties:

  • color
  • border
  • box-shadow
  • background

8 requestAnimationFrame.

Tell the browser that you want to execute an animation and ask the browser to call the specified callback to update the animation before the next redraw. This method takes as an argument a callback function that is executed before the browser’s next redraw, usually 60 times per second

9. Event Loop between browser and Node

Event Loop for the browser
  • Execute sync code
  • Performs all microtasks at the end of the current queue
  • Render the UI if necessary (the browser has a 60Hz refresh rate, so update the UI every 16ms frame)
    • Resize/Scroll event (16Ms once, with throttling)
    • Checks whether a media Query is triggered
    • Update the animation send event
    • Full screen operation event
    • Execute the requestAnimationFrame callback
    • The intersectionObserver callback is executed
    • Update the UI
    • If there is still time, requestldleCallback
The node of the Event Loop

Divided into six stages

  • Timers: This phase performs callbacks in the timer queue, such as setTimeout() and setInterval()
  • I/O Callbacks: This stage performs almost all callbacks. But not close events, timers, and setImmediate callbacks.
  • Idle,prepare: Used only internally.
  • Poll: Waiting for new I/O events. Node uses it in some special cases
  • The check: setImmediate() callback is performed in this.
  • Close Callbacks: such as socket.on(‘close’,…) Execute the close callback.
Poll phase

When there is data or connection to the incoming event loop, the poll phase is first entered. In this phase, the poll queue is first checked to see if there are any events in the poll queue. If there are any tasks in the poll queue, the callback is performed in first-in-first-out order. Its callback is pushed to the Check queue. It is also checked for expired timers and pushed to the Timers queue if so. If both are empty, go directly to the I/O callback and execute the callback for the event.

The check phase

The check phase is specifically used to execute the setImmidate callback function.

The close phase

The callback function used to execute the close event

The timer period

Callback function used to execute timer Settings

I/O callback stage

The callback function used to perform most I/O events.

process.nextTick

This hook is not mentioned in the node event loop model, but node has a special queue, the nextTick Queue. When the node event loop enters the next phase, the nextTick queue is checked to see if it has cleared. If not, the nextTick queue is cleared.

cycle

  • Before the cycle starts

    • All synchronization tasks
    • API requests sent in script tasks
    • This section describes how to plan the validity time of a timer synchronization task
    • Executing process. NextTick ()

  • Start cycle

    • Case one
      • Clear Timers Queue, NextTick Queue, and Microtask Queue in the current loop
      • Clear the I/O Queue, NextTick Queue, and Microtask Queue in the current loop
      • Enter the poll phase
      • Clear the Check Queue, NextTick Queue, and Microtask Queue in the current loop
      • Clear the Close Queue, NextTick Queue, and Microtask Queue in the current loop
    • The second case
      • Let’s go to the poll phase
      • Clear the Check Queue, NextTick Queue, and Microtask Queue in the current loop
      • Clear the Close Queue, NextTick Queue, and Microtask Queue in the current loop
      • Clear Timers Queue, NextTick Queue, and Microtask Queue in the current loop
      • Clear the I/O Queue, NextTick Queue, and Microtask Queue in the current loop

Synchronous and asynchronous methods, macro and micro tasks

  1. Synchronization task: A task that will be executed immediately
  2. Asynchronous tasks: Tasks that will not be executed immediately (asynchronous tasks are divided into macro tasks and micro tasks)
  3. Common asynchronous tasks :Ajax,Dom event manipulation,setTimeOut, then methods for Promises,Node reading files

13. Macro and micro tasks

Macro task

(Macro)task: The code that executes on each stack is a macro task (including fetching an event callback from the event queue and placing it on the execution stack).

Macro tasks include:

SetTimeout setInterval postMessage MessageChannel setImmediate(Node.js)Copy the code
Micro tasks

A microtask is a task that is executed immediately after the execution of the current task. That is, after the current task, before the next task, and before rendering.

Microtasks include:

Promise.then object.observe MutaionObserver Process.nexttick (Node.js environment)Copy the code
Operation mechanism

In an event cycle, each operation is called tick. The task processing model of each tick is complex, but the key steps are as follows:

  • Perform a macro task (fetch from event queue if not in stack)
  • If a microtask is encountered during execution, it is added to the task queue of the microtask
  • Execute all microtasks in the current microtask queue immediately after the macro task is executed (in sequence)
  • When the macro task completes, the render is checked, and the GUI thread takes over
  • After rendering, the JS thread takes over and starts the next macro task (fetched from the event queue)

Refer to the article

  • DNS: What do you want to know, from entering the URL to displaying the page?
  • TCP: 30 illustrations: TCP retransmission, sliding Windows, flow control, congestion control
  • HTTP: HTTP details
  • CDN: CDN · Guide to front-end Engineer interview
  • Render trees: Do you really understand how render trees are formed?
  • Browser principles: Close reading – Browser rendering principles