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 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
js实现计时器秒表功能
Dec 16 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
如何使用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 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
php生成excel文件的简单方法
2014/02/08 PHP
js left,right,mid函数
2008/06/10 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
校友会欢迎辞
2014/01/13 职场文书
中学生运动会入场词
2014/02/12 职场文书
安卓程序员求职信
2014/02/28 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
物理课外活动总结
2014/08/27 职场文书
2014年工程师工作总结
2014/11/25 职场文书
党校毕业个人总结
2015/02/28 职场文书
货款欠条范本
2015/07/03 职场文书
运动会800米赞词
2015/07/22 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
AJAX实现省市县三级联动效果
2021/10/16 Javascript
我去timi了,一起去timi是什么意思?
2022/04/13 杂记