No matter in the process of source code development of the accompanying platform, performance optimization is very critical. Of course, the performance optimization of the front end is more closely related to the user experience. What performance optimization strategies can we adopt in the source code development of the accompanying platform?

1. Principles

Use more memory, cache or other methods

Reduce the CPU calculation of the source code of the accompanying platform and reduce network requests

Reduce IO operations (hard disk read and write)

2. Load resource optimization

Merge and compress the static resources of the source code of the accompanying platform.

Static resource caching (browser caching policy).

Use CDN to make the source code of the accompanying platform load static resources faster.

3. Rendering optimization

Put CSS in the head and JS in the body

Lazy loading of pictures

Reduce DOM operations and cache DOM operations

Reduce DOM operations and combine multiple operations as much as possible

Event throttling

Perform the operation DOMContentLoaded as early as possible

4. Examples

4.1 merger of source code resources of accompanying platform

a.js  b.js  c.js  ---  abc.js

4.2 caching

Control the source code cache of the accompanying platform through the connection name

<script src="abc_1.js" ></script>

The link name will change only when the content is changed.

4.3 lazy loading

 <img src="preview.png" realsrc="abc.png" id="img1" />
    <script>
        var i = document.getElementById('img1');
        i.src = i.getAttribute('realsrc');
    </script>

4.4 caching dom queries

  //No cached dom
    for (let i = 0; i < document.getElementsByTagName('p').length; i++) {

    }

    //Cache dom
    var p = document.getElementsByTagName('p');
    for (let i = 0; i < p.length; i++) {

    }

4.5 merge dom inserts

 var listNode = document.getElementById('list');
    var flag = document.createDocumentFragment();
    var li;
    for (let i = 0; i < 10; i++) {
        li = document.createElement('li');
        li.innerHTML = i;
        flag.appendChild(li);
    }
    listNode.appendChild(flag);

10 dom insertions - > 1 dom insertion

4.6 event throttling
Monitor the text change event. The source code of the accompanying platform does not operate. The operation will be executed after 100 milliseconds without triggering each time.

var textarea = document.getElementById('ta');
    var timeoutId;
    textarea.addEventListener('keyup',function(){
        if(i){
            clearTimeout(i);
        }
        timeoutId = setTimeout(() => {
            //operation
        }, 100);
    });

Event throttling is mainly used to set a buffer trigger event for events triggered frequently by the source code of the accompanying platform.

supplement
Asynchronous loading
Asynchronous loading of non core code – how to load asynchronously – differences

1. Dynamic script loading

Create with js

2.defer

3.async

<script src="script.js"></script>
No, defer or async，The browser immediately loads and executes the specified script, and "immediately" refers to rendering the script script Before the document element under the tag, that is, it will be loaded and executed without waiting for the subsequent loaded document element.
<script async src="script.js"></script>
have async，The process of loading and rendering subsequent document elements script.js The loading and execution of are performed in parallel (asynchronous).
<script defer src="myscript.js"></script>
have defer，The process of loading subsequent document elements and script.js The loading of is performed in parallel (asynchronous), but script.js After all elements are parsed, DOMContentLoaded Completed before the event is triggered.

As for defer, we should also remember that it executes the script in the loading order

Scripts marked async are not guaranteed to be executed in the order in which they are specified. For it, the loading and execution of the script are close to each other, so no matter what order you declare, it will be executed as soon as it is loaded.

Browser cache

Browser cache – classification of cache – principle of cache

A cache is a local copy of an html file,

Strong cache

It is found that the source code cache of the accompanying platform is used directly.

Expires: Absolute time to determine whether the client date exceeds this time
Cache-Control: Relative time, judge whether the access interval is greater than 3600 seconds

//It will not communicate with the server before the set time
//If both are issued, the latter shall prevail

Negotiation cache

Ask whether the source code server cache of the accompanying platform can be used, and judge whether it can be used.

Last-Modified/If-Modified-Since

First request, respone of header add Last-Modified(Last modified time)

Request again, at request of header Plus plus If-Modified-Since 

Compared with the last modification time of the server, if there is no change, 304 is returned Not Modified，However, the resource content will not be returned; If there is any change, the resource content is returned normally.

After the browser receives the response from 304, it will load resources from the cache

If the negotiation cache fails to hit, when the browser loads resources directly from the server, Last-Modified of Header It will be updated when reloading

Etag/If-None-Match

These two values are the unique identification strings of each resource generated by the server. As long as the resource changes, this value will change; The judgment process is similar to that of last modified / if modified since, which can be accurate to a higher level of seconds.

DNS pre resolution

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//www.zhix.net">

In some browsers, dns pre parsing is turned on by default. Under https protocol, dns pre parsing is turned off and will be turned on after adding mate.

The above is "what are the performance optimization strategies that can be adopted for the source code development of the accompanying platform?" I hope it will be helpful to you.