最近一段时间比较关注前段性能优化。昨晚闲来无事，就想把自己最近这段时间了解的前段性能优化的方法实践一下啊。
使用Google Chrome的开发人员工具（这个工具很给力，再加上PageSpeed插件，进行页面性能优化很给力），观察了一下“地瓜哥”的加载速度。惊奇地发现，在jQuery类库的加载时间，竟然达到5秒左右。怎么这么高啊？
《高性能JavaScript》讲：“大多数浏览器使用单进程处理UI更新和JavaScript运行等多个任务，而同一时间只能有一个任务被执行。JavaScript运行了多长时间，那么在浏览器空闲下来响应用户输入之前的等待时间就有多长。从基本层面说，这意味着<script>标签的出现使整个页面因脚本解析、运行而出现等待。不论实际的JavaScript代码是内联的还是包含在一个不相干的外部文件中，页面下载和解析过程必须停下，等待脚本完成这些处理，然后才能继续。”那么，打开我网站之后，中间要等待5秒中才能进行继续。这样的用户体验是极差的。
许多研究都表明，用户最满意的打开网页时间，是在2秒以下。用户能够忍受的最长等待时间的中位数，在6～8秒之间。这就是说，8秒是一个临界值，如果你的网站打开速度在8秒以上，那么很可能，大部分访问者最终都会离你而去。
根据一些抽样调查，访问者倾向于认为，打开速度较快的网站质量更高，更可信，也更有趣。相对应地，网页打开速度越慢，访问者的心理挫折感就越强，就会对网站的可信性和质量产生怀疑。（参考网页打开速度的心理学）
出现这么差劲的性能问题，看来必须优化一下。而针对JavaScript的优化，无非就是使用工具将源代码压缩，开启服务器的Gzip压缩等。这些已经做过了：Wordpress默认使用的jQuery的mini版；服务器的Gzip压缩已经开启。
另外，还有一个比较有效的优化方法就是使用CDN服务。不过……
这里，先对CDN的相关知识简单普及一下：
CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。（参考内容分发网络）
但是，自己一个小小的个人博客网站是不可能建立一个CDN服务的。所以，只能找一些免费的CDN服务。
其实，很早就了解到Google很早就通过Google Ajax Library API(GALA)提供jQuery等比较流行的JavaScript库了。但是，经过测试，这个服务就像Google的搜索一样，很不稳定。连主页面都打不开。（具体原因就不说了，大家都懂得。）看来，只能“另作打算”了。接着搜索，发现微软竟然也提供免费的jQuery的CDN服务（详见：Microsoft Ajax Content Delivery Network）。
然后，自己写了一个测试，测试一下加载速度。源代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
/>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"IE=EmulateIE7"
/>
<
title
>测试微软的CDN服务</
title
>
<
script
type
=
'text/javascript'
src
=
'http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js'
></
script
>
<
script
type
=
'text/javascript'
>
$(document).ready(function(){
$("#isCompeleted").text("加载已经完成");
});
</
script
>
</
head
>
<
body
>
</
body
>
</
html
>
|
发现，加载速度大概在500毫秒，比使用我自己网站中的jQuery库快了大概十倍。怎一个爽字了得啊？！
接下来，就是找Wordpress中是在哪里加载jQuery库了。
在Wordpress中，一个模板或者插件使用到某个类库，会使用wp_enqueue_script函数来调用需要的类库。Wordpress会将%WP_HOME%/wp-includes/js目录下所有的类库进行登记。所以，只需要在登记时，把登记的路径修改为微软CDN服务提供的jQuery链接即可。Wordpress中登记JavaScript库的工作是在%WP_HOME%/wp-includes/script-loader.php中完成的。所以，在这个文件中的120行（Wordpress 3.4.1）中做如下修改：
|
1
2
3
|
// $scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.7.1' ); //注释掉原来的，做个备份。
$scripts
->add(
'jquery'
,
'http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js'
, false, null );
|
我看网站的源代码了，加载的是jquery-1.7.2.min.js。所以，果断选择这个版本。另外，如果最后一个参数传’1.7.2′ 的话，在页面上<script>标签中的URL就成了以“.js?ver=1.7.2”。一般使用JavaScript时，不会带上这个参数的。并且，如果某人访问我的网站之前正好访问量一个也使用了微软的这个CDN服务的网站，如果上一个网站没有这个参赛，而我的网站有，则这个jQuery类库会再次加载一边，增加用户等待时间。对提高用户体验不利。（这点没有写例子测试。是我的猜测。）所以，经过我的测试，传null时，则不会出现“?ver=1.7.2”，则果断传null。
经过，这么折腾，网页加载速度提高大概2-3秒。（微软的CDN服务的加载时间不是很稳定，经过我多次测试，时间一般在1秒一下。）分享很出来，希望大家都试试，把提高一下我们的网页的加载速度。
参考资料：
用Google Ajax Library API的jquery替换WordPress的内置jquery
wordpress优化 使用SAE提供的jquery.js替代wordpress原生的
使用Google AJAX Libraries API替换WordPress自带的js库
104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
