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 相关文章推荐
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
JS动画效果打开、关闭层的实现方法
May 09 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
javascript生成大小写字母
Jul 03 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
原生JS实现层叠轮播图
May 17 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
JavaScript异步操作的几种常见处理方法实例总结
May 11 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
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
UNIX文件系统分类
2014/11/11 面试题
小孩百日宴答谢词
2014/01/15 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
世界文化遗产导游词
2019/08/07 职场文书
导游词之西递宏村
2019/12/10 职场文书
Python+Appium新手教程
2021/04/17 Python
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
pandas进行数据输入和输出的方法详解
2022/03/23 Python
MySQL分布式恢复进阶
2022/07/23 MySQL
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技