Use CSS Sprite (CSS Sprite/CSS Image Sprite) technology

Using CSS Sprite (CSS Sprite/CSS image Sprite) technology, combine some small pictures into a large picture, use the background image positioning, positioning to a specific small picture on the CSS code is as follows:

.pubBg{
	background: url('././img/sprit.png') no-repeat;
  background-size: 0 0 /* Keep the same size as the original */
}
.box {
	background-position: x y; /* Use the background location to locate the specific position and display different images */
}
Copy the code

HTML code:

<div class="pubBg box"></div>
Copy the code

Advantages: Reduce the number of HTTP requests or reduce the size of request data, because every HTTP request sent in the page needs to complete the request + response to the complete HTTP transaction, which will consume some time, and may also lead to the blocking of HTTP link channel. In order to improve the page loading speed and operation performance, We should reduce the number of HTTP requests and the size of the request content (the larger the request content, the longer it takes).

In the project, we had better merge or compress THE CSS or JS files, especially in the mobile development, if the CSS or JS content is not very much, we can use inline, in order to reduce the number of HTTP requests, speed up the page loading speed

  1. CSS is merged into one, js is also best merged
  2. The home page uses some tools (such as webpack) to compress the merged CSS or JS into x xx.min.js to reduce the file size
  3. The server enables GZIP compression of resource files
  4. Through some automation tools to complete the CSS and JS compression, or to complete less to CSS, ES6 to ES5 and other operations, our automatic construction mode, called the front-end “engineering” development

Image lazy loading technology is adopted. When the page starts to load, the real image address is not requested, but the default image is used to occupy the space. After the current page is loaded, the real image will be loaded according to relevant conditions (reducing the number of HTTP requests for the first time on the page).

In the actual project, we do not load any pictures at the beginning. After the page is loaded for the first time, we load the pictures that can be seen on the first screen, and then load the pictures that can be displayed in the following areas as the page scrolls. According to the image of the evil lazy loading technology, can also be expanded, lazy loading of data

  • When loading the page, we only request the data of the first screen or the first two screens from the server side (some websites render the data of the first screen at the back end and return it to the client side as a whole).
  • When the page drops down and scrolls to a certain area, request the data needed by the area (request back for data binding and image lazy loading, etc.).
  • Paging display technology is also implemented with lazy loading of data: if we are asking for a lot of data, we are better off batching requests, starting with only one page of data, and then requesting data from that page as the user clicks on other pages

For infrequently updated data, it is best to use the browser’s 304 cache left processing, mainly handled by the server (reducing the number of HTTP requests)

Ex. : If the first request for CSS and JS comes down, the browser will cache the content of the request. If 304 processing is done, the user requests CSS and JS again, directly from the cache, no longer request server to fetch (reduce the number of HTTP requests). When the user forces the page refresh, or the current cache of CSS and JS changes, We can also do some localStorage based on localStorage on the client side.

Using font ICONS instead of bitmaps (images) in some pages is not only easier to adapt to, but also more lightweight, and reduces HTTTP requests (similar to Sprite images).

If AUDIO or VIDEO tags appear in the current page, it is best to set their preload to None. The AUDIO and VIDEO resources are not loaded when the page is loaded, but loaded when the page is playing (reducing the number of times the page loads HTTP requests first).

Preload is auto. The audio and video resources are loaded when the page is loaded for the first time. Preload is metadata: only the header information of audio and video resources is loaded when the page is first loaded

In the data communication between the client and server, we try to use JSON format for data transmission

Advantage:

  1. Json format data, can clearly show the data structure, but also convenient for us to obtain and operate
  2. Data in JSON format is much more lightweight than the XML format transport of old
  3. Both client and server support json format data processing, processing is very convenient

In a real project, not all data should be JSON-based, and we try to do so, but for some specific needs (such as file streaming or document transfer), using JSON is not appropriate

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 you can make when writing code to improve page performance (bad coding habits can lead to page performance costs, such as memory leaks).

  1. Minimize manipulation of the DOM when writing JS code. Manipulating the DOM in JS is a very performance consuming activity, but we can’t avoid manipulating the DOM, we can only minimize manipulation of the DOM

Disadvantages of DOM manipulation:

  • DOM exists mapping mechanism (JS DOM element object and page DOM structure is there mapping mechanism, a change is to change), 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), DOM operation is to modify two places at the same time, Relative to some other JS programming is performance consuming.
  • Changes in the DOM structure or style of a page trigger browser backflow (the browser recalcates the DOM structure, which can be a costly operation) and redraw (rerendering the style of an element)
  1. Use asynchronous programming more often when writing code

Synchronous programming will lead to: the above things can not be finished, the following tasks can not be done, development time, you can set a certain area module for asynchronous programming, so 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 (use less). Ajax data requests, in particular, tend to be asynchronously programmed, preferably managed based on the Promise design pattern. (Fetch, Vue AXIos and other plug-ins are often used for AJAX request processing, because these plug-ins encapsulate Ajax based on the Promise design pattern.)

  1. In real projects, we try to avoid looping too much data at once (because looping operations are programmed synchronously), especially to avoid the while loops
  2. CSS selector optimization
  • Minimize the use of label selectors
  • Use less ID selectors and more style class selectors (more versatile)
  • Reduce prefixes in front of selectors (selectors are searched from right to left, more prefixes, longer query time)
  1. Avoid USING CSS expressions
  2. Reduce redundant code in pages and maximize method reuse: “Low coupling, high cohesion”
  3. It is best to put CSS in the head and JS in the end of the body, so that when the page loads, the CSS is loaded first, then the JS is loaded (render the page first, then provide the user with the action).
  4. Avoid using eval in js
  • High performance consumption
  • After the code compression, it is easy to appear the code execution error problem
  1. Js to minimize the use of closures
  • Closures form an indestructible stack memory, and excessive stack memory accumulation can affect page performance
  • It is also prone to memory leaks

Closures have their own advantages: preservation and protection, we can’t avoid, we can only minimize

  1. When doing DOM event binding, try to avoid one by one event binding, but use higher performance event delegate to achieve
  • Event delegate (Event broker)
  • The event is bound to the outer container, and when the behavior associated with the descendant element in the outer container is triggered, the method bound to the outer container is also triggered (as a result of bubble propagation) depending on who the event source is, we can do different things
  1. Try to use CSS3 animation instead of JS animation, because CSS3 animation or deformation are open hardware acceleration, better performance than JS animation.
  2. Write JS code, as far as possible to use the design pattern to build the system, convenient later maintenance, but also improve the expansion
  3. Reduce the use of filters in CSS and reduce the use of flash in pages

SEO optimization tips on pages

  1. There are no dead links in the page (404 pages), and if the user enters an error page, we should direct to the 404 prompt page (server processing).
  2. Avoid exceptions thrown by browsers
  • Try to avoid code errors
  • Use try catch to catch exceptions
  1. Add page keyword optimization

conclusion

This article mainly shares some front-end performance optimization methods, considering from different perspectives, such as reducing HTTP requests, some optimization techniques for writing code, some techniques for page SEO optimization, etc. If you want to know more, please scan the following TWO-DIMENSIONAL code, follow the public number: