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操作word的参考代码
Oct 26 Javascript
jquery 可排列的表实现代码
Nov 13 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 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
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
js实现计算器功能
2020/08/10 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
在Python的Django框架中编写编译函数
2015/07/20 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
市场营销专业推荐信
2013/11/03 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
公休请假条
2014/04/11 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
读后感作文评语
2014/12/25 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python