本文将为你揭晓,在自己的实际开发中,可以尝试将此skill运用到项目中,如果文中有误导的地方,欢迎路过的老师多提意见和指正
目录:
开始入门(下载安装go,命令行终端下安装SQIP工具)
使用交叉点观察者进行延迟加载...(核心js实现)
总结(使用低质量图像占位符(SQIP)与使用Intersection Observer的延迟加载技术结合使用时,节省带宽,提升性能)
正文从这里开始~
如果你定期访问诸如Facebook...关于这个工具的好处是这个图像的低质量版本只有800字节 - 令人惊叹,在本地服务器中可进行测试,我示例中的图片svg占900字节,具体以你自己测试的为准
使用交叉点观察者进行延迟加载
现在我们有了两个版本的图像...首先,我们在页面加载时加载dog.svg图像,这是我们的低质量图像。接下来,我们使用一个名为data-src的数据属性指向全质量图像源。我们将使用它来尽快替换低质量图像和全面质量的图像。...这带来了很多可能性,例如使用JavaScript和CSS 修改并对元素进行动画操作或者创建响应式图形,比如阿里的svg图标等的
至于面试的时候,当回答图片优化时,图片选择(jpg/jpeg,gif,png