用headjs来管理和加载js 提高网站加载速度

现在有许多成熟的js模块加载器，比如requirejs和seajs等，但是对一些小的项目来说，它们的功能可能太过于“强大”，也许我们只是想要有一个能动态加载js的功能，或许我们只是想装B一下，让自己写出的页面没有一大堆的<script src=”a.js”></script>这样的东西。前面说的两种js加载器都是更强调模块性，也就是更强调js文件的组织和管理，更适用于大的项目。

就像刚刚说的，我只想有一个js文件加载器，我只需提供给它一个js文件的地址就行了的那种呢？那就进入我们的主题了，使用headjs吧。headjs其实是一整套的工具，但我只想介绍的是它其中的Javascript Loader功能。以下是它的基本用法：

head.js("/path/to/file.js");

最简单的用法，提供一个js的文件的地址给它作为参数，然后它就会默默的在背后进行无阻塞的加载了，至于什么时候加载完可用了，谁也不知道。

head.js("/path/to/file.js", function() {
 /*js加载完成*/
});

最基本的用法，除了提供一个地址参数外，还提供一个回调函数作为第二个参数。在js加载完成后，回调用回调函数，你可以把依赖该js的代码写在回调函数里。

head.js("file1.js", "file2.js", ... "fileN.js");

提供多个js文件地址，这些js会并行的加载，但会按照参数给定的先后顺序执行这些文件，例如即使file2.js比file1.js先加载完成，但它还会一直等到在file1.js加载和执行完后再执行。

head.js("file1.js", "file2.js", function() {

});

并行加载多个js,并按参数顺序执行，所有js准备完成时，执行回调函数。

head.js("file1.js");
head.js("file2.js");
head.js("file3.js");

多个js并行加载，并且谁先加载完就先执行谁

head.js("file1.js").js("file1.js").js("file3.js");

上一种方法的链式调用法

这样的话用headjs来加载js文件基本都够用了，而且还能处理依赖关系。当是如果你继续装B,弄一个网站，巴不得什么特效都用上，这里找一个jquery插件，那里再找一个，总之就是弄非常多的文件，其中又有复杂的依赖关系，那该肿么办？这还用问吗，以上的那几个用法完全能解决。但转念一想，既然装B那就一装到底吧，现在不是流行模块什么的吧，那咱也整个模块吧，但不是像commonJS说的那么复杂，就是定义一个模块，然后规定这个模块是有那几个js文件组成的，其中的依赖关系又如何等等。那就动手吧，headjs使用的是MTI协议，修改下它应该也是没问题的吧。屌丝又装高富帅了，其实说是修改，倒不如说是增加几段代码进去，而且加载依赖等功能完全是用headjs的api实现的。

这里，我给headjs的新增了两个方法，一个是add(name,file,preload)添加模块，参数name是模块名称，file是要用到的js文件地址,如果有多个文件，并且存在依赖关系，则file可以是一个数组，这个数组的里元素就是用到的文件地址，并且按数组元素的顺序进行依赖。第三个参数preload用指定是否预加载模块文件，如果为false,则在使用该模块的时候才会加载文件，为true时则在定义模块时就会立即加载所用到的文件，默认为false

另一个是use(name,callback),这个方法用来使用模块。name是用add()方法定义的模块名，callback是该模块已经加载完成后调用的回调函数。

于是我们就可以这样来使用headjs了：

head.add('jqueryui',[jquery.js,jqueryui.js]);//定义模块
head.use('jqueryui',function(){
 //可以使用jqueryui啦
});

如果模块很多，则模块的定义代码可以单独写在一个文件里，并且引入了headjs的后，就立即加载该模块定义文件。这个过程可以很简单的像这样来实现：

<script src="head.js" init="init"></script>

看到那个init属性没有，我把它叫做初始化属性，init的值表示文件名，例如上面init就代表与headjs同目录的init.js这个文件。所谓的初始化就是在使用use()之前，init文件一定是已经加载好了的。所以可以把模块的定义写在初始化文件中。

<script src="head.js" init="init" main="main"></script>

尼玛，这是要闹哪样啊，怎么又多了个main属性，好吧，我承认是看到别人有这个东西于是手贱也跟风弄了一个。这个main属性代表的是模块名，就是head.js与init.js文件都加载完成后，就会自动执行main属性指定的模块（当然要先在init中定义该模块）。所以有了这两个东东后，我们就可以在页面没有一句js代码的情况下（除了引入headjs那段标签),执行很复杂的代码了。

还有一个要说明的地方，就是模块文件的存放位置。模块文件应该和head.js存放在同一个目录，比如head.add(‘a','a.js'),这里的a.js的路径是和head.js相同的，就是说模块文件的路径是相对于head.js存放的路径的，而且只可以往下走，不可以往上走，比如：

head.add(‘a','a/a.js')//正确

head.add(‘a','../a.js')//错误，不能往上定位

最后，放上修改过后的head.js源文件，不是压缩版，里面改的地方都有注释。

以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 让javascript加载速度倍增的方法(解决JS加载速度慢的问题)

    通常我们的网站里面会加载一些js代码,统计啊,google广告啊,百度同盟啊,阿里妈妈广告代码啊, 一堆,最后弄得页面加载速度很慢,很慢. 解决办法:换一个js包含的方式,让javascript加载速度倍增. 把通常加载方式: <script src="xxxx.js"></script> 改变成: 复制代码 代码如下: <script type="text/javascript"> document.write("&l

  • Windows下使用apache模块实现合并多个js、css提高网页加载速度

    Windows下使用apache模块实现合并多个js、css提高网页加载速度

    现在的网站表现力越来越丰富,页面加载的js和css自然也越来越多.当网站页面上的js和css太多,浏览器打开页面的速度就会很慢,明显降低了用户的体验.使用mod_concatx, 可以合并多个文件在一个http响应报文中,可以有效提高js/css的加载速度. 示例效果如下: mod_concatx模块是在mod_concat基础上修改的,感谢他们的工作. 原有的mod_concat模块有很大的参考价值,但实际作用不大. 该模块存在以下三个问题: 1.每次都会重新向客户端发数据,没有合理利用浏览器

  • Javascript加载速度慢的解决方案

    通常我们的网站里面会加载一些js代码,统计啊,google广告啊,百度同盟啊,阿里妈妈广告代码啊,一堆,最后弄得页面加载速度很慢,很慢. 解决办法:换一个js包含的方式,让javascript加载速度倍增. 把通常加载方式: 复制代码 代码如下: <script src="xxxx.js"></script> 改变成: 复制代码 代码如下: <script type="text/javascript"> document.writ

  • 如何提高javascript加载速度

    方法如下: 1.将所有<script>标签放在尽可能接近<body>标签底部的位置,以保证页面在脚本运行之前完成解析尽量减少对整个页面下载的影响 2.限制页面的<script>总数也可以改善性能.每当页面解析碰到一个<script>标签时, 紧接着有一段时间用于代码执行.最小化这些延迟时间可以改善页面的整体性能. 3.减少引用外部脚本文件的数量.每个 HTTP 请求都会产生额外的性能负担,下载一个 100KB 的文件比下载四个 25KB 的文件要快.总之,减

  • js 延迟加载 改变JS的位置加快网页加载速度

    当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点: 1.延迟加载js代码 复制代码 代码如下: <script type="text/javascript" src="" id="my"></script> <script type="text/javascript"> setTimeout(&quo

  • jsp的注释可能会影响页面加载速度让代码扔继续执行

    在jsp页面使用"<!-- -->"的注释,注释里面的java代码还是会得到执行,可以再查看页面源代码上看到执行完成的内容,这样就会让不希望执行的代码得到执行,影响加载速度.比如如下代码: 复制代码 代码如下: 性别:<select name="qureyItemGroup.sex" class="selinp" style="width:75px;"> <option value="&

  • 用headjs来管理和加载js 提高网站加载速度

    现在有许多成熟的js模块加载器,比如requirejs和seajs等,但是对一些小的项目来说,它们的功能可能太过于"强大",也许我们只是想要有一个能动态加载js的功能,或许我们只是想装B一下,让自己写出的页面没有一大堆的<script src="a.js"></script>这样的东西.前面说的两种js加载器都是更强调模块性,也就是更强调js文件的组织和管理,更适用于大的项目. 就像刚刚说的,我只想有一个js文件加载器,我只需提供给它一个js

  • 如何使用pace.js美化你的网站加载进度条详解

    如何使用pace.js美化你的网站加载进度条详解

    目录 前言 pace.js介绍 1.配置介绍 2.主题 3.收集器 4.元素 5.重新启动规则 6.API 在网站中的应用 总结 前言 最近做网站体验优化的时候突然发现一个好东西,pace.js(加载进度条插件),gzip之后只有几kb, 简单好用,特地分享出来,也作为自己的一个学习总结. pace.js介绍 pace.js是一个自动加载页面进度栏的小插件,它可以自动监视您的Ajax请求,事件循环滞后,文档就绪状态以及页面上的元素来确定进度.在ajax导航上,它也能进行监听,同时他也可以很方便的

  • js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)

    问题缘由:负责公司的开发平台研发工作,考虑的知识产权的保护工作,必须要考虑java的加密技术和js脚本的加密技术.在目前java加密很容易破解的情况下,还是先搞定js的加密和压缩,一方面可以提高页面加载性能,另外一方面也希望辛苦研发出来的成果得到一定的保护. 研究过程: 1.先强烈鄙视一下哪些随便转载文章的家伙,给我制造了很大的麻烦!!网上很多帖子都不靠谱.. 2.首先想了解jquery使用什么压缩的, 网上找了半天,说法不一样,后来还是在jquery官网的最频繁问题中找到了答案,但这已经是绕了

  • 快速实现JS图片懒加载(可视区域加载)示例代码

    快速实现JS图片懒加载(可视区域加载)示例代码

    js懒加载图片 如何提高网页加载速度?在网页中有许多img标签,这些标签就是图片,其属性src则是指向服务器地址,当浏览器从上往下读取到src标签中的地址时,浏览器就会开启线程,加载这张图片.而并不是等到整张页面都解析完成才加载图片.我们要做的就是加载用户可视范围内的图片. js懒加载图片的目的 1.网页优化,提高网页加载速度 2.页面优化友好,提高SEO收录与排名 3.提高用户体验,减少服务器压力 实例代码如下: <!DOCTYPE html> <html lang="en&

  • js实现动态加载脚本的方法实例汇总

    js实现动态加载脚本的方法实例汇总

    本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法,讨厌其中拷贝别人成果的人,也不加个原文的链接.哎!关键是最后一种方法还有点错误.经过两天的研究查阅资料,在这里和大家分享一下. 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在

  • js图片实时加载提供网页打开速度

    浏览大型网站,特别是图片比较多的图片,如大型的电商网站,你会发现处了第一屏外,往下滚动的时候图片才加载出来,没必要一开始加载就要把全部图片加载出来,这样子打开网面的速度得到了很好提高.以下是笔者目前所想到的思路,如果有更好的思路,望不吝赐教. 其实实时加载图片思路很简单,页面一开始加载的时候把不需要一开始就加载的图片(如第二屏以下的图片,反正是要往下滚动才能看到的,不如把它们设置成往下滚动的时候再实时加载)路径保持到一个自定义的属性里,如:<img class="aimg" sr

  • 提高页面加载速度的几个方法小结

    很久没写技术方面的东西,是因为在做了一段时间的技术以后我越发发现,学什么技术或者技术应该钻研到什么层次真的不是最重要的,最重要的是解决问题的方法和能力.所以以后如果再写技术类的文章,定要少些技术细节,多一些方法和思路,今天就给大家介绍几个提高页面装载时间的方法,都是我在工作当中实践出来的经验. 首先给大家列出几个阻碍loadtime提高的因素,有不足的欢迎补充: 1.页面大小: 2.页面连接数: 3.服务器抗压能力: 4.网络状况(包括带宽和网段等因素): 一.页面大小 页面大小是指页面内容的字

  • ajax请求+vue.js渲染+页面加载的示例

    1.导入js <script type="text/javascript" src="<c:url value="/resources/lib/jquery/jquery-1.11.0.min.js" />"></script> <!--标准mui.css--> <link href="<c:url value=" rel="external nofollo

  • JS图片懒加载库VueLazyLoad详解

    目录 背景 说明 实现原理 1. placeholder 的实现很细致和灵活 2. 添加图片缓存 3. 事件监听使用节流 4. 监听事件不止滚动事件 5. 事件列队的方式来处理懒加载 6. 支持 data-srcset 7. 自定义控制可视区的判定范围 待完善 1. 没有解决布局抖动 2. 跳过已经加载图片的判断方式 3. 局部懒加载 4. 性能不是很好 5. observer 模式配置简单 6. SEO 不友好 总结 背景 上篇<图片懒加载原理方案详解>中详细解析了图片懒加载的原理和方案.主

随机推荐