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
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.