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 两个窗体之间传值实现代码
Sep 25 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
js实现轮播图特效
May 28 Javascript
vue路由权限校验功能的实现代码
Jun 07 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 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
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
如何管理Vue中的缓存页面
2021/02/06 Vue.js
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
Python常用正则表达式符号浅析
2014/08/13 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
python判断元素是否存在的实例方法
2020/09/24 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
学生思想表现的评语
2014/01/30 职场文书
经典公益广告词
2014/03/13 职场文书
董事长助理工作职责
2014/06/08 职场文书
创先争优公开承诺书
2014/08/30 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
公司搬迁通知
2015/04/20 职场文书
研讨会通知
2015/04/27 职场文书
党员学习型组织心得体会
2019/06/21 职场文书