当前位置: 首页 > 编程笔记 >

使用CDN和AJAX加速WordPress中jQuery的加载

陆飞鸿
2023-03-14
本文向大家介绍使用CDN和AJAX加速WordPress中jQuery的加载,包括了使用CDN和AJAX加速WordPress中jQuery的加载的使用技巧和注意事项,需要的朋友参考一下

确定要放在Head部分 ?

事实上最好的情况是,js文件都不要在<head>部分进行加载,否则会影响到head部分的载入速度,直接导致网站的内容(body)载入延迟。如果你确定你不需要在head部分载入jQuery,请将载入代码移动到</body>前,准确的说是第一个会用到jQuery函数的javascript代码前。

当然,如果你需要head部分加载jquery,也请确保所有的js文件,包括jquery,都要放在调用CSS文件的代码之后,来实现同步下载。这也是Google官方给出的建议。例如下面的加载不推荐:

<script src=jquery.js></script>

<link href="style.css" .../>

而是应该使用:

<link href="style.css" .../>

<script src=jquery.js></script>

确定不要异步加载 ?

异步加载不会阻塞网页的载入,而非异步加载则会在加载本身js之前短暂阻塞浏览器的网页载入。这可能影响浏览体验。

如果你的加载代码是

<script type="text/javascript" src="jquery.js"></script>

那么你需要知道这可不是异步加载的方式,这是一种同步加载。如果你不需要在页面加载后及时的调用jquery函数,你完全可以用异步加载的方式,使得网页onload之前才加载jquery,大大加快载入速度。这样的代码看起来像是Google Analytics的代码。

(function(doc){

var j =doc.createElement("script");

j.type = "text/javascript"; j.async = true; j.src = "jquery.js";

var s = doc.getElementsByTagName("script")[0];

s.parentNode.insertBefore(j, s);

})(document);

但是经我观察,大多数的时候我们需要同步加载,尤其是你还需要引入jQuery插件的时候。

使用哪个版本的jQuery ?

wordpress总是自带最新的jQuery库,每一个版本的使用方法总有细微的不同。越新的jQuery版本,性能提升也越高。不过,某些jquery插件可能不太兼容太新的插件,而它自己也没有推出更新。也许有些你会使用的方法函数,到了新版本发现已经被改变,曾经能工作的现在已经不能了。对于这种情况,应该遵从这样的原则,那就是在确保兼容性的同时,做到使用尽可能新的jQuery库。

例如你以前使用1.6.2版本的jquery,到了现在你发现2.X某些函数有改变,你又不愿意去变更代码,就最好逐个调试,例如你发现1.7.2的兼容性就不错。这个时候就可以抛弃1.6.2,可以用1.7.2版本的jQuery去替换掉2.X的新版。

使用哪个jQuery CDN库 ?

jQuery实在是太大了!如果你的网站速度不是飞快,jquery肯定会影响到你的页面加载速度。好在百度、新浪、微软、Google等公司都推出了公共js库,方便网站主调用来缩短下载时间,而它们本身有着超快的CDN服务器,节约了下载时间。

目前用的比较普遍的是Google提供的jquery库:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

当然,百度在国内的访问速度是不可小视的:

<script type="text/javascript" src="https://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

新浪的CDN同样速度飞快:

<script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

不跟风,你也可以选择微软的jquery CDN:

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>

你可以直接更改上面出现的版本号来选择不同的版本。哪一个最快呢?如何选择呢?

如果你的网站访客来自海外的不少,建议选用Google,如果主要访客是国内,选择百度也没问题。但是百度在海外的访问速度可不及Google。

而且因为大多数的网站选择了Google的CDN,由于缓存原理,来访你的网站,可能google的CDN更快。

如果你不是确定自己的网站下载速度飞快,我建议最好选用上述的公开CDN来节省加载时间,同时也节省了流量。

真的要用jQuery吗?

如果你的网站只是需要用带jquery一个很小的函数,为什么要下载这么大的文件呢?为什么不可以jquery-free?

例如你可以考虑zepto.js,其设计目标“以最小的体积,做到最大兼容jQuery的API”。它在gzip压缩后仅仅为10KB。

另外,jQuery有着模块设计,可以选择自己只是需要的模块。你可以参考jquery builder。

加载jQuery的正确方式

说了那么多,加载jquery的正确方式是什么?

首先选好哪个CDN,或者你自己的网站托管js文件,并确定调用的位置在头部还是body,下面以Google的jquery库为例,普通的加载方式是

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

然而Google的服务在国内间歇性中断,所以我可以照顾一下国内访客,这么写:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script type="text/javascript">

window.jQuery || document.write(unescape('%3Cscript%20type%3D%22text/javascript%22%20src%3D%22//libs.baidu.com/jquery/2.0.3/jquery.min.js%22%3E%3C/script%3E'));

</script>

这样子即可实现如果jQuery未能加载成功,则自动加载百度的jquery库,做到万无一失了。

 类似资料:
  • 你可以通过执行npm run preview -- --report来分析webpack打包之后的结果,观察各个静态资源的大小。你可以发现占用空间最多的是第三方依赖。如vue、element-ui、 ECharts等。 你可以使用 CDN 外链的方式引入这些第三方库,这样能大大增加构建的速度(通过 CDN 引入的资源不会经 webpack 打包)。如果你的项目没有自己的CDN服务的话,使用一些第三

  • 问题内容: 我已经花了数小时阅读和尝试教程。我似乎找不到能解决问题的解决方案,我知道它应该很简单,但是我在AJAX方面苦苦挣扎。:( 我想从div中的链接加载发布内容。以下是我所拥有的。有人可以在JavaScript方面帮我吗?谢谢! 我想在div #loadAjaxHere中加载此代码 感谢您的帮助!! 问题答案: 好的,我认为经过长时间的反复试验,我已经解决了这一问题。 这似乎可行,但是如果这

  • 问题内容: 我熟悉以普通方式在jQuery中使用ajax。 我已经玩了一段时间了,但是不了解Wordpress使其正常工作需要 什么… 我在这里所摘录的内容来自一些教程或文章。 这在 functions.php中 (在子主题中): jQuery本身正在加载并正常工作。 我已经尝试过一些基本的ajax,如下所示: 除此之外,我不知道如何测试以确保它是否从一开始就正确地加载了…… 在这里的任何帮助,将

  • 问题内容: 我的问题: 我有index.html: 是这样的: 问题很简单。 当我按下按钮时,我想动态加载内容,而无需刷新。 提前致谢!请发表评论以进行任何必要的澄清。 编辑,更详细的解释: 我不确定自己是否很清楚(或者我可能不了解我缺乏技术技能的答案),所以我再说一遍。(改写) 我有一个带有提交按钮的HTML,该按钮通过POST方法发送变量。 PHP文件使用此变量,并在经过一定过程后插入并更新M

  • 问题内容: 有一个我无法解决的问题,我一直在互联网上浏览很多东西,但一无所获。 我有这个JavaScript,用于通过PHP进行Ajax请求。请求完成后,它将调用一个函数,该函数使用Google Visualization API绘制带注释的时间轴以呈现数据。 该脚本在没有AJAX的情况下也能很好地工作,如果我内联完成所有工作,那么它会很好,但是当我尝试在AJAX中进行操作时,它就无法工作!!!

  • 我想用cdn的axios 但是我得到了一个错误:拒绝加载脚本的https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js'因为它违反了以下内容安全策略指令:“script src'self'”。请注意,未显式设置“script src elem”,因此将“script src”用作回退。