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实现网页上的浮动广告的简单方法
Jun 14 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
js数组的操作指南
Dec 28 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
详解JS数值Number类型
Feb 07 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
vue实现div拖拽互换位置
Jul 29 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
Terran剧情介绍
2020/03/14 星际争霸
Views rows style模板重写代码
2011/05/16 PHP
php适配器模式介绍
2012/08/14 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
详解vue 组件
2020/06/11 Javascript
python strip()函数 介绍
2013/05/24 Python
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
思想汇报范文
2013/11/04 职场文书
大学生党员自我批评
2014/02/14 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
安全协议书
2014/04/23 职场文书
北京奥运会主题口号
2014/06/13 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS