一：同步加载
我们平时使用的最多的一种方式。
<script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script>
同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。
二：异步加载
异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。
方法一：也叫Script DOM Element
(function(){
var scriptEle = document.createElement("script");
scriptEle.type = "text/javasctipt";
scriptEle.async = true;
scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
var x = document.getElementsByTagName("head")[0];
x.insertBefore(scriptEle, x.firstChild);
})();
<async>属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了这种异步加载代码
(function(){;
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
但是这种加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理。
方法二：onload时的异步加载
(function(){
if(window.attachEvent){
window.attachEvent("load", asyncLoad);
}else{
window.addEventListener("load", asyncLoad);
}
var asyncLoad = function(){
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
}
)();
这种方法只是把插入script的方法放在一个函数里面，然后放在window的onload方法里面执行，这样就解决了阻塞onload事件触发的问题。
注:DOMContentLoaded与load的区别。前者是在document已经解析完成，页面中的dom元素可用，但是页面中的图片，视频，音频等资源未加载完，作用同jQuery中的ready事件；后者的区别在于页面所有资源全部加载完毕。
方法三：其他方法
由于JavaScript的动态性，还有很多异步加载方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer属性、 document.write(script tag)。
XHR Injection(XHR 注入)：通过XMLHttpRequest来获取javascript，然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。
//获取XMLHttpRequest对象，考虑兼容性。
var getXmlHttp = function(){
var obj;
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
else
obj = new ActiveXObject("Microsoft.XMLHTTP");
return obj;
};
//采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
var xmlHttp = getXmlHttp();
xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var script = document.createElement("script");
script.text = xmlHttp.responseText;
document.getElementsByTagName("head")[0].appendChild(script);
}
}
XHR Eval：与XHR Injection对responseText的执行方式不同，直接把responseText放在eval()函数里面执行。
//获取XMLHttpRequest对象，考虑兼容性。
var getXmlHttp = function(){
var obj;
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
else
obj = new ActiveXObject("Microsoft.XMLHTTP");
return obj;
};
//采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
var xmlHttp = getXmlHttp();
xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
eval(xmlHttp.responseText);
//alert($);//可以弹出$,表明JS已经加载进来。click事件放在其它出会出问题，应该是还没加载进来
$("#btn1").click(function(){
alert($(this).text());
});
}
}
Script In Irame：在父窗口插入一个iframe元素，然后再iframe中执行加载JS的操作。
var insertJS = function(){alert(2)};
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;//获取iframe中的window要用contentWindow属性。
doc.open();
doc.write("<script>var insertJS = function(){};<\/script><body onload='insertJS()'></body>");
doc.close();
GMail Mobile：业内JS内容被注释，所以不会执行，在需要的时候，获取script中的text内容去掉注释，调用eval()执行。
<script type="text/javascript">
/*
var ...
*/
</script>
HTML5新属性：async和defer属性
defer属性：IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注：所有的defer脚本必须保证按顺序执行的。
<script type="text/javascript" defer></script>
async属性：html5新属性。脚本将在下载后尽快执行，作用同defer，但是不能保证脚本按顺序执行。他们将在onload事件之前完成。
<script type="text/javascript" defer></script>
Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async属性。可以同时使用async和defer，这样IE 4之后的所有IE都支持异步加载。
没有async属性，script将立即获取（下载）并执行，期间阻塞了浏览器的后续处理。如果有async属性，那么script将被异步下载并执行，同时浏览器继续后续的处理。
总结： 对于支持Html5的浏览器，实现JS的异步加载只需要在script元素中加上async属性，为了兼容老版本的IE还需加上defer属性；对于不支持HTML5的浏览器(IE可以用defer实现)，可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码，你可以把它放在匿名函数中执行，也可以在onload中执行，也可以通过XHR注入实现，也可以创建一个iframe元素，然后在iframe中执行插入JS代码。
三：延迟加载
有些JS代码在某些情况在需要使用，并不是页面初始化的时候就要用到。延迟加载就是为了解决这个问题。将JS切分成许多模块，页面初始化时只加载需要立即执行的JS，然后其它JS的加载延迟到第一次需要用到的时候再加载。类似图片的延迟加载。
JS的加载分为两个部分：下载和执行。异步加载只是解决了下载的问题，但是代码在下载完成后就会立即执行，在执行过程中浏览器处于阻塞状态，响应不了任何需求。
解决思路：为了解决JS延迟加载的问题，可以利用异步加载缓存起来，但不立即执行，需要的时候在执行。如何进行缓存呢？将JS内容作为Image或者Object对象加载缓存起来，所以不会立即执行，然后在第一次需要的时候在执行。
1：模拟较长的下载时间：
利用thread让其sleep一段时间在执行下载操作。
2：模拟较长的JS代码执行时间
var start = Number(new Date());
while(start + 5000 > Number(new Date())){//执行JS}
这段代码将使JS执行5秒才完成！
JS延迟加载机制(LazyLoad)：简单来说，就是在浏览器滚动到某个位置在触发相关的函数，实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢？可以通过一个定时器来实现，通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断是否需要执行函数。
相关推荐
当项目js（css）文件使用越来越多，js 文件的加载也成了性能上的一个问题，此资源能够在页面全部加载完成后异步加载js等资源文件，它可以顺序加载资源列表，也可以并发加载资源列表，它包含一个方法调用接口：...
在JavaScript（JS）中，异步加载图片是...通过以上介绍，我们可以了解到JavaScript异步加载图片的基本概念、实现方式以及优化策略。在实际开发中，根据项目需求选择合适的方法，可以有效提升网页的加载速度和用户体验。
JavaScript（JS）异步加载库是一种能够帮助开发者在网页中延迟加载或按需加载JavaScript资源的工具。这种库可以显著提高网页性能，减少首屏加载时间，优化用户体验，特别是对于那些依赖大量脚本的复杂应用而言。下面...
在"asyLoad.js"这个文件中，我们可以预期它包含了一段用于实现JavaScript异步加载的代码。下面将详细介绍异步加载的原理和常见实现方法。 1. **异步加载的原理**： - 使用`<script>`标签的`async`属性：当`async`...
JavaScript 异步加载是网页优化的关键技术之一，它允许脚本在不阻塞浏览器解析页面的情况下进行下载和执行。在传统的同步加载模式下，JavaScript 文件的加载会暂停HTML的解析，直到该脚本完全下载并执行完毕。这可能...
标题 "JS 动态树 异步加载树 xloadtree WebFXLoadTree" 指的是在JavaScript中实现的一种特定的树形结构组件，它具备动态加载和异步数据获取的功能。这种技术常用于构建大型数据集的层级展示，如文件系统、组织结构或...
JavaScript异步加载是提高网页性能的关键技术之一，它允许脚本在不阻塞浏览器解析页面的情况下执行。在本文中，我们将深入探讨JS异步加载的三种主要方式。 **一、同步加载** 同步加载是最传统的加载方式，即...
本文将围绕"lazyload异步加载图片"这一主题，深入探讨其原理、实现方式以及实际应用中的注意事项。 ### 1. 基本原理 懒加载的核心思想是延迟加载，即不一次性加载所有图片，而是当图片进入用户的可视区域时才进行...
本文将深入探讨“手机移动端Tab选项卡切换带下拉数据异步加载js插件”的相关知识，包括其工作原理、实现方式以及如何优化。 1. **Tab选项卡设计** - Tab选项卡是一种常见的界面设计模式，它允许用户通过点击不同的...
本人手写的一款js树形控件，附带图片，代码简洁，注释齐全，可读性高，易于维护，方便移植，结构清晰，思路明了，界面美观，同时支持异步加载，对浏览器的兼容行强，你还可以根据自己的需要扩展功能，可大量应用于...
首先，我们要了解什么是js异步加载，它是相对于同步加载的一种方式。在同步加载中，JavaScript文件的加载和执行会阻塞浏览器，直到文件加载完成并执行完毕，才继续加载页面的其他内容，这种加载方式会影响页面加载...
总结来说，`JSLoader`是一种高效的JavaScript异步加载工具，通过它可以优化页面加载速度，同时结合Dojo进度条，能够为用户提供更友好的加载体验。正确地理解和使用`JSLoader`，有助于提升Web应用的整体性能和用户...
为了解决这个问题，JavaScript提供了三种主要的异步加载解决方案： 1. **`defer`属性**： `defer`属性是为了解决JavaScript阻塞HTML解析的问题而设计的。当`defer`属性被添加到`<script>`标签中，浏览器会等待HTML...
在Web开发中，异步加载页面是一种常见的优化技术，它允许我们在不刷新整个页面的情况下动态地加载新的内容。jQuery，一个强大的JavaScript库，提供了丰富的API来实现这一功能，使得网页交互更加流畅，用户体验更佳。...
ZTree的一个显著特性是支持异步加载，这意味着它可以在用户需要时按需加载子节点，减少了初次加载时的数据量，提高了页面响应速度。本文将详细讲解如何使用Java来实现ZTree的异步加载功能。 首先，我们需要理解...
在IT行业中，异步加载是一种优化用户体验的重要技术，特别是在处理大量数据或资源，如图片时。在这个场景中，"异步加载的3d图片效果"指的是一个应用或项目，它结合了3D图像展示和异步加载技术，使得用户可以在浏览3D...
而异步加载则是在页面基本结构加载完成后，根据用户的交互或特定条件，只加载需要的部分内容，这种方式显著提高了页面响应速度。 在jQuery中，$.ajax()函数是实现异步加载的核心。它可以配置多个参数，如URL、类型...
在描述中提到，这个组件是针对AJAX（Asynchronous JavaScript and XML）异步加载数据场景设计的。AJAX允许网页在不重新加载整个页面的情况下，与服务器交换数据并局部更新页面。当使用AJAX请求时，加载指示器会在...
在IT行业中，异步加载图片是一项重要的优化技术，特别是在网页和移动应用开发中。它能够显著提高用户体验，因为用户不再需要等待所有图片完全加载才能查看页面内容。本示例程序展示了如何实现这一功能，适用于“mars...