知识大全 Javascript无阻塞加载具体方式

Posted 2022-07-20 文件

篇首语：知识才智是实践经验的总结。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 Javascript无阻塞加载具体方式相关的知识，希望对你有一定的参考价值。

Javascript无阻塞加载具体方式 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

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

　　几个原则

　　 将脚本放在底部

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

　　<script>放在</body>前

　　 成组脚本

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

　　 非阻塞脚本

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

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

　　内联和外部文件

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

　　（）动态脚本元素

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

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

　　script type=text/javascript;

　　script src=file js;

　　document getElementByTagName_r("head")[ ] appendChild(script);

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

　　（）The YUI approach

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

复制代码代码如下: <script type="text/javascript src=//files jb net/file_images/article/ /yuanma/bo js></script>

　　此种子文件大约 KB

　　使用

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

　　Y Dom addclass( )

　　)

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

　　The LazyLoad library

　　使用先引入 lazyload min js

　　( )

复制代码代码如下: LazyLoad js("a js" function()

　　Appliction init();

　　)

　　多个文件

复制代码代码如下: LazyLoad js(["a js" "b js"] function()

　　Application init();

　　)

　　 ( )The LABjs library

　　先引入 lab js

复制代码代码如下: $LAB script("a js") wait(function()

　　Application init();

　　)

　　多个文件就链式写法

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

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

　　例如 b js的代码保证不在a js之前运行

复制代码代码如下: $LAB script("a js") wait() script("b js") wait(function()

　　Application init();

　　)

cha138/Article/program/Java/JSP/201311/20189