1. Principles

Use more memory, cache, or other methods

Reduce CPU computation and network requests

Reduce IO Operations (Hard Disk Read and Write)

2. Load resource optimization

Consolidation and compression of static resources.

Static resource caching (browser caching policy).

Use CDN to load static resources faster.

3. Rendering Optimization

CSS in head, JS in body

Photo lazy loading

Reduce DOM operations and cache DOM operations

Reduce DOM operations and merge multiple operations as much as possible

Event throttling

Execute operation DOMContentLoaded as soon as possible

4. Examples

4.1 Resource Consolidation

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

4.2 caching

Control cache by 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

//dom not cached
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 inserts-> 1 dom insert

4.6 event throttling

Monitor the text change event, and execute the operation after 100 milliseconds without any operation, 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 trigger events with high frequency and set a buffer trigger event.

supplement

Asynchronous loading

Asynchronous Loading of Non-Core Code-Asynchronous Loading Method-Difference

1. Dynamic script loading

Create with js

2.defer

3.async

<script src="script.js"></script>
 Without defer or async, the browser will immediately load and execute the specified script. "immediately" refers to loading and executing the document element under the script tag before rendering, that is, without waiting for the document element to be loaded subsequently.
 <script async src="script.js"></script>
 With async, the process of loading and rendering subsequent document elements will be conducted in parallel (asynchronous) with the loading and execution of script.js
 <script defer src="myscript.js"></script>
 With defer, the process of loading subsequent document elements will be carried out in parallel (asynchronously) with the loading of script.js, but the execution of script.js will be completed after all elements are parsed and before the DOMContentLoaded event is triggered.

Regarding defer, we should also remember that it executes scripts in the loading order.

Scripts marked async do not guarantee execution in the order in which they are specified. For it, the loading and execution of scripts are closely linked, so no matter what order you declare, the scripts will be executed as soon as they are loaded.

internet explorer cache

The summary is very good.

Browser Caching-Classification of Caching-Principle of Caching

Caching is a locally existing copy of an html file.

Strong cache

Found cache for direct use.

Expires: absolute time to determine whether the client date exceeds this time
 Cache-Control: relative time, judging whether the access interval is greater than 3600 seconds
 
 //There will be no communication with the server before the set time.
 //If both are issued later, the latter shall prevail

Negotiation cache

Ask if the server cache is available, and judge whether it is.

Last-Modified/If-Modified-Since

First request, respone header plus Last-Modified (last modified time)
 
 Again, add If-Modified-Since to the header of the request.
 
 Compared with the last modification time of the server, if there is no change, 304 Not Modified will be returned, but the resource content will not be returned.  If there is any change, the content of the resource will be returned normally.
 
 After the browser receives 304' s response, it loads the resource from the cache
 
 If the negotiation cache misses and the browser loads resources directly from the server, the Last-Modified Header will be updated when reloading.

Etag/If-None-Match

These two values are the unique identification strings of each resource generated by the server, and will change as long as the resource changes. Its judging process is similar to last-modified/if-modified-sine, which can be accurate to a higher level of seconds.

DNS preresolution

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

In some browsers, dns pre-resolution is turned on by default in the A label, while dns pre-resolution is turned off under https protocol and will be turned on after adding mate.