事件委托
事件委托(也叫事件代理)利用了事件冒泡,把监听函数绑定在父容器上。在触发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(false);
};
img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVIA4IBYPKNKwAQCdASoBAAEADsD+JaQAASFRDFGJ';
}
function showlmage(flag){
var imgs = Array.from(document.querySelectorAll('img'))
imgs.forEach(function(i){
var src = i.attributes['data-src'].value
if(flag){
i.src = src
}else{
src = src.replace(/.webp$/,'.jpg')
}
})
}
checkWebp(showlmage)