关于Swiper的坑——只有3.3.1的非压缩版正常，非常奇怪

前一段时间&＃xff0c;为了遵守《高性能网站建设指南》的约定——压缩Javascript&＃xff0c;我把swiper的版本由swiper.jquery.js改成了swiper.jquery.min.js&＃xff0c;结果奇怪的事情发生了——安卓版的微信加载网页超级慢&＃xff0c;而非微信版的浏览器访问网站均正常&＃xff0c;这个问题&＃xff0c;我还特意在网络上搜了搜&＃xff0c;还真有人遇到这样的问题。但解决办法没有。

这就奇了怪了&＃xff0c;最初&＃xff0c;我的怀疑对象肯定不是swiper&＃xff0c;我怀疑是微信安卓版的签名问题。因为在使用 https://github.com/wechat-group/weixin-java-tools 进行签名的时候有这样一段代码&＃xff1a;

&＃64;Overridepublic String getJsapiTicket(boolean forceRefresh) throws WxErrorException {Lock lock &＃61; this.getWxMpConfigStorage().getJsapiTicketLock();try {lock.lock();if (forceRefresh) {this.getWxMpConfigStorage().expireJsapiTicket();}if (this.getWxMpConfigStorage().isJsapiTicketExpired()) {String responseContent &＃61; execute(SimpleGetRequestExecutor.create(this), WxMpService.GET_JSAPI_TICKET_URL, null);JsonElement tmpJsonElement &＃61; JSON_PARSER.parse(responseContent);JsonObject tmpJsonObject &＃61; tmpJsonElement.getAsJsonObject();String jsapiTicket &＃61; tmpJsonObject.get("ticket").getAsString();int expiresInSeconds &＃61; tmpJsonObject.get("expires_in").getAsInt();this.getWxMpConfigStorage().updateJsapiTicket(jsapiTicket, expiresInSeconds);}} finally {lock.unlock();}return this.getWxMpConfigStorage().getJsapiTicket();}

怀疑这段代码的原因就是它有一个lock&＃xff0c;但时候证明原因不在于此。这个方法请求得响应结果特别的快。

后来&＃xff0c;折腾了一天&＃xff0c;实在是没招了&＃xff0c;就只能回滚项目源码的版本&＃xff0c;一次次试错&＃xff0c;最后在临近晚上7点的时候才把问题确定在swiper上。

当时页面引用的swiper是这样的&＃xff1a;

"https://cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.min.js">script>

最初代码部署在阿里云的服务器上时&＃xff0c;我手机是iPhone6&＃xff0c;微信订阅号访问的时候速度特别正常。但是老板的手机是华为的安卓&＃xff0c;微信访问慢得要人崩溃&＃xff0c;这期间我一直认为不是代码的问题&＃xff0c;而是他手机的问题&＃xff0c;最后老板被客户逼急了&＃xff0c;还刷了机&＃xff08;悲催的是数据还丢了&＃xff09;&＃xff0c;结果访问速度依然很慢。后来&＃xff0c;他就来逼我&＃xff0c;这™没有一点错误信息啊&＃xff0c;我手机正常啊&＃xff0c;非微信的安卓浏览器也访问正常啊。代码绝对是没有问题的。

后来没办法&＃xff0c;别人的安卓手机微信访问网站也是慢&＃xff0c;问题总要解决啊。

我必须要在本地重现这个问题了&＃xff0c;使用微信提供的微信web开发者工具没有问题&＃xff0c;Google Chrome浏览器没有问题。

然后开启ngrok&＃xff0c;奇怪的现象发生了&＃xff0c;我的手机iPhone6&＃xff1a;

微信浏览器的进度条一直停留在大概这个位置&＃xff01;

现在我确信代码是在某个地方出现了bug&＃xff01;&＃xff0c;确定无疑了&＃xff01;

回滚历史版本是必须的&＃xff0c;这是一项重复性特别高的工作&＃xff0c;一行一行代码的瞧啊&＃xff0c;就像是在拾麦子一样。最后&＃xff0c;问题终于找到是在swiper的应用上面&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;

把压缩版换成开发版&＃xff1a;

"https://cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.js">script>

这个时候&＃xff0c;访问竟然正常了&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;神奇的swiper&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;

把swiper切换成3.4.2的开发版还是压缩版&＃xff0c;都依然有问题。

"https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.js">script>

是不是使用swiper的时候出错了呢&＃xff1f;
这问题我也考虑过&＃xff0c;试验过。

new Swiper(&＃39;.recom-container&＃39;, {pagination : &＃39;.recom-pagination&＃39;,lazyLoading : true,slidesPerView : 1,paginationClickable : true,
});
// 热点新闻
new Swiper(&＃39;.index-new-list&＃39;, {autoplay : 3000,direction : &＃39;vertical&＃39;,loop : true,paginationClickable : true
});// 导航
new Swiper(&＃39;.index-nav&＃39;, {scrollbarHide : true,slidesPerView : &＃39;auto&＃39;,centeredSlides : false,grabCursor : true
});

使用方法应该是没有问题的&＃xff0c;应该就是swiper版本的问题&＃xff0c;当然这问题的发生也特别的奇怪&＃xff0c;它阻碍页面的呈现。并且看浏览器的脸色。

问题的结果&＃xff0c;也只能是说swiper在版本更新的时候忽略了某些浏览器的兼容&＃xff0c;导致内部的某些地方阻塞。

解决的方案&＃xff0c;其实也很简单&＃xff0c;只能将就使用3.3.1的开发版。也就是

"https://cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.js">script>

如果你遇到和我类似的问题&＃xff0c;还希望和你进行沟通&＃xff01;