html异步

1、图片预加载
图片预加载：在操作或展示图片之前，加载图片。

function preLoadImage (imageUrl) {
   var img = new Image();
   img.src = imageUrl;
};
preLoadImage('http://**.jpg');

此段代码即是下载图片。在操作或展示此图片之前执行此代码即可。当然因为图片的加载也有状态结果，所以可以根据加载状态结果绑定回调函数。

preLoadImage().done(function(){});

2、javascript 异步加载
在IE 6-7 中 script 是顺序下载的，现在的javascript是并行下载、顺序执行的。
同步加载，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。
异步加载又叫非阻塞，浏览器在下载执行 js 同时，还会继续进行后续页面的处理。
不管是同步还是异步加载(同步加载：timeline是瀑布模型，异步加载：timeline是并发模型)，javascript加载都由两阶段组成：下载阶段与解析并执行阶段。一般情况下，不管同步加载还是异步加载，浏览器在下载完js的内容后会理解对其解析和执行。
a)javascript下载阶段
除了古老浏览器，现在均为并行下载javascript。javascript下载过程是并行的，不会影响其他javascript文件的下载，但是会影响其他资源（图片、样式文件）的下载。
b)javascript解析并执行阶段
javascript解析阶段分为两步：
预编译、解析。预编译过程主要是老生常谈的变量提升。
解析并执行阶段：浏览器在解析执行JS阶段是阻塞任何操作的(包括下载操作)，这时浏览器处于无响应状态—javascript同步加载。
即一般情况下，javascript执行会阻塞所有操作（包括下载）,但是如果给予async或者defer属性（两者都是立即下载javascript文件）则不会阻塞—-这被称为javascript异步加载。
1）async属性标识javascript是否异步执行，如果有async属性，则不阻塞页面的加载，并且在该js下载完成之后立刻执行,不能保证多个script标签的执行顺序。
2）defer属性标识javascript是否延迟执行（只支持IE），如果有defer属性，则javascript文件会推迟到页面解析完成之后再执行，可以保证多个script标签的执行顺序
3）如果使用动态创建script标签，下载完成之后callback的方式，也能实现异步加载的功能。例子如下
方法：

  var se = document.createElement('script');
  se.src = 'http://anydomain.com/A.js';
  document.getElementsByTagName('head')[0].appendChild(se); 

此种方法不会阻止页面其他资源的下载，新的script标签加载 A.js 源文件。此文件当元素添加到页面之后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。您甚至可以将这些代码放在部分而不会对其余部分的页面代码造成影响（除了用于下载文件的 HTTP 连接）。
4）、Ajax+eval
Ajax异步请求获取javascript内容，eval执行
5）、onload
6)、iframe+document.write
3、延迟加载：
一般对于不需要立即执行的javascript，会做下载与执行的分离，使用延迟执行方法，在需要时或稍后通过javascript的控制来异步加载。
延迟执行方法：把下载后的javascript先缓存（将javascript内容作为image或object对象加载缓存起来）起来，在第一次需要的时候再执行。
缓存方法：

var se = new Image();
se.onload = registerScript();
se.src = 'http://anydomain.com/A.js';

好处是：把下载 js 与 解析执行 js 分离出来、不阻止其它下载、在所有浏览器中，script都是并行下载、不阻止渲染（rendering）直到真正需要时。
异步加载，需要将所有 js 内容按模块化的方式来切分组织，其中就存在依赖关系，而异步加载不保证执行顺序。这就是模块管理的背景，是requireJs和commonjs产生的背景。关于requirejs，以后再整理。
4、javascript懒加载
javascript懒加载：按需加载，延迟甚至不加载javascript。实现方案：
1)、使用setTimeOut或setInterval
2)、条件加载，当符合某些条件或者触发了某些事件事才开始异步下载
3)、可视区域加载，主要是监控滚动条。
4）、插件
使用场景：图片懒加载
当目标出现在可视区域时进行加载。如何判断目标是否需要展示?
通过以下两点进行判断：
a)可视区域相对于浏览器顶端位置；
b)待加载资源相对于浏览器顶端位置。
后续监视滚动条即可

参考文章：
探真无阻塞加载javascript脚本技术，我们会发现很多意想不到的秘密
Javascript 同步异步加载详解
jquery lazyload延迟加载技术的实现原理分析