After the client gets the code to render the page from the server, [opens a GUI rendering thread, parses the code from top to bottom, and finally draws the corresponding page]
The top-down rendering of code is synchronous, but some operations are also asynchronous
Load CSS resources.
1. Meet the style tag, inline styles, and hand them synchronously to the GUI rendering thread.
2. Meet the link tag style; Asynchronously open up an HTTP network request thread, without waiting for the resource request to come back, GUI rendering thread continues to render down, CUI rendering thread after the synchronization operation is completed, the back network resources based on HTTP request for parsing;
3. Meet @import import style; Synchronization opens up a new HTTP network request thread to request the resource file, but the GUI thread is blocked and not allowed to render down until the resource file has requested hi
A browser can create a maximum of 4-7 HTTP threads under the same origin.
Loading of JS resources;
1. Requests via script resources are synchronous by default and must be based on HTTP network threads. After the request comes back and is handed to the JS renderer thread, when the JS renderer thread completes, the GUI renderer thread can continue rendering down. So the script tag blocks GUI rendering by default,
2. Script async will first open an HTTP network thread to load the resource file, while the GUI rendering thread will continue rendering (by default, the SYNCHRONIZATION of the GUI thread is changed to asynchronous), but after the JS resource request comes back, the GUI rendering thread will be interrupted, and the REQUESTED JS will be rendered and analyzed first. The GUI thread rendering is then continued.
3 Script defer is similar to async in that a new HTTP network request is opened to load the resource file, while the GUI rendering thread is changed to asynchronous; The difference, however, is that defer, like Link, is the JS code that waits for the GUI rendering thread to complete before rendering the parsing request.
Meet img tags or audio or video
Encounter these resources, will also send HTTP network thread, request to load the due resource file, do not hinder GUI rendering [asynchronous], when the GUI rendering thread is completed, will return the request to the resource information for rendering analysis;
Webkit browser preparsing; Chrome’s htML-preload-scanner scans SRC link and other attributes of the node to find external resources for preloading, avoiding long waiting time of resources and waiting time of resource loading, and realizing pre-loading and separation of loading and execution
Page rendering steps:
2.CSSOM tree. After all the style resources are loaded back, I will generate style tree 3 by rendering style code in the order of introducing CSS. Generate a rendering tree: Combine the generated DOM tree with the CSSOM tree to generate a rendering tree (the display: None attribute is not processed). The base generates a render tree that calculates their position and size in the device viewport; 6. Painting: Work out the Painting steps for each level and start drawing the page.
Performance optimization based on the underlying rendering mechanism of the page;
Optimization when generating DOM tree;
1. Reduce unnecessary level nesting, 2. Do not use non-standard tags,
Optimization when generating the CSSOM tree
1. Use import as little as possible, (blocking rendering of GUI rendering thread), 2. If CSS style is small, use inline style directly, 3. If link is used to combine all resources into one and compress as much as possible (reduce the number of HTTP requests and render CSS without calculating dependencies) 4. CSS selectors are shorter (because CSS renderers are from right to left) 4. Put link in csS-style head (purpose: start requesting resources as soon as the page is loaded, while GUI thread generates DOM tree, CSS and other resources are preloaded)
Optimization of JS resources;
1. Script tags are placed at the bottom of the page as much as possible (to prevent GUI thread rendering); Use async or defer for partial script tags; 2. Async is no matter the JS dependency. If a resource is obtained first, it will perform the Dana rendering under this resource first. 3. Defer is the same as Link. After all the defer requests come back, dependency rendering is performed in the import order.
For img
1. Lazy loading. Do not request image resources to be loaded when the page is loaded for the first time. 2. Image loading using BASE64 does not directly load images, and rendering loading images will be faster, (caution: but in webpack engineering projects can be used, because it is based on file-loader can automatically convert BASE64d)
DOM refluxing and redrawing;
DOM redrawing: element styles change but width, height, position, size, etc. DOM backflow: changes in the size or position of elements (when the page layout and geometry information changes) trigger a new layout, causing the render tree to recalculate the layout or render; For example: delete DOM elements, element position changes, element size changes; The content of the element changes (for example, the text changes and the image is replaced by another image of a different size); When the page is first rendered (this cannot be avoided); Because backflow is based on viewport size and element position and size, browser window size changes can also cause backflow
Backflow must redraw, and redraw does not necessarily backflow
The optimization of performance points is focused on reflux.
The render queue mechanism of modern browsers;
When a line of code that changes the style is encountered in the context operation, the browser is not immediately notified to render. Instead, it is placed in the render queue, and then it sees if there is more code to modify the style. If there is more code to modify the style, it is put in the queue. Waiting until there is no code changing styles or “get meets a line of get styles” refreshes the browser’s render queue mechanism. Look at the following code:
box.style.wdith="100px"
box.style.height="200px"
box.style.position="absolute"
box.style.top="100px"
Copy the codeThe above code causes only one backflow
box.style.wdith="100px"
box.style.height="200px"
box.offsetHeight // All operations that fetch styles will refresh the render queue
box.style.top="100px"
Copy the codeSo the above code causes two backflows
How to avoid multiple reflux optimization methods
1. Separate read and write, separate the code to modify the style from the code to obtain the style
Try not to get the style when changing the style
Using document fragmentation causes only one reflux;
Layering before layout: Only the current layer is rerendered.
HTTP network layer performance optimization;
Product performance optimization scheme: 1. HTTP network layer performance optimization 2. Code compilation layer performance optimization Webpack 3. 4. Safety optimization of XSS + CSRF 5. Data burying point and performance monitoring,
The process from entering a URL to the page being displayed
Step 1 URL parsing:
The client server’s data communication, the transport protocol, is responsible for transporting this information
Domain name:
Top-level domain name: qq.com Level-1 domain name: www.qqq.com Level-2 domain name: sports.qq.com Level-2 domain name: kbs.sports.qq.com
The port number
Port number: is used to distinguish the different services on the server (different services are actually simply understood as a project) port number between 0 and 65535
Url encryption:
Encryption mode: EncodeURL and encodeURLCompoment are common things to encode URLS, so these two methods should be paid special attention to in practice. They are both used to encode urls. The only difference is the range of characters encoded. The encodeURL method does not encode SCII letters, numbers,! @ # $& * () = : /,; ? +’, the encodeURIComponent method does not encode ASCII letters, numbers,! *()’ so encodeURLCompoment has a larger encoding range than encodeURL.
Usage scenarios of URL encoding
1. If it’s just an encoded string that has nothing to do with the URL, use escape. 2. If you need to encode the entire URL and then use that URL, use encodeURL. Such as
encodeURI("http://www.cnblogs.com/season-huang/some other thing"); / / encoded into "http://www.cnblogs.com/season-huang/some%20other%20thing"; // where space is encoded as %20, If you use encodeURLComponent, the result will be "HTTP %3A%2F%2Fwww.cnblogs.com% 2fseason-huang %2Fsome% 20Other %20thing" The entire URL is no longer usable;Copy the code3. When you need to encode url parameters, the best way to encodeURLCompoment,
The second part is cache checking
The cache location
If there is a Cache in the dis Cache, use it. If there is no Cache, send a network request for common refresh (F5) : Since TAB is not closed and memory cache is available, it is used first, followed by disk cache flush (Ctrl +F5) : browser does not use cache. Therefore, all requests are sent with cache-control :no-cache headers, and the server returns 200 and the latest content
Strong and negotiated caching
Strong Cache: Expires/cache-control
1. Browser’s handling of clear cache; Based on the response header returned when the resource is first requested
Cache-control: cache-Control :max-age=2592000 After the first resource is received, the request is sent again to read the information in the request.
Cache-control has a higher priority than Expires
Strong Cache and negotiated Cache are the Expries and cache-contor set by the server. If there is no local Cache, it is taken from the server.
Note on cache: Generally, strong cache is not set for HTML pages [to prevent the client from obtaining locally cached pages after the server updates the file, so that the page cannot be updated in time] the project will do this: if there is an update on the server, the page will be updated. 1. Every time there is an update to CSS, JS, etc., we set a timestamp at the end of the request for CSS JS. 2. Generate different hash values based on Webpack whenever the resource file is updated. Update resources based on different hash values. Negotiation caching takes place only if the strong cache fails. HTML can be used for negotiation caching;
Negotiate the cache
Negotiate cache last-mdified /ETag
Negotiation cache is a process in which the browser sends a request to the server with the cache id after the strong cache is invalid. The server decides whether to use the cache based on the cache
Vuex and REdux are equivalent to global variables stored in the stack memory of the page. Strong caching and negotiated caching are not needed at the front end, but at the server end.
The third step is DNS resolution
Locate the server based on the domain name and external IP address, and perform DNS resolution to locate the server. After purchasing the domain name, we need to register the domain name resolution, extranet IP with the DNS server
How to reduce DNS resolution times
1. The first request has no local DNS cache and requires a complete DNS resolution time of 20-120 ms 2. The second time basically enables the cache records of the first DNS resolution. 3. Reduce the number of DNS requests. In a project, it is only possible to access the same server, and do not access too many servers and domain names (but in order to do better optimization in the project, there are often many servers, do server training).
Server split
Rational resource utilization 2. Strong anti-pressure capability 3. Increase the number of HTTP concurrent requests
DNS prefetch technology
The first DNS resolution is expected to take 20-120 ms. Reduce the number of DNS requests and use DNS Prefetch.
TCP three-way handshake
2. The ack confirmation number field is valid only when the ACK flag is 1. Ack =seq +1
Sign a
ACK: confirms that the serial number is valid. RST resets the link. SYN: initiates a new connection
In addition to TCP connections, there are UDP links;
UDP connection characteristics: fast unstable, not very secure. Message video streaming can be done using UDP
Three handshakes why not two, or four?
As a reliable transmission control protocol, THE core idea of TCP is to ensure the transmission of data, but also to improve the transmission efficiency!
Step 5 data transfer
Step 6 TCP wave four times
Why three handshakes is four waves
1. After receiving a SYN request packet from the client, the server sends a SYN+ACK packet
2. But close links, when the server receives a FIN message, probably does not immediately close links, all can only reply before an ACK packet, so can only reply an ACK packet first, tell the client, you send message I have received a FIN, only etc all messages on the server to send out, I can send a FIN message, It cannot be sent together, so four waves are required.
Some differences between HTTP1.0 and HTTP1.1
1. Cache handling: Last Modfied Expires was used in HTTP1.0, and cache-Control 2 was introduced in HTTP1.1. For broadband optimization and network connection use, HTTP1.1 supports breakpoint continuation, i.e. return code is 206
3. Error notification processing, HTTP1.1 added 24 error status code processing: such as 409 identification request resource and the current state of the resource conflict; 410 indicates that a resource on the server is permanently deleted.
