2016年11月25日星期五

博客优化记录:整理jquery的调用

臧超博客博主建立了一个blogger大陆博友QQ群,陆陆续续的,有不少爱好者进入这个群,大家很热心讨论着,这不,昨天有一个blogger博友在看了我的博客代码后,指出有几处jquery的调用问题,我回来进行试着修改,修改后感觉对博客的加载速度有大大的提高,今天遂将心得记录在此,具体修改可以到我模板的开源库(模板gitbub)看看。

以前,由于自己对代码修改完全是陌生的,在修改原博客模板的时候总是小心翼翼,不敢乱动里面的代码,为了解决国内访问问题,我将博客xml文档中的jquery的相应版本一一下载到本地,然后全部上传到七牛云,再从七牛调用到xml文档中,这样成功的将博客搭建,速度也可以。
本打算就这样一直下去,并不想对jquery的调用再作任何变动了,前几天经那位博友提示,发现国内有一个网站(http://www.bootcdn.cn/)提供全套的jquery库,直接可以引用,于是我试了一试,还非常不错,这是其一。

其二,原模板中的jquery版本较旧,在最初修改的时候,找的版本与原版中是一一对应的,这次进行修改的时候,换成了最新的版本,结果仍然可以,这又是一个新发现。同时我删除了在使用小工具时的代码中引用的代码,因为一个博客中同类型的jquery只需要一个。

其三,我删除了一个jquery.migrate的库,结果也没有影响,后来一查这个是用于插件更新的,删除后并不影响网站的功能,同时也减少请求内容,增加网站加载速度。

其四,我将网站中涉及jquery.sidr的代码(官方网站在这里,如果使用请看官方说明,功能是实现侧边栏菜单弹出和隐藏,主要是在手机浏览网站时,有一个菜单按钮功能的实现)进行了调用,这个也是自己发现的问题,原模板中是在github中的引用,我找到jquery.sidr的官方网站,查看了它如何使用,依葫芦画瓢,结果网站侧边栏菜单的按钮却失效了。失效后,我鼠标悬念在侧边栏菜单的按钮上,发现url链接中显示一段sidr-main的代码,我想这段代码肯定是控制这个功能的,于是我再对比备份的未修改的xml文档和修改过的xml文档,发现真是被我删掉了,我从未修改的相应部分代码中,凭经验将与此功能相关的代码保留了下来用<script>标签包裹起来,再上传到后台中,结果侧边栏菜单按钮的功能就恢复了。以下是本博客使用的jquery.sidr调用方法,另外还有其它几种,相对这一种是比较简单的。
<!DOCTYPE html>
<html>
  <head>
    <!-- Your other stuff  (you can have problems if you don't add minimum scale in the viewport) -->
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <!-- Include a Sidr bundled CSS theme -->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.sidr/2.2.1/stylesheets/jquery.sidr.dark.min.css">
  </head>
  <body>
    <!-- More stuff -->
    <!-- Include jQuery -->
    <script src="//cdn.jsdelivr.net/jquery/2.2.0/jquery.min.js"></script>
    <!-- Include the Sidr JS -->
    <script src="//cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>
  </body>
</html>
Share:

0 评论:

文章分类