🚀 优质资源分享 🚀
学习路线指引(点击解锁) | 知识定位 | 人群定位 |
---|---|---|
🧡 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 () {
ca