Optimization of network requests the throttle
As the accumulation of water droplets must be the weight after a preset function when the function is executed only than or equal to the execution period, the function call is not performed until dropping cycle
Scenarios
1 Click the button to cut demand for the continuous intervals such as requesting a page Refresh button
2 the LAC acquired upload data on [LAC] upload
Art principles to achieve access throttling new Date () time difference to time needs to be limited within a certain period of time allowed to perform only one function in order to achieve the specified limit requested network
Function as backbone
var ODiv = document.getElementsByTagName('div')[0]
var obtn = document.getElementsByTagName('button')[0]
function jieliu(handle,wait) {
var lastTime = 0
return function() {
var nowTime = new Date().getTime()
if(nowTime - lastTime > 2000) {
handle()
lastTime = nowTime
}
}
}
function buy() {
ODiv.innerText = parseInt(ODiv.innerText) + 1
}
obtn.onclick = jieliu(buy,2000)Image stabilization technology to optimize the performance of the requested page
Some users often trigger event execution, and for operating resources dom load the operating performance of this type of consumption may cause page Caton, Ben collapse phenomenon in the client front-end development. . . Anti-shake function throttle function is to solve such problems and students
Image Stabilization: the bus driver, who like all the car will trigger
Use drag scene real-time search
Function as backbone
// 防抖
var inp = document.getElementsByTagName('input')[0]
var timer = null
//防抖主函数
function fangdou(hand,laizy) {
return function() {
var _arg = arguments;
var self = this
clearTimeout(timer)
timer = setTimeout(function() {
hand.apply(self,_arg)
},laizy)
}
}
function ajax(e) {
console.log(this.value);
}
//input事件执行的是防抖延迟后的函数
inp.oninput = fangdou(ajax,2000)
What is lazy loading images?
When the picture to the browser's viewing area, just load the picture. This greatly speeds up loading of deliberation and more pictures of the page. For example, some of the larger online store, a page has a lot of pictures, if you do not use lazy loading speed of the user into the web page will be very slow, so the user experience may not be so good.
The principle: page <img> tag the src attribute is not set, the linked picture is written to data-XXX (XXX custom), when no img src tag attribute, then the browser will not send the request to load the picture. When the target img slip into your browser's viewing area, set the target img src attribute by js, images will be loaded out.
