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之前执行
相关文章
常用限制input的方法的js代码...2007-03-03
这篇文章主要介绍了js实现的捐赠管理完整实例,包括了html页面、js脚本及css样式的完整实现代码,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了js 计数排序的实现示例(升级版),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
平时项目中笔者也常用dayjs,它确实很好用,Day.js有着几乎和Moment.js一样的API,因此如果你用过Moment.js,那么也可以轻松使用Day.js,这篇文章主要给大家介绍了关于时间处理工具day.js常用方法的相关资料,需要的朋友可以参考下2024-02-02
在这一章我会讲解如何去访问一个事件对象。2010-02-02
本节主要介绍了js监控IE火狐浏览器关闭、刷新、回退、前进事件的方法2014-07-07
Map、WeakMap和Object都是JavaScript中用于存储键值对的数据结构，它们在键类型、垃圾回收、可枚举性、方法和操作、以及继承等方面存在一些区别，适用于不同的场景，本文给大家详细讲解js map、weakmap和object区别，需要的朋友可以参考下2023-04-04
这段时间在项目组都是做静态页面，都是些复制粘贴的活，难得碰到个稍微有点难度的页面。后来看到这个页面还不错，可以自己做做看，虽然公司已经有这样的组件，但不想用，反正没什么事，就当多学学JS好了。2008-10-10
本文主要介绍了最常见和最有用的字符串相关的方法，具有一定的参考价值，下面跟着小编一起来看下吧2017-02-02
在Openlayers中,使用ol/sphere模块的getDistance函数可以计算两点间的大圆距离,绘制线路时,通过监听绘制事件和几何对象的变化,可实时更新距离,同时getLength函数帮助获取整条线路的长度,这些功能主要用于地理信息系统中的距离测量和地图制作2024-11-11
最新评论