preface

A cliche interview question, after entering the URL to the web page to show what has happened, a simple question, but involves all aspects of our front-end, as well as our common performance optimization problems. Let’s take a look.

Continue to update, suggest collection ~

The whole process

Let’s start with a brief overview of the process

  • The URL is resolved to the corresponding Ip address through Dns

  • The TCP connection is then established using the Ip address

  • Sending an HTTP request

  • Process HTTP requests, which return client data

  • Get the response data and parse it

  • Disabling a TCP Connection

Let’s expand each point by following this process

The DNS

First, a brief introduction to DNS. When we enter a URL request, the DNS server translates the domain name into the corresponding IP address.

There are 13 sets of root servers used to translate all domain names, which are divided into three categories (several dots are several levels of domain names)

1. Top-level domain name test.com 2. Secondary domain name test.cn.com 3. Level 3 domain name test.mail.cn.comCopy the code

For example, when www.baidu.com is accessed, the client will first send a message to the DNS server. Currently, our routes are integrated with DNS. Then DNS sends a message to the root server, the root server sends a message back to.com, DNS sends a message back to.com,.com sends an IP address back to DNS, DNS records its IP address, and finally returns the IP address of the client, which is equivalent to DNS iterative query

But, in fact we are caches DNS, DNS will have query browser cache first, and then query the PC is there, then go to query operators have, this is the recursive query DNS, when to query DNS by recursive way, didn’t find it, will contact the root server to iterative queries.

To quote a diagram from Bilibili

The DNS of the performance optimization point reduces the number of resolution times

DNS queries also take a certain amount of time here, so it can be optimized with two points about DNS

  • Reduced DNS resolution times
    • If all the content of a site’s resources are placed under the same domain, then the whole site will only be searched for DNS once. However, this will lead to the problem of resource queuing during HTTP download, which will increase the response time. Therefore, it is common to find a compromise domain name amount
  • Perform DNS Prefetch, DNS Prefetch
    • DNS Prefetch is an attempt to resolve a domain name before requesting a resource, which could be a file to load later or a link target that the user is trying to open. Domain name resolution and content loading are serial network operations, so this approach can reduce user wait time
    • The HTML link element provides this functionality via the rel attribute value of dns-Prefetch, and then the domain name to cross the href attribute. Repeated DNS pre-resolution on multiple pages increases the number of DNS queries, and dnS-prefetch is only valid for cross-domain DNS lookup

Establishing a TCP Connection

Data transfer process: three-way handshake --------> Data transfer ----------> four-way waveCopy the code

Start with three handshakes. The three-way handshake is actually a process of opening resources and establishing connections.

The first time indicates that the client can send messages, the second time indicates that the server can receive and send messages, and the third time indicates that the client can receive messages

  • The client establishes a connection, sends a SYN packet to the server, and waits for the server to confirm

  • After the server confirms the receipt, it sends an S Y N + ACK message

  • After receiving the packet, the client sends an AC K to indicate that the handshake is successful and data transfer starts

Each time the server processes a request, it closes the connection, and the next time the data is transferred, it has to re-establish the TCP connection, which costs performance

Performance optimization points to reduce handshakes

HTTP 1.1 has persistent connections by default. When a client requests a resource for the first time, the connection is not disconnected, but when the server returns a message, the client continues to send messages. If there is nothing to send, the client finally sends the Connection: close header to the server, which shuts down the server and reduces the need for each new TCP Connection

The client and the server transmit data

The client initiates an HTTP request

The client sends a request to the server for a resource. If the resource is very large and the distance is very large, the response time of the request will be longer.

HTTP optimized resource consolidation and compression

1. Reduce the request times and volume

In the packaging of resources, resources are compressed and merged through Webpack, and some plug-ins are used to optimize the code volume and split resources. For example, tree-sharking, load on demand, etc., or enable HTTP compression (add Accept-encodig: gzip to Request Headers) to reduce the size of the download resource.

Generally, we will optimize the image and reduce its volume. First, we will introduce the advantages and disadvantages of each image format

JPG is used for larger background, rotation, or banner images. Not only can ensure the quality of the picture, but also does not have too large volume, but its disadvantage is that if the picture color contrast is strong, it will lead to a blurred picture, and does not support transparency processing. Png is of high quality but large in size, so it mainly presents small logos or images with simple colors and strong contrast or background images. Svg is small in size and does not distort images when enlargedCopy the code

Then, in the project, some small ICONS, use CSS Sprites to make a one-time request, so as to save the number of requests, you can also base64 encoded images, and then directly write to SRC, the browser will automatically parse, but if the image base64 encoded, The size of the image will be 3/4 of the size of the source file, so if the larger image is encoded, it will become very large. Even if fewer HTTP requests are made, the larger file will not be worth the loss. So base64 encoding is only suitable for very small images

2. Reduce the time spent on a single request and improve the access speed

CDN is used to store static resources. It should be noted that the server domain name of CDN is not the same as the server domain name. In this way, the request image or CSS file will not carry cookies.

The server processes the HTTP request

The server processes the request and returns the response

In order to reduce response time and increase access speed, we have made some optimizations in terms of code size, and one important optimization is to take advantage of the browser’s caching mechanism.

HTTP optimized caching mechanism

Let’s take a look at the browser cache mechanism. Most of the time, we like to call the HTTP cache mechanism the browser cache mechanism, but there are some differences between the two.

  • Memory Cache
  • Service Worker cache
  • http cache
  • Push cache (HTTP 2 新增的)

Then let’s take a closer look at the HTTP caching mechanism

HTTP caching mechanism

Http caches are classified into strong cache and negotiation cache. Negotiation cache is used only when the strong cache does not match.

Strong cache

In HTTP1.0, strong caching takes advantage of expries in the HTTP header to control the expiration of a request. If a request is sent, the server will write an expiration timestamp in response Headers. Browser will according to expries timestamp in the judgement and local time, strong judgment have hit the cache, if hit, directly from the cache access to resources, returns the HTTP status code of 200, will no longer communicate with the server, however, local time may be modified or server of time with the local time is set, so, Cache-control was introduced in Http 1.1 to replace expires. Cache-control: Max-age = 124435450, set a period of time by max-age. During this period, all caches are valid. Cache-control and expries appear at the same time. Except for max-age. If s-maxage and max-age are present at the same time, s-maxage is considered first. If s-maxage has not expired, the cache content is requested to the proxy server, but only for the cache with the resource set to pubic.

Cache-control: max-age=1200, s-maxage=340000 // Note: If the resource is set to public, it can be cached by the browser or the proxy server. If the resource is set to private, it can only be cached by the browser.Copy the code
Prohibit the cache

If we don’t want to cache, we can also set its other two values no-cache and no-store

If cache-control: no-cache is set, the browser Cache is not queried for each request and the Cache is not strengthened. Instead, the server directly checks whether the resource has expired and negotiates the Cache.

If cache-control: no-store is set. The request is sent directly to the server to download the response resource without using any caching policy.

Negotiate the cache (determine if the cache is still valid)

The browser validates the cache information to the server to determine whether the cache is still valid, whether to re-initiate the request, or to read the locally cached resource. If the server indicates that the resource has not changed, the resource is redirected to the browser cache and the network returns a 304 status code.

If negotiated caching is enabled, the response header returns a last-Modified response header on the first request: Fri, 1 mon 2021 12:44:52 GMT, and each subsequent request will have a request header called if-modified-since: Fri, 1 MON 2021 12:44:52 GMT, the value of last-modified is the value returned by the server. After receiving the last-modified value, the server compares the time returned by the server with the time returned by the server. If the time is not changed, 304 is returned. Then a new last-Modified time is added to response-header.

However, in last-Modified mode, if the resource is saved and nothing has been modified, then last-Modified will be changed again. When the resource is requested again, it will be treated as a new resource. Moreover, it can only check for changes in seconds, not milliseconds. If a file is modified in milliseconds, last-Modified does not update.

To solve these two problems, Etag is generated. Etag means that the server generates a unique identifier string for each resource. The value of Etag varies depending on the content of the file. The request header carries an if-none-match with the return value of eTAG, which is then compared by the server. If both Etag and Last-Modified exist, eTAG is used. But eTAG generation requires additional overhead on the server. This is his shortcoming.

Cache optimized browser local storage

In addition to that, we also have the local storage of the browser, where we can put some resources into the browser.

cookie

HTTP is a stateless protocol. When the server receives a request from the client and returns a response, it does not record who the current client is. After the end, the next request received from the client does not know whether the current client is the same as the previous one, so the cookie is born.

The cookie size is only 4KB, and the cookie to be saved is specified by set-cookie in the response header. Domain is the host name of the cookie page. All requests under the same domain name carry cookies

set-cookie: name=lalala; domain=juejin.cnCopy the code

Local Storage

The storage size is 5M (5M stands for string length or 10M bytes). It is generally used to store some base64 strings, js, c ss, and other resources that are not updated frequently

session Storage

This operation only applies to the current session and is automatically cleared after closing, but not refreshed

INdexDB

A new non-relational database is generally not smaller than 200M

Render the page to build the DOM

The browser gets the HTML file, parses the HTML, and then requests the JS it comes across. CSS and other files, and then open rendering, rendering we divided into client side rendering and server side rendering

The client rendering server sends static files to the client. After loading, the client runs JS in the browser, and then generates the corresponding DOM according to the results. The content on the page cannot be found in the HTML source file. So it’s easy to get a blank screen. The solution is to use server-side rendering

Server rendering directly shows a complete web page, and server rendering can also carry out search engine fast display, SEO optimization.

To render an entire web page, several large parts of the browser kernel are needed

  1. HTML parser: Output HTML documents through lexical analysis and generate A DOM tree
  2. Css parser: Parses Css documents, generates style rules, and creates CSSDOM trees
  3. Layer layout calculation module: Layout calculates the exact position and size of each object
  4. View drawing module: draw images of specific nodes and render pixels to the screen
  5. Javascript engine: Compile and execute javascript code

Every page rendering goes through these stages

  • Parsing HTML, in the process of parsing out the various external resources required for page rendering
  • Compute styles, identify and load all CSS styles combined with the DOM tree to generate the render tree (cSSDOM parsing process and DOM parsing process are parallel)
  • Calculate the layer layout. Calculates the size of the element’s position
  • Draw layers according to the DOM code result, convert each layer into a pixel
  • Merge Layers Merge layers and draw them onto the screen using the GPU

When a new element is added to the DOM tree, CSS looks up the CSS style sheet, finds the appropriate style to apply to the element, and then redraws the DOM, so we can optimize the speed of the CSS style sheet lookup and DOM rendering

CSS optimization

CSS rules are matched from right to left, so use fewer label selectors and fewer levels of nesting

Cssdom and DOM tree are merged into render Tree. CSS blocks resources by default, dom parsing is complete, cSSDOM is not complete, and rendering needs to wait for CSSDOM to complete. Therefore, download CSS as soon as possible, such as putting CSS in headers. Or enable CDN to optimize static resource loading speed.

Page rendering optimization

Because the JS engine is independent of the rendering engine, js executes wherever it is inserted into the document, and when the HTML parser encounters a script, it pauses the rendering process and gives control to the JS engine. Js executes the inline JS code directly, while external JS needs to obtain the script and execute it first. After js execution is completed, the control is handed over to the rendering engine to construct CSSDOM and DOM. Loading JS blocks other execution because the browser doesn’t know what changes js will make to the page.

So we can control the js loading time for optimization

There are three ways to load JS.

  • Normal loading. Blocks cSSDOM and DOM builds

  • Async mode. It doesn’t block the browser to do anything else, js loads asynchronously and executes immediately after loading.

  • Defer mode. Does not block the browser and loads js asynchronously, but js execution is delayed. The js file will not be executed until the document has been parsed.

Performance optimization to reduce manipulation of DOM. Reduce redrawing and backflow and use DOM fragments

The js operation modifies the DOM essentially by modifying the renderTree transform. Redraw and rearrange are mainly triggered when dom changes are made. A quick word about redraw and refluxing

Backflow When changing the width, height, or hiding elements in the DOM, the browser recalculates the element’s properties and then draws the layer. This process is called reflux. Also called rearrangement, rearrangement must cause redrawing

Redraw when you change the STYLE of the DOM, such as the background color, without changing the geometric style, and without calculating the position, you simply draw the new style.

So how can we avoid it?

If you change an element frequently, you need to do multiple calculations. This will trigger multiple backflows, so we can set the DOM to display: None. And then display: block after the calculation is complete, so that only one backflow is triggered, using class as much as possible.

In the page rendering time, we js is unable to interact, here leads to the JS event loop mechanism, how to improve the page interactivity,

Event loop

Because js is single-threaded, because involves to do m operation, multithreaded synchronization judgment), but meet timing logic, asynchronous operations such as network request again to block the thread, so, when the code execution is confronted with a task synchronization direct execution, asynchronous task will meet respectively depending on the type of task in the macro task queue and task queue, After the synchronization task execution, view the task queue, if there is a small task, ensure finish all the micro task execution (including micro executing the task of the new task), and then to carry out macro view task queue, execution of a macro task, if at the time of executing macro queue, a new task, the execution of the tasks to execute macro queue, When finished, look at the microtask queue and repeat until the macro task queue is empty.

Macro tasks: setTimeout. setInterval, Ajax, fetch,

Then () mutationObserver.object. Observe

// TODO: is being updated

Disabling a TCP Connection

When the data is complete, the TCP connection is disconnected

// TODO:

Four times to wave

  • The client sends a FIN packet to the server
  • After receiving a FIN packet, the server sends a FIN + ACK packet to the client
  • If the server also wants to disconnect, send a FIN to the client
  • After receiving the FIN, the client sends an ACK to the server, enters time_wait, and closes the server after ensuring that the server receives the ACK

After receiving the ACK, the server shuts it down. If the ACK sent to the server is lost, the server sends a FIN + ACK again. After receiving the ACK again, the client knows that the ACK was lost and sends the ACK again

Here, give it a thumbs up

If there are mistakes, please also point out, common progress ~ ~