关于 Swiper 的坑——只有3.3.1的非压缩版正常,非常奇怪-阿里云开发者社区

开发者社区> 沉默王二> 正文

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

简介: 关于 Swiper 的坑——只有3.3.1的非压缩版正常,非常奇怪
+关注继续查看

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


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


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


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


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


当时页面引用的swiper是这样的:


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


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


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


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


然后开启ngrok,奇怪的现象发生了,我的手机iPhone6:




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


现在我确信代码是在某个地方出现了bug!,确定无疑了!


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


把压缩版换成开发版:


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


这个时候,访问竟然正常了!!!!!!!!!!!!!!神奇的swiper!!!!!!!!!!!!


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


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


是不是使用swiper的时候出错了呢?

这问题我也考虑过,试验过。


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


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


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


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


<script src="https://cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.js"></scri


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用注解开发| 学习笔记
快速学习 使用注解开发
19 0
案例_点菜| 学习笔记
快速学习案例_点菜
13 0
工业大脑介绍|学习笔记
快速学习 工业大脑介绍
12 0
我为什么要放弃 RESTful,选择拥抱 GraphQL
REST作为一种现代网络应用非常流行的软件架构风格,自从Roy Fielding博士在2000年他的博士论文中提出来到现在已经有了20年的历史。它的简单易用性,可扩展性,伸缩性受到广大Web开发者的喜爱。
6 0
说好今年交付的这些智能车,谁比较容易跳票?
说好今年交付的这些智能车,谁比较容易跳票?
8 0
记录一次用 curl 测试账户登录服务接口
问题 后台开发服务接口时,经常会用到很多测试工具,比如 Postman、Apipost、Jmeter 等。这些都是带有图形用户界面的工具,有没有一些显得高大上的方法呢?嗯,是有的。 比如今天开发某个账户登陆服务接口时,就想到了先用命令行来测试一下服务接口是否好用。
11 0
我为什么要放弃 RESTful,选择拥抱 GraphQL
REST作为一种现代网络应用非常流行的软件架构风格,自从Roy Fielding博士在2000年他的博士论文中提出来到现在已经有了20年的历史。它的简单易用性,可扩展性,伸缩性受到广大Web开发者的喜爱。
8 0
分析 chrome 源码中 WARN_UNUSED_RESULT 宏
问题 今天浏览 chrome 源码时,发现了一个非常有意思的宏定义,它就是 WARN_UNUSED_RESULT ,用法如下图所示:
9 0
解决:x509: cannot validate certificate for IP 报错
问题 今天调用上传接口上传文件时,遇到了一个 x509 类型报错,具体报错信息如下: 2021-10-15 17:46:13.145 ERROR oss/upload.go:210 upload process Failed {"error": "Post "https://192.168.215.139:9443/store/file/upload\": x509: cannot validate certificate for 192.168.215.139 because it doesn't contain any IP SANs"} panic: send on closed cha
6 0
【保姆级教程】Spring Boot 单元测试
【保姆级教程】Spring Boot 单元测试 一、 单元测试的概念 概念: \1. 单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证。在Java中单元测试的最小单元是类。
6 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载