Front-end performance optimization: Client from input to presentation

1. Enter the url ==> to tell the browser where you want to go. 2. A. DNS prefetch CDN cache is used to speed up CDN prefetch (DNs-prefetch) 3. Establish a connection between the client and the server ==> Establish a TCP secure channel and shake hands for three times a. CDN Accelerates the use of content distribution network to enable users to obtain the required content faster b. Enable compression In HTTP, using a scheme similar to Gzip compression (a trade-off when server resources are scarce) c. Using the HTTP/2 protocol, HTTP2.0 optimizes many things for 1.0, including asynchronous connection multiplexing, header compression, etc., to make transfers faster 4. Browser sends HTTP request ==> Default long connection (reuse one TCP channel, short connection: destroy after each connection) a. Reducing HTTP requests Each request consumes a lot of resources and time from creation to destruction, and reducing the number of requests makes it relatively faster to display content. 2). For images, images can be merged and then downloaded, cut through CSS Sprites display (control the size, too large words will have the opposite effect) Use HTTP caching The principle of caching: As much as possible, for as long as possible. Lets clients send fewer requests and get them directly from local, speeding up performance. C. Cookie request Reduction Cross-domain isolation is implemented for non-essential data (static resource) requests to reduce the size of transmitted content. D. Preloading requests For preloaded content in some service scenarios, load it in advance, resulting in fewer requests and faster responses in subsequent user operations E. Pick GET and POST. When HTTP was defined, GET was essentially getting data, and POST was sending data. Get can complete the request in a TCP packet, but POST sends the header first and then the data. So, consider the request selection. F. Cache scheme selection Progressive cache update (to prevent loss of a large number of cache at one time, resulting in a sudden increase in load) 5. If the server responds to the request ==> The Tomcat and IIS servers locate the address based on the locally mapped file relationship or the data in the database. After processing the address, the server returns the request to browser A. Back-end framework selection\==> Faster response, faster front-end operation. B. Database selection and optimization / 6. Browser receives response ==> Browser processes response according to the data in the packet header a. Decoupling the third party depends more on the third party's uncertainties, which will lead to the instability and uncertainty of the Web B. Avoid 404 resource request No resources waste all resources from request to receive 7. Browser rendering order ==> A.HTML parsing starts building DOM tree B. A). Load CSS as soon as possible, first render the CSSOM object, then render the page, otherwise the page will flash, poor user experience b). CSS selectors are parsed from right to left, so similar to #test a{color: #444}The CSS parser looks for the ancestor nodes of all a tags, so it's not that efficient. In CSS media queries, it is best not to directly relate to any CSS rules. It is best to write to the link tag to tell the browser that the specified CSS C is loaded only in this medium. Scripts are parsed and executed within a document a). Load scripts on demand, such as webpack, which can package and load JS scripts on demand b). Mark scripts as asynchronous and do not block page rendering for optimal startup, ensuring that irrelevant scripts do not block page c). Select frameworks and libraries carefully and avoid referencing entire files with just one function or function from the library and framework. A) multiple reads (or writes) of.dom should be placed together. Principle: unified reading, unified writing. E. Image and external content loading a). Appropriate optimization of multimedia content, including appropriate use of file formats, file processing, progressive rendering, etc. B). Avoid empty SRC, empty SRC still sends requests to the server c). Avoid zooming images in HTML content, and if you need to use small images, use small image F instead. A). Server rendering, especially for websites where the first screen loading is very important, can consider this solution. The back-end rendering ends and the front-end takes over the display. A) Optimization for the first screen display 1). Picture lazy loading only loads the first screen for the display, and loads it when the user scrolls. If the user is not interested in the following, then save the request. B) javascript optimization 1). Reduce the number of dom node queries because the collection or element will be re-indexed each time. Or you can cache the query once and then use 2). Consider page redrawing and reordering when you do DOM js operations, because these operations are relatively performance-wasting. 3). Avoid eval and Function constructs, because the parser converts them into executable code before doing anything else. 4). Reduce the scope chain lookup. If a closure uses data from the global scope, then each local scope will climb up to the highest scope layer by layer to retrieve data. 5). Data access, access to non-reference types of data and local variables is the fastest. So if a reference type member (an object property or an array member) is accessed more than once, cache 6. Some algorithm functions that may be used by the front end are written to be more optimized to find an optimal solution in terms of time and space complexity. 8). Intelligent event handling, such as having 10 buttons under a div, can capture this event source during bubbling and then register c) CSS optimization 1). Delete useless rules 2). Inline key CSS 3). Avoid @imports and Base64 4). Enable high cost performance properties (such as opacity over rgba()) 5). 6). Instead of changing styles one by one, change styles all at once by changing class or csSText properties. 7). We can set the element to display: None (requires 1 rearrangement and redrawing), then N operations, and finally restore the display. 8). D) Picture optimization (80 in network request% are static resource requests)1). The selection of the correct format of the picture 2). The selection of the size of the picture, and the degradation of the image in the case of low resolution (considering the responsive image) 3). Optimize with the right tools (lossy compression, lossless compression) 4). CSS implementations (shadows, filters, etc.) are preferred if CSS processing and proxies are available The correct use of data URL, such as the use of multiple places, data URL is not recommended, can consider caching 6). 7). Image preloading, at the correct and reasonable design node for image preloadingCopy the code