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 相关文章推荐
javascript中的array数组使用技巧
Jan 31 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 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
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
php中关于换行的实例写法
2019/09/26 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
JS 对象介绍
2010/01/20 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
python函数装饰器用法实例详解
2015/06/04 Python
Django视图和URL配置详解
2018/01/31 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
最新大学生自我评价
2013/09/24 职场文书
感恩节活动方案
2014/01/27 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
爱祖国演讲稿
2014/05/04 职场文书
综合办公室主任岗位职责
2015/04/01 职场文书
成人成长感言如何写?
2019/08/16 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
基于Python的EasyGUI学习实践
2021/05/07 Python
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL