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点击事件链接的问题解决
Apr 25 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
vue路由切换时取消之前的所有请求操作
Sep 01 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
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
PHP 无限级分类
2017/05/04 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python探索之ModelForm代码详解
2017/10/26 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
HTML5标签小集
2011/08/02 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
国培教师自我鉴定
2014/02/12 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
函授生自我鉴定
2014/03/25 职场文书
依法行政工作汇报
2014/10/28 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
golang中的struct操作
2021/11/11 Golang
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang