因为用到了很多特效，js比较大，而且jQuery随着版本号增加，体积也越来越大了，我一直想优化下。前面写了篇伪技术文，介绍了《js的动态加载》，而现在想进一步优化下速度。
首先，以前调用jQuery库都用的Google的Api，现在国内环境不太稳定。。原因大家都懂的，Google的速度不能保证，换用微软提供的Api，同时为了保证安全，本地服务器留一个备份，防止万一外面调用的jQuery加载不上。以下放到wp主题或者其他网页的头部，</head>标签之前，优先保证js库加载。
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"></script> <script type="text/javascript"> <!-- !window.jQuery && document.write('<script src="<?php bloginfo('template_url'); ?>/js/jquery-1.4.4.min.js" type="text/javascript"><\/script>'); //--> </script>
我用的jQuery版本比较低，1.4.4足够了，可自行替换。本地保存一份压缩后的js放在wp主题js目录下面。
其次，页面的各种js效果采用仿Google analytics的方法异步加载，代码如下：
<script type="text/javascript"> <!-- var core = document.createElement('script'); core.type = 'text/javascript'; core.async = true; core.src = '{$jsFileURI}';//这里输入js地址 var s = document.getElementsByTagName('head')[0]; s.appendChild(core); //--> </script>
这段js也放在主题头部，注意上面给script加上了async标签，输出结果如下：
下面说说这样做的道理：
异步载入js，不会阻塞其它元素的加载，速度比同步方式更快，比如我页面的加载，虽然我把js放在头部，但是图片比js优先加载：
相比把所有js放在页面底部的做法，能更快的载入特效，比如对于页面DOM操作比较多的主题来说，能够更快的载入各种特效，至少视觉上减少了访客的等待时间。
最后，为啥不异步载入jQuery呢（体积巨大的一坨），因为异步的方式不能保证js加载的顺序。。。要是我页面的js加载比库更快，那么就会出错。但有很多方式能够做到异步按顺序加载js，比如有个head.js,能够像图片一样加载页面所有js，只需一个js在头部就可以了。
