Reduce the number and size of HTTP requests

Code optimization

-> Good for SEO

-> Facilitates extended maintenance

-> helps reduce performance consumption

108 suggestions for javascript code optimization [36 Suggestions for CSS optimization]…

Optimization of DNS and HTTP communication mode

1. Minimize the use of closures in JS (reason: closures create unfreed stack memory)

A: When loiteringevent bindings to elements, try to store later information (such as indexes) on the element’s custom properties instead of creating closures for storage

B: Instead of creating closures for each method (e.g., singleton pattern), a closure can be formed on the outermost layer to store some common information that is needed later.

C: Manually release unused memory as much as possible…

2. Merge CSS and JS files as far as possible (merge the CSS that needs to be introduced into one, and merge JS files into one). The principle is to reduce the number of HTTP requests, compress the merged code as far as possible, and reduce the size of HTTP request resources

A: WebPack, an automated build tool, can help us achieve code consolidation and compression (engineering development)

B: In mobile development (or PC development that pursues high performance [such as Baidu home page]), if CSS or JS is not needed much, we can choose to embed CSS and JS programming (that is, write the code directly in HTML).

3. Try to use font ICONS or SVG ICONS instead of traditional PNG images (because font ICONS are vector images (written based on code), which will not be deformed when enlarged, and render faster, smaller than bitmaps)

4. Reduce DOM operations (mainly DOM redrawing and backflow (rearrangement))

A: Separate read and write about rearrangement

B: Use document fragmentation or string concatenation for data binding (dynamic DOM creation)

5. Avoid “nested loops” (which add a lot of extra loops) and “dead loops” (which cause the browser to freeze) in JS

6. Lazy loading of images (lazy loading)

Goal is to reduce the page in the process of the “first load” HTTP request times, make the page open speed quick steps: start loading the page, all the real images are not loading to send HTTP requests, but give a placeholder background, when the page is loaded, and we’ll do in the area of the visual pictures to load

7. Use the browser and server side of the cache technology (304 cache), some not often updated static resource files do cache processing (such as: JS, CSS, static images can do cache) principle is to reduce the HTTP request size, so that the acquisition speed is faster

8. Use event delegate (event proxy) as far as possible to handle the operation of event binding and reduce frequent DOM operations, including event binding for each DOM element

9. Minimize the use of CSS expressions

#myDiv {
  position: absolute;
  width: 100px;
  height: 100px;
  left: expression(document.body.offsetWidth - 110 + "px");
  top: expression(document.body.offsetHeight - 110 + "px");
  background: red;
}
Copy the code

CSS selector parsing rules are parsed from right to left

.container. Link a{find all the a's in the.link style class, filter again in the.container style class... We find all the A's first, which is A performance drain. We use CSS selectors to minimize the use of label selectors.Copy the code

11.CSS Sprite Graphics technology (CSS Sprite/CSS Image Sprite)

All the images of relatively small resources are summarized into a large image. In the later stage, we only need to load the large image and display the corresponding small image in the way of background positioning

.bg{
  background:url('xxx.png');
}
.box1{
   background-position:xx xx;
}
.box2{
   background-position:xx xx;
}

<div class='bg box1'></div>
Copy the code

13. Reduce the use of cookies (the most important is to reduce the size of local COOKIE storage), because when the client operates cookies, these information is always passed between the client and server side

14. Data acquisition in the page adopts asynchronous programming and delayed batch loading to use asynchronous data acquisition, in order to reduce the BLOCKING of THE HTTP channel, will not delay the rendering of the following information because there is no data request back, improve the speed of the page opening (we can deal with: Delay batch loading is similar to image lazy loading, in order to reduce the number of HTTP requests during the first page loading

15. The audio and video labels appear on the page, we don’t want to load these resources when the page is loading (otherwise the page will load slowly) (solution: just set preload=’ None ‘), wait for the page to load, we load audio and video resources when the audio and video is playing

16. In the information interaction between the client and the server, we try our best to transfer a number of data based on JSON format (JSON format is convenient for data processing and has small resources).

==> has this advantage over transport in XML format

17. Achieve JS encapsulation as far as possible (low coupling and high cohesion), reduce redundant code in the page (reduce the size of HTTP request resources)

20. After setting positioning in CSS, it is better to use z-index to change the hierarchy of boxes so that all boxes are not on the same plane, so that the performance of subsequent processing can be slightly improved

21. During the data interaction of ajax-based GET requests, we can make it generate a cache (this cache is not the 304 cache) according to the requirements, so that the next data obtained from the same address is the last cached data (but it is rarely used, and the project usually deliberately clear this cache more often).

22. Minimize the use of the Filter attribute (this attribute is more performance intensive)

23. In the CSS import, try to reduce the use of @import import, because @import is a synchronous operation, only the corresponding CSS import, will be loaded down, and link is asynchronous operation

24. Configure ETag(somewhat similar to 304 cache)

25. The use of the window. RequestAnimationFrame frame animation in (JS) instead of the traditional animation timer

26. Reduce the use of recursion to avoid dead recursion and stack memory nesting caused by recursion (tail recursion is recommended)

27. Avoid using iframe (not only is it difficult to control style, but also equivalent to loading other pages in page A, which consumes A lot of energy)

28. Make use of the localstorage localstorage or the manifest offline cache provided in H5 to store some information locally, and obtain it directly from the local when loading the page next time to reduce the number of HTTP requests

29. When retrieving JS based on SCRIPT, you can already use defer or Async to load asynchronously

Heavyweight optimization: CDN acceleration (cash burning machine)

=== Extra technique ===

1. We usually place the CSS on top of the BODY and the JS on top of the BODY. (Reason: let it load the CSS first.

2. Never use JS if you can use CSS, never use plug-ins if you can use native JS, and never use FLASH (except for the lower version of audio and video playback in the browser)

=>CSS handles animations and other functions better than JS, and CSS transforms have hardware acceleration

3. Try to reduce the use of EVAL in JS, because when JS is merged and compressed, the code execution priority may be wrong due to imperfect symbols, and EVAL processing consumes a bit more performance

4. Use keep-alive to establish a long connection between the client and server

5. Try to use design patterns to manage our code (singleton, construct, Promise, publish and subscribe) for later upgrades and maintenance

6. Enable gzip compression on the server side (this compression can effectively reduce the size of the requested resource file). In fact, resources such as images on the client side can also be compressed (but for the 24-bit bitmap, the compression may become blurred).

7. Do not have invalid links in the page (good for SEO optimization), there are other techniques: improve keyword exposure, img need to add Alt, set meta tags, tag semantics…

8. Avoid with statements (performance hogging)

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =