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 相关文章推荐
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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中static关键字原理的学习研究分析
2011/07/18 PHP
PHP中cookie知识点学习
2018/05/06 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
学习ExtJS border布局
2009/10/08 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
Python实现字典的遍历与排序功能示例
2017/12/23 Python
python学生管理系统
2019/01/30 Python
python与字符编码问题
2019/05/24 Python
python小项目之五子棋游戏
2019/12/26 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
高中毕业生生活的自我评价
2013/12/08 职场文书
医院辞职信范文
2014/01/17 职场文书
库房管理员岗位职责
2014/03/09 职场文书
工商管理本科生求职信
2014/07/13 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
导游欢迎词范文
2015/01/23 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python