前端性能优化

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

事件委托

事件委托（也叫事件代理）利用了事件冒泡，把监听函数绑定在父容器上。在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。

使用事件委托的优点：

a.减少DOM操作，使事件处理时间减少。
b.减少内存空间的使用，提升性能。

简单例子：

let myUl = document. getElementByld("my-ul"); 
myUl.addEventListener('click',function(e){ 
	if(e.target.tagName == "LI"){
		//如果点击的目标的标签名为LI
		alert(e.target.innerText)
	}
})

函数防抖与节流

可见文章：https://blog.csdn.net/qq_32442973/article/details/118739927

webp

WebP是Google推出的一种同时提供有损压缩与无损压缩的图片文件格式，派生自图像编码格式VP8,支持透明图层和多图片动图。

WebP可对网页图片有效进行压缩而不影响图片清晰度，从而节省带宽，提高图片下载速度。在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%，比PNG文件小26%。

Google提供了 WebP文件解码器(libvpx)和 命令行工具(webpconv)，用于JEPG、png等格式图片与WebP格式之间的转换。WebP目前支持Chrome内核、Edgel8+、Safari 14+、Android的WebView等
浏览器，不支持ie。

方法一：前端js判断加载

对浏览器进行判断是否支持WebP，先加载一张base64的WebP格式，根据宽高来判断是否支持。如果支持则加载默认的WebP格式的图片，如果不支持则把img标签里的图片后缀换成常规的jpg或png即可。

function checkWebp(callback) { 
	var img = new Image(); 
	img.onload = function () { 
		var result = (img.width>0) && (img.height>0); 
		callback(result);
	};
	img.onerror = function () { 
		callback(