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 解析xml文件
Aug 09 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 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源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
Python中bisect的用法
2014/09/23 Python
20个常用Python运维库和模块
2018/02/12 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
Django之模板层的实现代码
2019/09/09 Python
关于Keras Dense层整理
2020/05/21 Python
Python json格式化打印实现过程解析
2020/07/21 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
中医专业应届生求职信
2013/11/17 职场文书
职业生涯规划怎么写
2013/12/29 职场文书
文明城市创建标语
2014/06/16 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
党员转正申请报告
2015/05/15 职场文书
文化大革命观后感
2015/06/17 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
高一数学教学反思
2016/02/18 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android