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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
Javascript 命名空间模式
Nov 01 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
详解vue-cli3使用
Aug 14 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
vue与django集成打包的实现方法
Nov 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
一些PHP写的小东西
2006/12/06 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
JavaScript继承方式实例
2010/10/29 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
vue路由分文件拆分管理详解
2020/08/13 Javascript
Python脚本实现自动发带图的微博
2016/04/27 Python
详解Python的Lambda函数与排序
2016/10/25 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
关于python3中setup.py小概念解析
2019/08/22 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
浅谈django channels 路由误导
2020/05/28 Python
财务会计毕业生自荐信
2013/11/02 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
岗位职责怎么写
2014/03/14 职场文书
办理房产过户的委托书
2014/09/14 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
2015年药店工作总结
2015/04/20 职场文书
楚门的世界观后感
2015/06/03 职场文书
2015入党自传格式范文
2015/06/26 职场文书
运动会广播稿20字
2015/08/19 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电