如何选择第三方组件、轮播插件、owl-carousel2响应式图片压缩、webp如何选择第三方组件不重新造轮子，一定要选好轮子：1.用户数2.是否开源3.文档是否齐全4.活跃性5.轻量级随便选一个吧，owl-carousel2轮播插件还是有很多的，满足以上条件，相对好用查看官方文档。响应式图像加载与用户设备匹配的图像，速度快且不影响用户体验！1.jsorserver$(document).ready(function(){functionmakeImageResponsive(){varwidth=$(window).width();if(width<400){使用A图}else{使用B图}}$(window).on('resizeload',makeImageResponsive);})直接看代码，就是读取浏览器宽度选择的对应图片，也可以设置cookie来配置不同的图片。2.srcset和sizes看大神的解释。响应式图片srcset全新解读sizes属性w描述符，列表如下3。标签效果，兼容通过媒体查询的方式，根据页面的宽度加载不同的图片（当然你也可以加上屏幕是否横屏等其他参考项）。这不仅可以节省带宽，还可以使图片更适应内容。但是好事不那么顺利，现在很多浏览器都不支持图片标签。这里需要介绍另一个概念——Polyfill。比如html5的storage(session,local)，不同的浏览器，不同的版本，有的支持，有的不支持。我们又想使用这个功能，怎么办？有人写相应的Polyfills（Polyfills有很多）来帮你抹平这些差异，不支持的变成支持的（简单来说，写一些代码判断当前浏览器是否有这个功能，如果没有就写一些支持补丁代码）。你只需要在你的程序中引入需要的Polyfill，就可以了。所以图片标签也有自己的polyfill--picturefill.js，引入JS可以让低版本浏览器兼容图片标签。4.svgsvg矢量图解决响应式问题，不赘述，svg也是解决方案之一。图片压缩和webp图片压缩可以极大的提升用户体验。UI给的png图片压缩后一般可以缩小1/3，像素效果差不多。推荐网站webp是谷歌开发的一种图片格式，同等质量下比jpg小1/3。
