前端性能优化篇（节流/防抖/懒加载）及前端开发必备的优化小知识

哈喽哈喽！大伙们~我来分享、记录知识啦，
希望能够帮助到大家哈，有不足的地方，还望大佬多多关照喔
那废话就不多说咯~咱这就去看看代码

一、节流函数：

（一）、什么是节流？

当用户每次触发事件的间隔小于既定时间,应用防抖的情况下只会执行一次
也就是既定时间间隔内的多次操作最终会合为一次执行
所谓的节流通俗点来说就是（以指定的频率执行）

（二）、原生Js实现节流

let Oinput=document.querySelector("#inp");
			let flag=true; //声明一个标志标量，默认表示激活延时器
			Oinput.oninput=function(){  //给input输入框添加oninput事件
				if(!flag){ //如果flag==false,表示处于既定时间内
					return;  //return后，后面的代码将不再执行
				}
				flag=false; //设置延时器的同时将flag置为false
				setTimeout(function(){
					console.log(Oinput.value);
					flag=true;//延时器执行后将flag重置为true
				},2000);//表示延时器2s后执行（2000ms=2s）
			}

二、防抖函数：

（一）、什么是防抖？

函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延迟执行时间。
所谓的防抖通俗点说其实就是（在停止触发事件后的一段时间，才执行，期间连续触发，则会重新计算函数延迟执行时间）

（二）、原生Js实现防抖

			let count=0; //测试用的参数
			let OInput=document.querySelector("#inp"); //获取文本输入框对象
			function debounce_need(){  //把需要执行的代码放到这里
				count++; //自加1
				console.log("执行"+count+"次");
			}
			function debounce(method,delay){ 
				if(method.timer){
					clearTimeout(method.timer);
				}
				method.timer=setTimeout(function(){
					method();
				},delay);
			}
			OInput.oninput=function(){
				debounce(debounce_need,2000);
			}

三、图片懒加载：

（一）、什么是图片懒加载

比如一个页面有很多图片，但是先加载在可视区域内的图片，当用户滑动滚动条后，新的图片会出现在可视区域，这时才继续加载图片，这就是图片懒加载啦~而不是一开始就加载所有图片（在需要呈现在用户视野时，才加载图片）

（二）、图片懒加载的原理

1､设置图片src属性为同一张图片(加载图标)，同时自定义一个data-src属性来存储图片的真实地址（将图片地址先加载到内存）
2､ 页面初始化显示时或者浏览器发生滚动时，判断图片是否出现在可视区域中
3､ 当图片出现在可视区域时，通过js获取data-src（自定义属性）中的属性值（图片真实地址值），并赋值给img标签的src属性，这时才会真正的去请求服务器。

（三）疑惑：

A：上面的6个img标签的src属性里，不是分别都有图片加载地址吗？那不是照样向服务器请求6次图片？
Ps：不是这样的哈~（图片都是一样的）因为浏览器的缓存机制，其实只是向服务器请求一次图片而已。

（四）代码实现：原生Js实现图片懒加载

<script>
!function(){
// 获取图片列表，即img标签列表
				var imgs = document.querySelectorAll('img');
				// 可视区域高度
				var h = window.innerHeight;
				// 懒加载实现
				function lazyload(){
					//滚动区域高度
					var s = document.documentElement.scrollTop || document.body.scrollTop;
					for(var i=0;i<imgs.length;i++){
						(function(i){
							var windowheight=imgs[i].offsetTop;
							setTimeout(function(){
								if((h+s)>windowheight){
								var Oimg=new Image();
								Oimg.src=imgs[i].getAttribute("data-src");
								Oimg.onload=function(){
									imgs[i].src=imgs[i].getAttribute("data-src");
								}
							}
						},1000);
					})(i);
					}
				}
				lazyload();
				window.onscroll=function(){
					lazyload();
				}
}();
</script>

好啦~还有些内容后续再更新记录咯，希望对你们有帮助哈！