源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Javascript无阻塞加载具体方式

  • 时间:2021-12-05 23:38 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Javascript无阻塞加载具体方式
看了《高性能JavaScript》的读书笔记 几个原则: [b]1、将脚本放在底部[/b] <link>还是在head中,用以保证在js加载前,能加载出正常显示的页面。 <script>放在</body>前。 [b]2、成组脚本[/b] 由于每个<script>标签下载时阻塞页面解析过程,所以限制页面的<script>总数也可以改善性能。适用于内联脚本和外部脚本。 [b]3、非阻塞脚本[/b] 等页面完成加载后,再加载js代码。也就是,在window.load事件发出后开始下载代码。 (1)defer属性:支持IE4和fierfox3.5更高版本浏览器 <script defer>...</script> 内联和外部文件 带defer属性的<script>可出现在文档的任何位置,对应的js文件将在<script>被解析时启动下载,但代码不会执行,直到DOM加载完毕(在onload事件句柄被调用之前)。所以实现了和也卖弄其他资源一起并行下载。 (2)动态脚本元素 文档对象模型(DOM)允许你使用js动态创建HTML的几乎全部文档内容。
[u]复制代码[/u] 代码如下:
var script=document.createElement("script"); script.type="text/javascript"; script.src="file.js"; document.getElementByTagName_r("head")[0].appendChild(script);
此技术的重点在于:无论在何处启动下载,文件额下载和运行都不会阻塞其他页面处理过程。即使在head里(除了用于下载文件的http链接)。 (3)The YUI3 approach 理念:用一个很小的初始代码,下载其余的功能代码,先引入文件:
[u]复制代码[/u] 代码如下:
<script type="text/javascript src=http://files.jb51.net/file_images/article/201306/yuanma/combo.js></script>
此种子文件大约10KB, 使用:
[u]复制代码[/u] 代码如下:
YUI().use("dom",function(Y){   Y.Dom.addclass(...) })
当所有代码可用时,回调函数被调用,YUI实例作为参数传入,就可以立即使用新下载的功能。 The LazyLoad library 使用:先引入:lazyload-min.js (4)
[u]复制代码[/u] 代码如下:
LazyLoad.js("a.js",function(){ Appliction.init(); })
多个文件:
[u]复制代码[/u] 代码如下:
LazyLoad.js(["a.js","b.js"],function(){ Application.init(); })
(5)The LABjs library 先引入:lab.js
[u]复制代码[/u] 代码如下:
$LAB.script("a.js").wait(function(){ Application.init(); })
多个文件,就链式写法 他的独特之处在于能够管理依赖关系。 可以通过wait()函数指定哪些文件应该等待其他文件。 例如:b.js的代码保证不在a.js之前运行
[u]复制代码[/u] 代码如下:
$LAB.script("a.js").wait().script("b.js").wait(function(){ Application.init(); })
这样,虽然两个文件是并行下载的,却能保证a.js能在b.js之前执行
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部