This article is participating in the topic of “performance optimization actual combat record” essay activity

Modern Internet technology changes rapidly, new technology round after round, the development of the front and back end of the rapid. There has been a lot of practice in back-end performance optimization, and a very complete variety of solutions have emerged. And the front-end performance optimization is fragmentary, when used in the work, often can not find relatively comprehensive content. Always look for fragmented content, waste time not to say, often can not get satisfactory results.

Optimization at all levels of the front end

There are three levels of front-end technology: HTML/ CSS/ JavaScript, of course, network requests, resource loading, page rendering, data structure processing, asynchronous mechanism, etc

We can study in depth according to specific categories

HTML hierarchy optimization

In modern development, we recommend semantic tags, which make our code more human and less stuffy.

1. HTML tag nesting problem

  1. Reduce tag nesting,
  2. Reduce the use of empty labels,
  3. Reduce the abuse of useless tags.

CSS Hierarchy Optimization

1. Style reuse

  • 1.1 Style reuse and inheritance
  • 1.2 Avoid multiple renderings of the same class name, and do not add more definitions
  • 1.3 Use of selectors, less use of high priorities (e.g! importantUse sparingly)

2. Flexible use of labels

  • 2.1 Common Labelssrc 和 alt hrefAttributes such as
  • 2.2 For example, the IMG tag
  • 2.3 linkThe use of labels,

3. Flexible use of labels

  • 3.1 Use of custom attributes of tags
  • 3.2 Pay attention to labelsstyleattribute
  • 3.3 Reasonable use of template engine, etc

JavaScript hierarchical optimization

JavaScript is also what we deal with most! The main logic of the project is at the JavaScript level. There are so many points of JavaScript hierarchy optimization, all sorts of points, all sorts of bits and pieces. We certainly do not pay attention to the work between the optimization.

  • Reasonable use timer
  • Attention should be paid to event binding, such as event delegation, avoiding repetitive event listening, event bubbling, etc
  • Such as the framework of the source of the good ideas, Vue React and so on.
  • Rational use of the component lifecycle of the MVVM framework

Optimization at the resource loading level

  • Resource resolution optimization: request optimization/CDN deployment/caching HTTP caching, etc

  • Page loading mode: lazy loading, no page refresh ajax loading/paging loading, etc

  • Resource optimization processing code compression/Base64 clever/CSS Sprite/ image processing

  • Debug/log and other code optimizations for the development time environment

  • Do not do repeated loads to reduce interaction requests, etc

  • Reasonable use of LocalStorage: LocalStorage and SessionStorage

  • Cookies to streamline

  • Limit on the number of concurrent browser requests

  • The asynchronous mechanism Promise async/await

It is also common to be asked in an interview what performance optimizations have been learned

1. Use of CDN

2. Reduce DNS queries

Reduce the number of HTTP requests

4. Avoid redirects

5. Lazy loading of images

Reduce the number of DOM elements

7. Reduce DOM manipulation

8. Minimize iframe use

9. Compress JavaScript, CSS, fonts, images, etc

10, multi-domain distribution division content to different domain names

11. Use external JavaScript and CSS

12. Font clipping

Use iconfont

14. Optimize CSS Sprite

15. Avoid image SRC being empty

16, put the style sheet in

17. Place the script at the bottom of the page