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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
Convert Seconds To Hours
2007/06/16 Javascript
jQuery 处理表单元素的代码
2010/02/15 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
2015/03/04 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
详解Python3的TFTP文件传输
2018/06/26 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
美国温暖商店:The Warming Store
2018/12/15 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
基于Python 函数和方法的区别说明
2021/03/24 Python
教师岗位职责范本
2013/12/29 职场文书
世界环境日活动总结
2015/02/11 职场文书
教育教学读书笔记
2015/07/02 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
go开发alertmanger实现钉钉报警
2021/07/16 Golang