headjs实现网站并行加载但顺序执行JS
http://headjs.com/
并行加载JS,但是执行的时候却按顺序执行,提高网站速度
<scriptsrc="js/head.min.js"></script> <scripttype="text/javascript">head.js("js/jquery-1.6.1.min.js","js/jquery.validate.min.js","js/my_validate.js");</script>
注意:head.js("js/jquery-1.6.1.min.js","js/jquery.validate.min.js","js/my_validate.js");里面包含的JS在本地文件夹里面必须有,否则在IE中部执行
如:head.js("js/jquery-1.6.1.min.js","js/jquery.validate.min.js","js/alert.js");如果本地没有jquery.validate.min.js文件,在IE下将不执行alert.js
1、异步加载其他JS文件,比如Jquery。虽然之前我也是把引用的外部JS放在页面底部的,但是用了head.js之后,我可以把所有JS内容汇集成一个文件,放在页面的最后。然后就可以在这个JS文件里来引用其他外部JS。比如我的页面里最下方引用了一个JS内容为:
head(function(){ ........ }); /*part1*/ head.js("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"); /*part2*/
其中第一部分是页面加载完成后要执行的JS脚本,第二部分是执行脚本前先引用的外部JS文件地址,很明显如果想要升级使用的Jquery版本,我只要修改这个文件就行了而不用变动页面内容。这对于采用静态发布的MovableType来说很有用。
2、CSS3属性支持度检测。说起来很拗口,意思就是可以分辨出浏览器是否支持某条CSS3属性。如果支持某条属性,那么将会在页面的HTML节点上加上一个以这个属性命名的class,如果不支持则这个class的名字就有个no-前缀。比如,IE6不支持boxshadow属性的,那么浏览这使用IE6访问页面时,页面的html节点就是类似这样的:<htmlclass="no-boxshadow">。
这样就可以在CSS文件里设定当浏览器不支持某个高级属性的时候用其他的方案来替代。
.boxshadow.box{ box-shadow:0px0px5px#bbb; } .no-boxshadow.box{ border:2pxsolid#bbb; }
目前head.js可以检测的CSS3属性有borderimageborderradiusboxshadowopacityreflectionsrgbatextshadowtransformstransitions。
3、head.js可以检测浏览器的种类、版本,还可以检测当前访问的页面相对于网站根目录的路径,更酷的,head.js可以动态地检测到浏览器当前窗口大小。并且,把前面这几个属性都动态地传递给html节点,添加上相应class!这样再配合CSS就可以制作出一个适应各浏览器、每个页面都独特得、随着窗口大小的改变自动变换排版的酷设计了。
以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持毛票票!