前端开发是创建web页面或app等前端界面呈现给用户的过程。前端开发通过HTML,CSS及Javascript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。
使用的原因
在前端开发当中有一部分的用户行为会频繁操作触发事件执行,而对于DOM操作,资源加载等耗费性能的处理,很可能导致页面卡顿,甚至浏览器崩溃,函数节流和防抖就是解决类似需求应运而生的
节流
预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行,就像水滴攒到一定重量会下落一样
运用场景:
窗口调整(resize)
页面滚动(scroll)
抢购疯狂点击(mousedown)
letthrottle=(fn,waitTime)=>{
letlastTime=0;
returnfunction(){
letnowTime=newDate().getTime();
if(nowTime-lastTime>=waitTime){
fn();//执行的时候注意this指向
lastTime=nowTime;
}
}
}
防抖
函数防抖就是函数需要频繁触发情况时,只有足够的空闲时间,才执行一次。就像公交司机会等人都上车后才出站
运用场景
实时搜索(keyup)
拖拽(mousemove)
letantiShake=(fn,intervalTime)=>{
lettimer=null;
returnfunction(){
clearTimeout(timer);
timer=setTimeout(()=>{
fn()
},intervalTime)
}
}
在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。