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 showModalDialog 内跳转页面的问题
Nov 25 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
js实现简单的无缝轮播效果
Sep 05 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
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
js正确获取元素样式详解
2009/08/07 Javascript
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
小学教育毕业生自荐信
2013/11/18 职场文书
小学安全教育材料
2014/02/17 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
2014年度培训工作总结
2014/11/27 职场文书
优秀班主任申报材料
2014/12/16 职场文书
大学生个人学习总结
2015/02/15 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
python解析json数据
2022/04/29 Python