关键词：
一、同步加载
我们平时使用的最多的一种方式。
<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
1 (function(){
2 var scriptEle = document.createElement("script");
3 scriptEle.type = "text/javasctipt";
4 scriptEle.async = true;
5 scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
6 var x = document.getElementsByTagName("head")[0];
7 x.insertBefore(scriptEle, x.firstChild);
8 })();
<async>属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了这种异步加载代码
1 (function(){;
2 var ga = document.createElement(‘script‘);
3 ga.type = ‘text/javascript‘;
4 ga.async = true;
5 ga.src = (‘https:‘ == document.location.protocol ? ‘https://ssl‘ : ‘http://www‘) + ‘.google-analytics.com/ga.js‘;
6 var s = document.getElementsByTagName(‘script‘)[0];
7 s.parentNode.insertBefore(ga, s);
8 })();
但是这种加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理。
方法二：onload时的异步加载
1 (function(){
2 if(window.attachEvent){
3 window.attachEvent("load", asyncLoad);
4 }else{
5 window.addEventListener("load", asyncLoad);
6 }
7 var asyncLoad = function(){
8 var ga = document.createElement(‘script‘);
9 ga.type = ‘text/javascript‘;
10 ga.async = true;
11 ga.src = (‘https:‘ == document.location.protocol ? ‘https://ssl‘ : ‘http://www‘) + ‘.google-analytics.com/ga.js‘;
12 var s = document.getElementsByTagName(‘script‘)[0];
13 s.parentNode.insertBefore(ga, s);
14 }
15 )();
这种方法只是把插入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。
1 //获取XMLHttpRequest对象，考虑兼容性。
2 var getXmlHttp = function(){
3 var obj;
4 if (window.XMLHttpRequest)
5 obj = new XMLHttpRequest();
6 else
7 obj = new ActiveXObject("Microsoft.XMLHTTP");
8 return obj;
9 };
10 //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
11 var xmlHttp = getXmlHttp();
12 xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
13 xmlHttp.send();
14 xmlHttp.onreadystatechange = function(){
15 if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
16 var script = document.createElement("script");
17 script.text = xmlHttp.responseText;
18 document.getElementsByTagName("head")[0].appendChild(script);
19 }
20 }
XHR Eval：与XHR Injection对responseText的执行方式不同，直接把responseText放在eval()函数里面执行。
1 //获取XMLHttpRequest对象，考虑兼容性。
2 var getXmlHttp = function(){
3 var obj;
4 if (window.XMLHttpRequest)
5 obj = new XMLHttpRequest();
6 else
7 obj = new ActiveXObject("Microsoft.XMLHTTP");
8 return obj;
9 };
10 //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理
11 var xmlHttp = getXmlHttp();
12 xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
13 xmlHttp.send();
14 xmlHttp.onreadystatechange = function(){
15 if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
16 eval(xmlHttp.responseText);
17 //alert($);//可以弹出$,表明JS已经加载进来。click事件放在其它出会出问题，应该是还没加载进来
18 $("#btn1").click(function(){
19 alert($(this).text());
20 });
21 }
22 }
Script In Irame：在父窗口插入一个iframe元素，然后再iframe中执行加载JS的操作。
1 var insertJS = function(){alert(2)};
2 var iframe = document.createElement("iframe");
3 document.body.appendChild(iframe);
4 var doc = iframe.contentWindow.document;//获取iframe中的window要用contentWindow属性。
5 doc.open();
6 doc.write("<script>var insertJS = function(){};</script><body onload=‘insertJS()‘></body>");
7 doc.close();
GMail Mobile：业内JS内容被注释，所以不会执行，在需要的时候，获取script中的text内容去掉注释，调用eval()执行。
1 <script type="text/javascript">
2 /*
3 var ...
4 */
5 </script>
HTML5新属性：async和defer属性
defer属性：IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注：所有的defer脚本必须保证按顺序执行的。
<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将被异步下载并执行，同时浏览器继续后续的处理。
三、延迟加载
有些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)：简单来说，就是在浏览器滚动到某个位置在触发相关的函数，实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢？可以通过一个定时器来实现，通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断是否需要执行函数。
图解script的三种加载方式异步加载顺序
...被阻塞，停止解析。<scriptdefer="defer">：脚本的获取是异步的，执行是同步的。脚本加载不阻塞页面的解析，脚本在获取完后并不立即执行，而是等到DOMready之后才开始执行。<scriptasync="async">:脚本的获取是异步的，执行是... 查看详情
js的异步加载及promise的三种状态
---恢复内容开始---js异步加载同步加载<scriptsrc="http://baidu.com/script.js"></script> ---> 我们平时经常使用的就是这种同步加载的形式 同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因... 查看详情
ef的三种数据加载方式
EF中有3种数据加载方式，具体如下：延迟加载（默认）： 设置导航属性为virtual贪婪加载：不设置导航属性为virtual，并且对导航属性使用Include显示加载：不设置导航属性为virtual，并且对导航属性使用Reference(单个对象).Load()... 查看详情
js的三种使用方式/css的三种使用方式/js中的dom事件模型/js中匿名函数的书写及调用/媒体查询@media的三种使用方式
一、JS的三种使用方式 1、html标签中内嵌JS(不提倡使用。) <buttononclick="javascript:alert(‘你真点啊。‘)">有本事点我呀！！！！</button> &nbs 查看详情
ef的三种数据加载方式(代码片段)
EF的关联实体加载有三种方式：LazyLoading,EagerLoading,ExplicitLoading，其中LazyLoading和ExplicitLoading都是延迟加载。（一）延迟加载（默认）：LazyLoading使用的是动态代理，默认情况下，如果POCO类满足以下两个条件，EF就使用LazyLoading:POCO... 查看详情
js的三种异步处理(代码片段)
Promise对象含义： Promise是异步编程的一种解决方案，优点： 相比传统回调函数和事件更加合理和优雅，Promise是链式编程（后面会详细讲述），有效的解决了令人头痛的回调地狱问题，Promise的结果有成功和失败两种状态... 查看详情
js里常见的三种请求方式$.ajax$.post$.get分析
$.post和$.get是$.ajax的一种特殊情况：$.post和$.get请求都是异步请求，回调函数里写return来返回值是无意义的，回调函数里对外部变量进行赋值也是无意义的。即使是$.ajax里的同步请求，return的值并不能直接返回，这里涉及到跨域... 查看详情
js定义接口的三种方式
js定义接口有三种方式： 1、注解描述方式 优点：程序有可以有一个参考缺点：还是属于文档的范畴，这种方式太松散，没有检查接口的方法是否完全被实现/**interfaceComposite{*functionadd(obj);*functionremove(obj);*functionupdate(obj);*}... 查看详情
类加载的三种方式比较(代码片段)
虚拟机加载类的途径1、由new关键字创建一个类的实例在由运行时刻用new方法载入如：Dogdog＝newDog（）；2、调用Class.forName()方法通过反射加载类型，并创建对象实例如：Classclazz＝Class.forName（“Dog”）；Objectdog＝clazz.newInstan... 查看详情
js中原型继承的三种方式
mybatis延迟加载的三种加载方式深入，你get了吗？
延迟加载 延迟加载对主对象都是直接加载，只有对关联对象是延迟加载。 延迟加载可以减轻数据库的压力， 延迟加载不可是一条SQL查询多表信息，这样构不成延迟加载，会形成直接加载。 延迟加载分为三种类型... 查看详情
js中事件绑定的三种方式
以下是搜集的在JS中事件绑定的三种方式。 1.HTMLonclickattribute <buttontype="button"id="upload"onclick="upload_file();"> 原文: http://www.w3school.com.cn/jsref/jsref_events.asp 2.jQuery 查看详情
spring加载properties配置文件的三种方式
一、通过context:property-placeholder标签实现配置文件加载1)用法:1、在spring.xml配置文件中添加标签<context:property-placeholderignore-unresolvable="true"location="classpath:redis-key.properties"/>2、在spring.xml中使用配置文件属性:$< 查看详情
js表单提交的三种方式
第一种：<scripttype="text/javascript">functioncheck(form){if(form.userId.value==‘‘){alert("请输入用户帐号!");form.userId.focus();returnfalse;}if(form.password.value==‘‘){alert("请输入登录密码!");form.password.foc 查看详情
类加载器盲区整理
类加载器盲区整理ServiceLoader原理深入理解Java类加载器(ClassLoader)类加载的三种方式比较ServiceLoader原理ServiceLoader原理深入理解Java类加载器(ClassLoader)深入理解Java类加载器(ClassLoader)类加载的三种方式比较类加载的三种方式比较 查看详情
使用javascript判断图片是否加载完成的三种实现方式
有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。有三种方式实现，下面一一介绍。一、load事件 <!DOCTYPEHTML><html><head><metacharset="utf-8"><title>img-loadevent</title></head><body><img 查看详情
js创建对象的三种方式
...的行为,在对象中用方法来表示(常用动词-功能)2.创建对象的三种方式在Java中，现阶段我们可以采用三种方式创建对象（object）利用字面量创建对象利用newObject创 查看详情
ui自动化测试中，selenium的三种等待方式详解(代码片段)
...没有找到元素而报错。另外一种情况就是页面使用了ajax异步加载机制（现在都是resetful，客户端和服务端都是分离的），不知道页面是什么时候到达的。这时我们就要用到wait，而在Selenium中 查看详情