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 计算当天是本年本月的第几周
Mar 22 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
详解微信小程序开发用户授权登陆
Apr 24 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
windows xp下安装pear
2006/12/02 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
Python中扩展包的安装方法详解
2017/06/14 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
Python实现微信小程序支付功能
2019/07/25 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
新护士岗前培训制度
2014/02/02 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
公开承诺书格式
2014/05/21 职场文书
大班上学期个人总结
2015/02/13 职场文书
2015年服务员工作总结
2015/04/08 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
交通事故被告代理词
2015/05/23 职场文书
单位领导婚礼致辞
2015/07/28 职场文书