一点优化在开发主题过程中,发现前端的图片非常影响网站的打开速度,包括一些js的脚本加载都会大大的加长,根据后台异步执行的思路,我直接使用了 loading=”lazy” 标签让图片延后加载,从而加速网站的打开速度;下面是关于这个属性的解释。
延迟加载图片
loading="lazy"
是 HTML 图像标签 (<img>
) 的一个属性。它告诉浏览器在加载页面时是否延迟加载图片。
当一个图片的 loading
属性被设置为 "lazy"
时,浏览器将会推迟加载该图片直到它进入用户的视口(即用户滚动到图片所在位置)或者当浏览器认为加载图片不会对用户体验产生显著影响时才会加载。
这个属性对于提高页面加载性能和用户体验非常有用。通过延迟加载图片,可以减少页面的初始加载时间,特别是当页面上有很多图片时。然后,只有在用户需要查看图片时才会加载它们,而不是一次加载所有图片。
需要注意的是,loading="lazy"
属性的支持程度可能因浏览器而异,旧版本的浏览器可能不支持该属性。为了兼容性,你可以结合 JavaScript 或其他技术来实现延迟加载图片的效果。
除此之外一点优化原本还准备了懒加载的功能,但是好像已经没有必要了,这个优化足够了