To reduceNumber of HTTP requests or size of request content

Each time a request is sent on the page, it completes the request + responds to the completed HTTP transaction, which costs performance and blocks the HTTP link channel

  • 1. Sprite (CSS Split/CSS Image Sprite)

  • 2. In real projects, we would be better off merging and compressing CSS or JS files

  • 3. Image lazy loading (extended: data lazy loading)

1. When loading the page, we only request the data of the first screen or two screens from the server side 2. When the page is pulled down, scroll to which area, make the request in this area, plus lazy load 3. Paging technology (paging display technology is also the lazy loading of data implementation)Copy the code

CDN acceleration is adopted

CDN: Distributed (geographically distributed)

Some optimizations about writing code

  • 1. Minimize DOM operations when writing JS code
1.DOM has a mapping mechanism (DOM element object in JS and DOM structure in the page is a mapping mechanism) 2. A DOM structure change or style change in the page triggers backflow in the browser, which triggers a DOM redrawCopy the code
  • 2. Use more asynchronous programming when writing code

Synchronous programming leads to the above things do not play, also can’t do the following tasks When we develop can set a certain area of the module to asynchronous programming, such as long as the module is no order between, can be independent to load, are not subject to the module on the plug Especially the Ajax request data, we usually use asynchronous programming, It is best to manage based on the Promise design pattern

  • 3. In real projects, we try our best to avoid looping too much data at once, especially to avoid the loop loop caused by while

  • 4.CSS selector optimization

1. Minimize the use of tag selectors 2. Minimize the use of ID tags and use style class selectors (versatility) 3. 4. Use CSS3 animations as much as possible. CSS animations have hardware acceleration enabled

  • 5. Avoid using CSS expressions

  • 6. Reduce redundant code in pages and maximize method reuse: ‘Low coupling, high cohesion’

  • 7. It is best to put CSS in the head and JS at the end of the BODY, so that when the page loads, load CSS first, then load JS

  • 8. Avoid eval

1. High performance consumption 2. After code compression, code confusion is easy to occurCopy the code

  • 9. Minimize the use of closures

  • 10. Be good with event delegates

  • 11. Write code to build architecture using design patterns whenever possible

  • 12. Reduce the use of filters in CSS

SEO optimization tips

  • 1. Eliminate dead links in the page (404 pages) (server processing)

  • 2. Avoid exceptions and errors in the browser

  • 3. Add keyword optimization

  • 4. Use the 304 cache of the browser to process data that is not frequently updated

  • 5. Use font ICONS to replace positions on some pages

Extension:

  • If AUDIO or VIDEO tags appear on the current page, we’d better set themPreload =true: Audio and video resources are not loaded when the page is loaded, but loaded when the page is playing

preload=auto preload=metadata

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