headjs实现网站并行加载但顺序执行JS


Posted in Javascript onNovember 29, 2016

http://headjs.com/

并行加载JS,但是执行的时候却按顺序执行,提高网站速度

<script src="js/head.min.js"></script>
<script type="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() {
........
});
/* part 1 */
head.js("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");
/* part 2 */

其中第一部分是页面加载完成后要执行的 JS 脚本,第二部分是执行脚本前先引用的外部 JS 文件地址,很明显如果想要升级使用的 Jquery 版本,我只要修改这个文件就行了而不用变动页面内容。这对于采用静态发布的 MovableType 来说很有用。

2、CSS3 属性支持度检测。说起来很拗口,意思就是可以分辨出浏览器是否支持某条 CSS3 属性。如果支持某条属性,那么将会在页面的 HTML 节点上加上一个以这个属性命名的 class ,如果不支持则这个 class 的名字就有个 no- 前缀。比如,IE6 不支持 boxshadow 属性的,那么浏览这使用 IE6 访问页面时,页面的 html 节点就是类似这样的:<html class="no-boxshadow"> 。

这样就可以在 CSS 文件里设定当浏览器不支持某个高级属性的时候用其他的方案来替代。

.boxshadow .box{
box-shadow: 0px 0px 5px #bbb;
}
.no-boxshadow .box{
border: 2px solid #bbb;
}

目前 head.js 可以检测的 CSS3 属性有 borderimage borderradius boxshadow opacity reflections rgba textshadow transforms transitions 。

3、head.js 可以检测浏览器的种类、版本,还可以检测当前访问的页面相对于网站根目录的路径,更酷的,head.js 可以动态地检测到浏览器当前窗口大小。并且,把前面这几个属性都动态地传递给 html 节点,添加上相应 class !这样再配合 CSS 就可以制作出一个适应各浏览器、每个页面都独特得、随着窗口大小的改变自动变换排版的酷设计了。

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
jQuery拖动图片删除示例
May 10 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
如何使用headjs来管理和异步加载js
Nov 29 #Javascript
JS针对Array的各种操作汇总
Nov 29 #Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 #Javascript
巧用数组制作图片切换js代码
Nov 29 #Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 #Javascript
文件上传插件SWFUpload的使用指南
Nov 29 #Javascript
jquery结合html实现中英文页面切换
Nov 29 #Javascript
You might like
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
python中反射用法实例
2015/03/27 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
python 调用钉钉机器人的方法
2019/02/20 Python
python对象与json相互转换的方法
2019/05/07 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
中专生的个人自我评价
2013/12/11 职场文书
青安岗事迹材料
2014/05/14 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
出纳岗位职责范本
2015/03/31 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
 python中的元类metaclass详情
2022/05/30 Python