当前位置:首页 > 日记 > 正文

详细的谈labjs动态加载JS文件的需求

详细的谈labjs动态加载JS文件的需求
labjs是一个小的Javascript工具,根据需要加载Javascript文件,通过使用该工具可以提高页面的性能,不需要避免加载Javascript文件,可以实现动态的并行加载脚本文件,并加载脚本执行顺序的管理。
简单的例子

为实验室
。脚本(写js
块(函数(){())
对于所有等待加载,然后做某事
script1func();
script2func();
script3func();
});
介绍了几种labjs。

例1:

为实验室
。脚本(写js )
。脚本(script2 .js)
。脚本(script3 .js)
等待(函数(脚本))等待所有加载端执行此代码块
script1func();
script2func();
script3func();
});
例2:

为实验室
。脚本({ SRC:写js
。脚本(script2 .js)
。脚本(script3 .js)
等待(函数(脚本))等待所有加载端执行此代码块
script1func();
script2func();
script3func();
});
例3:

为实验室
。脚本(写js
等待(函数(脚本))等待所有加载端执行此代码块
script1func();
script2func();
script3func();
});
例4:

为实验室
。脚本({写js
等待(函数(脚本))等待所有加载端执行此代码块
script1func();
script2func();
script3func();
});
例5:

为实验室
。脚本(写js)(等)(等待) / /空请写在其他代码执行
。脚本(script2 .js) / / script2和script3取决于写
。脚本(script3 .js)(等) / /但script2和script3不互相依赖,可以下载并行
。脚本(script4 .js) / / script4取决于笔写,script2和script3
等(功能(){ script4func()();});
例6:

为实验室
。脚本(写js ) / /写,script2,并不依赖于script3,
。脚本(script2 .js),可以以任何顺序执行。
。脚本(script3 .js)
等待(函数())如果需要,当然可以在这里执行Javascript函数。
警报()脚本1-3加载!;
})
。脚本(script4 .js) / /在写,script2和script3
等(功能(){ script4func()();});
例7:

为实验室
。setOptions({ alwayspreserveorder:true}) / /等集之间的每个脚本
。脚本(写js ) / /写,script2,script3,script4彼此依靠
。脚本(script2 .js)和序贯 / /下载并行执行
。脚本(script3 .js)
。脚本(script4 .js)
等(功能(){ script4func()();});
例8:

为实验室
脚本(函数()){()
对` _is_ie ` / / IE的真正价值,非IE错误
如果(_is_ie){
返回ie.js ; / /如果IE的JS将装
}
{其他
如果没有返回该代码,则跳过该代码。
}
})
。脚本(写js )
等等();
labjs加载模式
在labjs动态加载脚本文件是指外部JS加载通过多种方式在JS脚本被执行,这是不同于HTML页面。
动态加载脚本有很多种方法。优点和缺点是不同的。这里没有细节,感兴趣的童鞋们可以在本文的结尾看到参考链接。
有三个主要的技术用于labjs,这是脚本元素,XHR注入,和缓存的把戏
首先,简要介绍了三种加载方式,重新分析和第四部分的labjs源代码在三前的使用方式。
脚本元素(labjs默认加载模式)
脚本最常见的动态加载方法有很多优点,包括:1、实现简单的2、跨域3、不阻塞其他资源加载等。
Opera(Firefox):脚本的执行顺序与插入到页面中的节点的顺序一致。
在IE浏览器下:无法保证执行顺序
小心 uff1a
Firefox的新版本下,脚本的执行顺序并不一定与插入页面顺序一致,但它可以通过设置脚本标签async属性为false,顺序执行。
Chrome的旧版本下,执行顺序并不一定与插入页面顺序一致,但它可以通过设置脚本标签async属性为false,顺序执行。
XHR注入

脚本文件通过Ajax请求加载,然后按以下方式执行:

评价:常用的方法

XHR注入:创建一个脚本元素注入所加载的脚本文件的内容

主要限制:无交叉域

缓存技巧(强烈依赖于基于浏览器的特性,不推荐)

当你的脚本元素值,浏览器不知道类型的属性,如文本/缓存,文本/卡斯珀,文本/ hellworld,等,不同的浏览器的行为如下:

IE、Safari、Chrome(旧版):剧本也装,但不执行,假设没有浏览器缓存被禁用,脚本将被加载时,浏览器缓存,当需要时,只需要创建一个脚本标签,类型会被设置为正确的值,指向SRC之前所请求的文件的URL(相当于读取缓存文件)

Opera:Firefox:没有加载

备注:uff1a

根据基于浏览器的特性实现,浏览器的功能实现可能会失败,不推荐使用。

Chrome浏览器的新版本将脚本元素的类型设置为非文本/ Javascript,并且不再加载脚本文件。
该脚本加载在LABjs审判
忽略技术细节和描述的实施在labjs通过一段伪代码,大约:

首先,判断脚本是否被预加载(预加载条件是否被预先加载以查看伪代码注释);

如果我们预先加载,我们将决定浏览器是否支持真正的预加载。如果我们支持真正的预紧力,我们预先加载它。如果没有,则判断脚本是否与当前页的域相同。如果我们使用XHR注入,如果没有,使用缓存的把戏。

如果你没有预紧力,它是决定浏览器支不支持脚本元素async属性(见伪代码注释)。如果是这样,设置async属性和请求的脚本文件。如果没有,则直接通过脚本元素加载脚本文件。

如果(ifpreloadscript){ / /请求时预加载脚本文件:1, 2、浏览器支持需要预加载预压
如果(supportrealpreloading){ / /如果支持房预加载
如果(supportpreloadpropnatively){ / /支持通过设置脚本标签的预紧力属性,脚本和预加载,加载和执行的分离
/ /尼古拉斯C. zakas大神的愿望,没有浏览器支持: / / /博客2011 02 / 14 / / Javascript的下载和执行的分离
script.onpreload =回调;
script.newpreload =真;
script.src = targeturl;
其他{ }
script.onreadystatechange =回调; / /实际上指的是IE浏览器,指定脚本元素的src属性,IE浏览器立即加载
script.src = targeturl; / /脚本元素甚至没有进入页面,回调是预加载后回调
}
}
如果(insamedomain){ / /非跨域,使用XHR注:在相同的域与当前页请求
XHR =新(XMLHttpRequest); / /由于判断IE已经在条件分支无情地抛弃,所以大胆新(XMLHttpRequest)。
xhr.onreadystatechange =回调;
Xhr.open(
Xhr.send();
}
别的{ / /最无奈的搬家后,缓存的把戏,chromei新版本不支持
script.onload =回调;
script.type =中/缓存;
script.src = targeturl;
}
其他{ }
如果(cancontrlexecutionorderbyasync){ / /如果可以通过脚本元素的异步属性并行加载脚本的执行力
/ /凯尔的建议推动现在由HTML5组接受并投入稿: / dynamic_script_execution_order # my_solution
script.onload =回调;
script.async = false; / /脚本元素异步错误,脚本可以保证执行命令和请求顺序一致
script.src = targeturl;
}
别的{
script.onload =回调;
script.src = targeturl;
}
}
事实上,当你创建的网页上,点到一个脚本文件的IMG SRC节点,它也可以发挥在某些浏览器文件预压的作用。是labjs不知道这个作者吗

相关文章

PS处理:遇到雨天用PS

PS处理:遇到雨天用PS

雨天,电脑软件,PS,本文主要介绍PS图片处理——与PS. Let见面的雨天一起尝试。 1。拖到图片,图像>画布的大小,添加200px到画布的宽度和高度,确定。 2。新图层,命名为雨。填充黑色。 提醒:如果你想调整雨滴,首先右击黑色图层,转换成智能物体。 然…

PS只是用断裂的图案制作漂亮的单词

PS只是用断裂的图案制作漂亮的单词

单词,图案,漂亮,电脑软件,PS,本教程是向朋友介绍的,利用ps制作出美观而残破的字符编写方法。教程生成的文本非常漂亮,难度也不是很大。非常适合初学者学习。 现在,很多电脑和手机背景都很流行。下面,萧边将为你介绍PS的简单,书写美丽和破碎的方…

PS创造美丽新的立体效果

PS创造美丽新的立体效果

创造,效果,美丽,电脑软件,PS,本教程是向朋友介绍如何使用PS创建美丽的和创新的立体字。教程产生的立体字符非常漂亮,难度不是很大。建议你喜欢你的朋友一起学习。 汉字是语言和视觉的综合艺术。这种艺术的力量直接威慑感。汉字之美、形式美;…

在Word2007/2010文档删除线Word200

在Word2007/2010文档删除线Word200

删除线,教程,文档,电脑软件,我们通常在编辑word文档时,往往会发现文件中会出现但却是莫名其妙的。行,当我们按删除键删除时,却发现这些行在任何情况下都不能删除,令人惊讶的是,这些行我们使文档更复杂,我有什么办法可以去掉现在我们来告诉你一些…

超级移动情侣签名爱人签名

超级移动情侣签名爱人签名

爱人,情侣,电脑软件,如果你永远不离开我,我会陪着你直到死亡将我们分开u3002 如果你不离开,我就死了。 你好,你是我的,我只能是我的一个。 好吧,我是你的,只有你。 那些爱的岁月,如流水,流走了。 那些年是甜的,像风,飘走。 你对我来说很特别,很不一样…

CDR协调工具在变线效应中的作用的

CDR协调工具在变线效应中的作用的

协调,工具,作用,效应,教程,本教程是向朋友介绍一个CDR核对工具,制作一个改变行效果的方法。该教程生成的行非常好。建议像你这样的朋友和教程一起学习。 本教程教朋友使用CDR混合工具来制作更改行。教程一般都很难,效果也很好。适合初学者学…

javascript简单的表格编辑功能实现方法

javascript简单的表格编辑功能实现方法

方法,功能实现,表格,编辑,简单,本文介绍了javascript简单表编辑功能的实现,供大家参考: getinnerhtml()函数 { 警报(document.getelementbyid(2).innerHTML); } inscell()函数 { var x = document.getelementbyid('tr2)。InsertCell(0) x.innerhtml =表格行、…

ps如何填充渐变的整个页面,并用渐变

ps如何填充渐变的整个页面,并用渐变

填充,渐变,页面,颜色,电脑软件,ps如何填充渐变颜色下面是介绍在PS中对整个页面进行填充和部分填充满渐变颜色的页面,希望各位朋友学习可以参考一下。 如何在ps中填充渐变颜色,简单演示,整个页面填充渐变色,部分区域填充渐变色。 打开ps后,新文件…

经典情感超感性人格签名

经典情感超感性人格签名

感性,人格,情感,经典,电脑软件,以下是由您编写的经典感伤超感性人格签名的全部内容。如果您喜欢小编辑器的建议,请继续关注它。 你说的承诺,一个接一个地嘲笑我。 他找不到人来记住你。 很长一段时间,这个词不适合我。 有一个人的名字让我立刻…

空间微语录说,心灵的站立总是有QQ空

空间微语录说,心灵的站立总是有QQ空

空间,是有,语录,心灵,电脑软件,把空间微语录,写下人生的愤怒与悲伤,酸甜,记录自己的心情变化。 日复一日,年复一年,生活总是这样,沉闷、嘈杂、丑陋。人们总是认为人们生活在金钱、兴趣和感情之中,这些问题并不总能找到最合适的答案。想想生活不是…

超级经典幽默和有趣的个性签名

超级经典幽默和有趣的个性签名

个性签名,有趣,幽默,经典,电脑软件,趁现在还有牙齿,你还笑的时候要笑。 幸福是你吃鱼,我吃肉,你看别人啃骨头! 大家都说我很听话,但我只听自己的话,hellip。 长冷蟹的概念,看看它运行到何时。 如果我是公主,我会救一只青蛙,但我遇到的只是一只癞蛤蟆…

ai键盘增量图标像素绘制图标

ai键盘增量图标像素绘制图标

图标,键盘,像素,绘制,增量,本教程介绍ai键盘到图标像素绘图图标。本教程介绍的技能非常好,难度也不是很大。建议我们看一看。 本教程是一个很好的人工智能学习技术,使用AI键盘绘制像素的图标。 本教程结束,以上是AI键盘三角洲巧妙绘制图标像…