This is the 12th day of my participation in the August Challenge
Performance optimization principles
- Use memory, caching, or other methods
- Reduces CPU computation and network loading time
- This applies to all kinds of performance optimizations — space for time
How to start with performance optimization
- Make it load faster
- Reduce resource volume: compress code
- Reduced access times: merge code, SSR server-side rendering, caching
- Use a faster network: CDN
- Make rendering faster
- CSS goes in the head and JS goes at the bottom of the body
- Start executing JS as early as possible with DOMContentLoaded trigger
- Lazy loading (image lazy loading, slide up to load more)
- Cache DOM queries
- Frequent DOM operations, merged together to insert DOM structures
- You are throttle and debounce
The cache
- Static resources are suffixed with hash to calculate the hash based on the file content
- If the file content does not change, the hash and URL will not change
- If the URL and file do not change, the automatic kitchen HTTP cache mechanism will return 304
SSR(serve site render)
- Server-side rendering: Load and render web pages and data together
- Non-ssr (front and back end separation) : load the page first, then load the data, then render the data
- Previous JSP ASP PHP(all SSR), now Vue React SSR
Lazy loading
<img id='img1' src='priview.png' data-realsrc='real.png' />
<script type='text/javascript'>
// The preview image is loaded by default, and the real address of the image is assigned to SRC when you slide up
var img1 = document.getElementById('img1')
img1.src = img1.getAttribute('data-realsrc')
</script>
Copy the code
Caching DOM queries
// DOM query results are not cached
for(let i=0; i<document.getElementsByTagName('p').length; i++){// For each loop, length is computed and DOM queries are performed frequently
}
// Cache DOM query results
const pList = document.getElementsByTagName('p')
const length = pList.length
for(let i=0; i<length; i++){// Cache length, only one DOM query
}
Copy the code
Multiple DOM operations are inserted into the DOM structure together
const listNode = document.getElementById('list')
// Create a document fragment that has not yet been inserted into the DOM tree
const frag = document.createDocumentFragment()
// Perform the insert
for(let i=0; i<10; i++){const li = docuemnt.createElement('li')
li.innerHTML = 'list item ' + i
frag.appendChild(li)
}
// Insert into the DOM tree
listNode.appendChild(frag)
Copy the code
Start JS execution as early as possible
window.addEventListener('load'.function(){
// The page will not be executed until all resources are loaded, including images, videos, etc
})
document.addEventListener('DOMContentLoaded'.function(){
// The DOM is rendered and executed. Images and videos may not have finished loading
})
Copy the code
The instance
Handwriting anti-shock debounce
- The change event is triggered when the text changes in an input box
- Using the keyUP event directly will trigger the change event frequently
Image stabilization
: the userWhen input ends or pauses
To trigger the change event
const input = document.getElementById('input')
let timer = null
input.addEventListerner('keyup'.function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(() = >{
// Simulate the change event
console.log(input.value)
// Empty the timer
timer = null
},500)})Copy the code
/ / image stabilization
function debounce(fn,delay = 500){
// Timer is in a closure
let timer = null
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(() = >{
fn.apply(this.arguments)
timer=null
},delay)
}
}
input.addEventListener('keyup',debounce(function(e){
console.log(e.target,input.value)
},300))
Copy the code
Handwritten throttle
- When you drag an element, always reach the location where the element is being dragged
- If you use drag events, they will be triggered frequently and will easily stall
- Throttling: No matter how fast the drag is, it will trigger once every 100ms
const div1 = document.getElementById('div1')
let timer = null
div1.addEventListerner('drag'.function(){
if(timer){
return // The difference with anti-shake
}
timer = setTimeout(() = >{
console.log(e.offsetX,e.offsetY)
// Empty the timer
timer = null
},100)})// Encapsulate the throttle function throttle
function throttle(fn,delay=100){
let timer =null
return function(){
if(timer){
return
}
timer = setTimeout(() = >{
fn.apply(this.arguments)
timer=null
},delay)
}
}
div1.addEventListener('drag',throttle(function(e){
console.log(e.offsetX,e.offsetY)
},200))
Copy the code