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 相关文章推荐
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
node实现爬虫的几种简易方式
Aug 22 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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
Python进行统计建模
2020/08/10 Python
降低python版本的操作方法
2020/09/11 Python
python中的插入排序的简单用法
2021/01/19 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
优秀党支部事迹材料
2014/01/14 职场文书
公司薪酬管理制度
2014/01/31 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python