javascript

位置:IT落伍者 >> javascript >> 浏览文章

Javascript无阻塞加载具体方式


发布日期:2020年09月21日
 
Javascript无阻塞加载具体方式

看了《高性能JavaScript》的读书笔记

几个原则

将脚本放在底部

<link>还是在head中用以保证在js加载前能加载出正常显示的页面

<script>放在</body>前

成组脚本

由于每个<script>标签下载时阻塞页面解析过程所以限制页面的<script>总数也可以改善性能适用于内联脚本和外部脚本

非阻塞脚本

等页面完成加载后再加载js代码也就是在windowload事件发出后开始下载代码

)defer属性支持IE和fierfox更高版本浏览器

<script defer></script>

内联和外部文件

带defer属性的<script>可出现在文档的任何位置对应的js文件将在<script>被解析时启动下载但代码不会执行直到DOM加载完毕(在onload事件句柄被调用之前)所以实现了和也卖弄其他资源一起并行下载

)动态脚本元素

文档对象模型(DOM)允许你使用js动态创建HTML的几乎全部文档内容

复制代码 代码如下:
var script=documentcreateElement("script");

scripttype="text/javascript";

scriptsrc="filejs";

documentgetElementByTagName_r("head")[]appendChild(script);


此技术的重点在于无论在何处启动下载文件额下载和运行都不会阻塞其他页面处理过程即使在head里(除了用于下载文件的http链接)

)The YUI approach

理念用一个很小的初始代码下载其余的功能代码先引入文件

复制代码 代码如下:
<script type="text/javascript src=http://filesjbnet/file_images/article//yuanma/combojs></script>


此种子文件大约KB

使用

复制代码 代码如下:
YUI()use("dom"function(Y){

YDomaddclass()

})


当所有代码可用时回调函数被调用YUI实例作为参数传入就可以立即使用新下载的功能

The LazyLoad library

使用先引入lazyloadminjs

()

复制代码 代码如下:
LazyLoadjs("ajs"function(){

Applictioninit();

})


多个文件

复制代码 代码如下:
LazyLoadjs(["ajs""bjs"]function(){

Applicationinit();

})


()The LABjs library

先引入labjs

复制代码 代码如下:
$LABscript("ajs")wait(function(){

Applicationinit();

})


多个文件就链式写法

他的独特之处在于能够管理依赖关系

可以通过wait()函数指定哪些文件应该等待其他文件

例如bjs的代码保证不在ajs之前运行

复制代码 代码如下:
$LABscript("ajs")wait()script("bjs")wait(function(){

Applicationinit();

})


这样虽然两个文件是并行下载的却能保证ajs能在bjs之前执行

               

上一篇:JS特效代码--仿windows xp左侧菜单效果

下一篇:JavaScript:new 一个函数和直接调用函数的区别分析