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中的window.open返回object的错误的解决方法
Aug 15 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 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
Terran兵种介绍
2020/03/14 星际争霸
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
Python制作爬虫采集小说
2015/10/25 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
户外活动策划方案
2014/03/12 职场文书
金融与证券专业求职信
2014/06/22 职场文书
先进典型事迹材料
2014/12/29 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
男人帮观后感
2015/06/18 职场文书