Javascript无阻塞加载具体方式


Posted in Javascript onJune 28, 2013

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

几个原则:

1、将脚本放在底部

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

<script>放在</body>前。

2、成组脚本

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

3、非阻塞脚本

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

(1)defer属性:支持IE4和fierfox3.5更高版本浏览器

<script defer>...</script>

内联和外部文件

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

(2)动态脚本元素

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

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

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

<script type="text/javascript src=//img.jbzj.com/file_images/article/201306/yuanma/combo.js></script>

此种子文件大约10KB,

使用:

YUI().use("dom",function(Y){

Y.Dom.addclass(...)
})

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

The LazyLoad library

使用:先引入:lazyload-min.js

(4)

LazyLoad.js("a.js",function(){
Appliction.init();
})

多个文件:
LazyLoad.js(["a.js","b.js"],function(){
Application.init();
})

(5)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();
})

这样,虽然两个文件是并行下载的,却能保证a.js能在b.js之前执行
Javascript 相关文章推荐
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
node.js实现登录注册页面
Apr 08 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
JavaScript基于用户照片姓名生成海报
May 29 Javascript
Extjs4 类的定义和扩展实例
Jun 28 #Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 #Javascript
jquery异步跨域访问代码
Jun 28 #Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 #Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 #Javascript
jquery中通过父级查找进行定位示例
Jun 28 #Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 #Javascript
You might like
PHP 批量删除数据的方法分析
2009/10/30 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
php里array_work用法实例分析
2015/07/13 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
自己的js工具 Event封装
2009/08/21 Javascript
js精度溢出解决方案
2012/12/02 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
keras导入weights方式
2020/06/12 Python
Python中Selenium库使用教程详解
2020/07/23 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
心得体会范文
2014/01/04 职场文书
工程质量承诺书范文
2014/03/27 职场文书
初三学生个人自我评定
2014/04/06 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
九寨沟导游词
2015/02/02 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL