Reduce the number of HTTP requests or the size of the requested data
Every sends an HTTP request, the page needs to be completed this complete HTTP request + response transaction, will consume some time, may also lead to the HTTP link channel blockage, in order to improve the page loading speed and performance, we should reduce the number of HTTP requests and reduce the size of the request content (the content of the request, the greater the The longer it takes)
1, the use of CSS Sprit (CSS Sprit/CSS image wizard) technology, combine some small images in a large picture, when using the background image positioning, positioning to a specific small picture
.pubBg{ background:url('.. /img/sprit.png') no-repeat; background-size:x y; }. Box {background-position:x y; /* The background position, the location of the specific position, display different images */}... <div class='pubBg box'></div>Copy the code2. In real projects, we’d better merge and compress CSS or JS files; Especially in mobile development, if the CSS or JS content is not very much, we can take embedded, in order to reduce the number of HTTP requests, speed up the page loading speed;
2) First with some tools (such as: Webpack) to compress the combined CSS or JS into XXX.min. JS, reduce the file size 3) server start resource file GZIP compression… Through some automation tools to complete the CSS and JS compression, or to complete LESS to CSS, ES6 to ES5 and other operations, we put this automatic construction mode, called front-end “engineering” development
3. Image lazy loading technology is adopted. When the page starts to load, it does not request the real image address, but uses the default image to occupy the space.
In the real project, we do not load any images at the beginning. When the page is loaded for the first time, we load the images that can be seen on the first screen. As the page scrolls, we load the images that can be displayed in the following areas
Lazy loading technology according to the pictures, we can expand the lazy loading of data 1) began to load the page, we just put the first screen or in the first two screens to request data from the server side (some website first screen data is good background rendering, returned to the client to present the whole) 2) when the page dropdown, scroll to which region, Request the data needed in this area (request back for data binding and image lazy loading, etc.) 3) pagination display technology adopts the lazy loading idea of data: If the data we are requesting is a lot of data, it is best to batch the requests, first requesting only the data on the first page, and then when the user clicks on the second page. When requesting page 2 data…
4. For data that is not frequently updated, it is best to use the 304 cache of the browser for processing (mainly processed by the server side)
For example, if the user requests CSS and JS for the first time, the browser will cache the requested content. If the 304 processing is performed, the user requests CSS and JS again and directly reads them from the cache, without going to the server to obtain them (reducing the number of HTTP requests).
When a page is forcibly refreshed (CTRL+F5) or the CSS or JS in the cache is changed, the CSS or JS is pulled from the server again
.
For the client side, we can also do some localStorage based on localStorage, for example: The first request for data or infrequently updated CSS and JS, we can store the content locally, and the next time the page loads, we can get it locally, we can set a certain deadline or some identifier, we can control at a certain stage to get it back from the server
5, use font ICONS instead of bitmaps (pictures) in some pages, which is not only convenient for adaptation, but also more lightweight, and reduces the number of HTTP requests (similar to Sprite)
6. If AUDIO or VIDEO tags are present in the current page, it is best to set their preload= None: The AUDIO and VIDEO resources are not loaded when the page is loaded, and they are loaded when the page is playing (reducing the number of times the page loads HTTP requests for the first time).
Preload =metadata preload=metadata preload=metadata preload=metadata preload=metadata
7. In the data communication between the client and server, we try to use JSON format for data transmission
[Advantages] 1) The data in JSON format can clearly show the data structure, and it is also convenient for us to obtain and operate. 2) Compared with the earlier XML format transmission, the data in JSON format is more lightweight. 3) Both the client and server side support the processing of DATA in JSON format, which is very convenient to process
In real projects, not all data needs to be JSON-based, and we try to do this, but for some specific needs (such as file stream transfer or document transfer), JSON is not appropriate
8. CDN acceleration is adopted
CDN: Distributed (geographically distributed)
Some optimization tips for writing code
In addition to improving performance by reducing the number and size of HTTP requests, there are also some optimizations that can be made when writing code to improve page performance (some bad coding habits can cause page performance to be too costly, such as memory leaks).
1. Minimize DOM manipulation when writing JS code (the VUE and REACT frameworks handle this very well)
Manipulating the DOM in JS is a very performance intensive activity, but we can’t avoid manipulating the DOM, so we can only minimize manipulation of it
1) DOM exists a mapping mechanism (DOM element object in JS and DOM structure in the page is a mapping mechanism, a change is changed), this mapping mechanism, is the browser in accordance with W3C standards to complete the construction of JS language and DOM construction (in fact, is to build a listening mechanism), Operating the DOM to modify two places at the same time, relative to other JS programming is consumption performance of 2) pages in the DOM structure changed or style, will trigger the browser’s back, the browser will calculate the DOM structure, the operation is very expensive performance) and re-paint (to render to the style of an element)…
2. Use more asynchronous programming when writing code
Synchronous programming will lead to: the above things can not be finished, the following tasks can not be done, when we develop, we can set a certain area module for asynchronous programming, so that as long as there is no necessary sequence between modules, can be loaded independently, will not be affected by the blocking of the above modules (not much use)
AJAX data requests, in particular, tend to be asynchronous programming, preferably managed based on the Promise design pattern. (Fetch, Vue AXIos and other plug-ins are often used for AJAX request processing because they encapsulate AJAX based on the Promise design pattern.)
3. In real projects, we try to avoid looping too much data at once (because looping is synchronous programming), especially to avoid the while loop
4. CSS selector optimization
1) Minimize the use of label selectors 2) minimize the use of ID selectors in favor of style class selectors (versatility) 3) Reduce the prefixes before selectors, such as.headerbox.nav. left a{} (selectors look up from right to left)…
Avoid USING CSS expressions
/*CSS expression */
.box{
background-color:expression((new Date()).getHours() %2?'red':'blue')}Copy the code6. Reduce redundant code in pages and maximize method reuse: “Low coupling, high cohesion”
7, the best CSS in the HEAD, JS at the end of the BODY, let the page load, load CSS first, before loading JS (first render the page, before providing the user with operations)
Avoid using eval in JS
1) High performance consumption 2) After code compression, it is easy to have the problem of code execution disorder
9. Minimize the use of closures in JS
1) Closures form an undestroyed stack memory, and excessive stack memory accumulation can affect page performance. 2) They can also easily lead to memory leaks
Closures have their own advantages: preservation and protection, which we can only minimize, but cannot avoid
10. When doing DOM event binding, avoid event binding one by one as far as possible, and use event delegation with higher performance to achieve it
The event delegate (event broker) binds events to the outer container. When the behavior of the descendant element is triggered, the methods bound to the outer container are also triggered to execute (caused by the bubble propagation mechanism), depending on who the event source is, we can do different operations
11, try to use CSS3 animation instead of JS animation, because CSS3 animation or deformation has opened the hardware acceleration, better performance than JS animation
12, write JS code as far as possible to use the design pattern to build the system, convenient maintenance, but also improve the expansion
13. Reduce the use of filters in CSS and reduce the use of FLASH in pages
SEO optimization tips on pages
1, the page to eliminate dead links (404 pages), and for the user to enter an error page, we want to guide to the 404 prompt page (server processing)
2. Avoid throwing exceptions in the browser
TRY CATCH to avoid code errors…
3, add page keyword optimization