因为用到了很多特效，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在头部就可以了。

昨天研究了下“给wp菜单加上随机颜色”，提到没办法用php钩子解决重复颜色的问题，@phoetry 给了一个用js的解决的方法，这下完美了。

var colors=['#F99D35','#FB353E','#301141','#388CDE','#FE0096','#1BA0E1','#339933','#E91104'];//定义的颜色数组
colors.sort(function(){return Math.random()>.5?1:-1;});
//alert(colors);//测试下
$('.menu-item a').each(function(i){
this.style.backgroundColor=colors[i];
})

再次表示感谢~哦，顺便看到phoetry写的phZoom看图插件不错，刚替换了默认的slimbox，要是能加上支持div的缩放那就更好了…

以前就知道wp3.0自定义菜单功能可以自己设置css类，对应不同的样式。我现在想随机指定菜单背景颜色，好用在新主题Abook的导航菜单上，研究了下如何给wp3.0以上的菜单加上随机颜色，分析了下wp的源代码，结果找到了nav_menu_css_class这个地方，加上个钩子搞定。

下面这段放function.php里面，给菜单项加上对应的随机css class。

<?php 

/**
    给nav菜单加上不同的颜色by winy 

*/ 

function Colorfullnav($classes){ 

$c = array(1,2,3,4,5,6,7,8,9); 

$classes[]= 'menu-item-color_' .$c[mt_rand(0, count($c)-1)]; 

return $classes; 

} 

add_filter('nav_menu_css_class', 'Colorfullnav');

然后在style.css里面设置颜色代码，例如：

.menu-item-color_1 a{background: #F99D35;}
.menu-item-color_2 a{background: #FB353E;}
.menu-item-color_3 a{background: #301141;}
.menu-item-color_4 a{background: #388CDE;}
.menu-item-color_5 a{background: #000000;}
.menu-item-color_6 a{background: #FE0096;}
.menu-item-color_7 a{background: #1BA0E1;}
.menu-item-color_8 a{background: #339933;}
.menu-item-color_9 a{background: #E91104;}

效果可见Abook现在的菜单背景颜色，仿标签，花花绿绿的….

进一步思考：现在的问题是如何保证不同时出现一个颜色呢?我知道增加颜色种类可以减少几率。。。请各位朋友指教

采用jQuery动态加载JavaScript文件可以减少js文件大小，提供更快的网页加载速度。jQuery中可以采取$.getScript方法异步加载。使用实例如下，相当于$.ajax方法：

$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});

其它参数可以查看官方的API：传送门

WordPress主题中也可以采取这样的方法动态加载js，实现按需加载，比如在Abook这个主题中，我主要用了两处js的动态加载。

（一）ajax评论绑定和工具栏载入

效果就是访问者写评论的同时，载入ajax评论提交按钮的绑定（为免刷新提交评论准备）和评论工具栏（该工具栏来自qiqiboy的文章）的载入，当准备好以后显示载入完成提示和渐显工具栏。方法如下：

先定义一个函数：

var commentjs=function(){
	$.getScript(themeurl+"js/comment.js");//调用评论工具栏和ajax评论提交需要的js
	$('#toolBar').animate({opacity: 'show'}, 300);//载入工具栏
	$('#comment').unbind('focus',commentjs);//取消自身绑定focus的动作，避免重复加载
}

在用户鼠标焦点到评论框时，执行js的加载和绑定，相关代码如下：

$('#comment').bind('focus',commentjs);//绑定上面的commentjs函数

（二）实时头像相关js的动态载入

实时头像指的是在新访问者第一次在评论处输入邮箱地址时即时的显示所访客的gravatar头像，问题就是负责转换邮箱地址的一段8kb的js有点大，不想让每次都加载这个家伙。以前我有写一篇通过php结合cookie判断新访客来载入这段js的方法：实时头像

现在我用$.getScript方法同样可以实现：

var gravatarjs=function(){
	$.getScript(themeurl+"js/realgravatar.js");
	$('#email').unbind('focus',gravatarjs);//取消绑定focus的动作
}
$('#email').bind('focus',gravatarjs);

注：代码中themeurl是主题地址。

其实两个js文件并不大，主要是贯彻按需加载js的原则，给有洁癖的同学，折腾完毕~