Javascript无阻塞加载具体方式
看了《高性能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新增的两个原始数据类型详解(Record和Tuple)
js中原始数据类型有Number、String、Boolean、Null、Undefined、Symbol (ES6引入的数据类型),引用的数据类型有Object,Array,Function,下面这篇文章主要给大家介绍了关于JavaScript新增两个原始数据类型(Record和Tuple)的相关资料,需要的朋友可以参考下2022-03-03
一文彻底理解js原生语法prototype,__proto__和constructor
作为一名前端工程师,必须搞懂JS中的prototype、__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,下面这篇文章主要给大家介绍了关于js原生语法prototype,__proto__和constructor的相关资料,需要的朋友可以参考下2021-10-10
本篇文章主要介绍了关于预加载InstantClick的问题解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了通过微信公众平台获取公众号文章的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
用js实现预览待上传的本地图片...2007-03-03
在前端开发中,我们经常需要实现文件下载功能,例如下载用户上传的图片、用户生成的文件等,这篇文章主要给大家介绍了关于如何通过1分钟快速了解js实现下载文件功能的4种方式,需要的朋友可以参考下2024-03-03
粒子动画就是页面上通过发射许多微小粒子来表示不规则模糊物体。本文将利用canvas实现酷炫的粒子动画倒计时，感兴趣的小伙伴可以尝试一下2022-12-12
这篇文章主要为大家详细介绍了JS原生上传大文件显示进度条，php上传文件关键代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
可拖拽排序的菜单效果大家想必都很熟悉，本次我们通过一个可拖拽排序的九宫格案例来演示其实现原理，感兴趣的小伙伴可以跟随小编一起学习一下2022-05-05
这篇文章主要介绍了JS仿Base.js实现的继承,结合具体实例形式分析了javascript扩展操作及面向对象程序设计相关实现技巧,需要的朋友可以参考下2017-04-04
最新评论