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