按需加载表面理解起来很简单，但是怎么个按需法呢？我所理解的按需，包括两个方面：一个是按用户的需要；另一个是网站本身的需要。按需加载主要解决的问题就是加快页面的初始化以及在页面初始化的时候最大化减少HTTP请求，因为有些模块比如：图片导航tab、多级菜单、内容导航等等，这些在初始化页面的时候有很多内容都是处于隐藏状态，用户是看不到的，那么这些内容对不同的用户来说有不同的需求，那么这些就可以从页面的初始化中剥离出来，按用户的需求通过异步通信来加载内容和资源。对于网站本身的需要来加载后续资源，比如Google首页对于结果页的一些js、image等资源的pre-fetch的方式，通过分析用户可能会产生的行为，为后续的页面提前加载内容，加快后续页面的初始化速度，从缓存中读取页面所需要的资源。

接下来分析一下淘宝首页（http://www.taobao.com）的一些按需加载的技巧。首先对于中间栏的这个部分的实现：

看这个模块的源码之后发现，除了初始化第一个tab内容之后，后面隐藏的几个tab的资源是没有加载的，它是将这些资源的HTML设置到一个隐藏的textarea控件的值里面，在点击了左右的导航按钮之后，就读出这个textarea的内容并解析到tab中，当然这也同时是加载图片等资源。我想，这样做的一个好处就是上面说的按需加载，加快页面的初始化速度；还有另外一个作用是减少页面初始化的DOM节点数。将这个添加更多DOM节点推迟到按照用户的需要去点击导航按钮。这个在加快页面的初始化方面也是很不错的技巧。

再来分析一下Yahoo首页的其中一个模块的实现方式，也是比较类似的：

如上图，在下部的导航中，初始化的时候会默认加载一个tab看到的导航的图片和问题，而其他隐藏的每一个导航tab，在页面初始化的时候HTML的结构均使用四个span标签代替，之后在点击左右导航按钮的时候，进行异步请求资源，并替换掉每一个相应的span标签。它在初始化页面的时候使用span标签，只是为了保持一个高度上的“空架子”，在之后的按需请求中往这个架子中替换内容，这样其中的一个原因可能是为了不至于在替换标签的时候在高度上的过度出现闪烁。

按需加载的思维在很多网站中都有体现，利用Ajax技术，异步请求内容，将隐藏的内容、资源的加载跟页面的初始化剥离开来，加快页面的初始化。

今天又拾起这个一直未实现的冲动，首先既然要并行加载、按顺序执行，那么就必须得给每一个js文件开一个http请求，而且这个请求是无顺序的，即是加载的顺序是无顺序的，但是在执行的时候，就得要按照声明的顺序来执行，比如下面的代码示例：
[javascript]
jL.load({"label":"test","url":"test.js",isOrder:true});
jL.load({"label":"test2","url":"test2.js",isOrder:false});
jL.load({"label":"test3","url":"test3.js",isOrder:true,callback:function(){
alert("test3.js is load");
}}).insert();
[/javascript]

上面的代码中，load方法的参数中包含是否按顺序加载脚本文件，并且在脚本加载下来的时候包含callback函数回调。如果不是按顺序下载的，则直接使用DOM Element的方式插入script到document.body中；insert方法负责开始操作那些俺顺序执行的脚本文件的加载和插入工作；label参数对于需要按顺序执行的脚本文件必不可少，用于标识当前脚本，对无需按顺序执行的脚本可有可无。

刚开始设想的原理是这样的：把需要按顺序执行的脚本通过load方法都临时储存到一个数组里（如果不需要，则直接在load方法里通过DOM Element方法插入），之后调用insert方法来执行上面临时数组（使用XHR Injection的方式获得每一个脚本的responseText），并将请求返回的脚本的内容也暂且储存在临时变量里，待全部的脚本都请求下来之后，再把全部脚本的内容都插入到Document文档里使得脚本起作用。《测试示例1》

上面的方案虽然实现了并行加载、按顺序执行，但是存在诸多弊端，如果有脚本文件比较大，请求的时间比较长，那么先于它加载下来的脚本就迟迟得不到执行了，而且在处理callback回调函数的时候也是在全部脚本加载下来以后才执行。

为此，在这个基础上，修改了实现方式：按顺序执行的脚本仍然使用XHR的方式来加载，并把内容临时储存在数组里，同时通过label标识着脚本文件添加一个load的boolean属性来标识该脚本是否已经加载完成。这样，我就可以使用定时器(setInterval)来检查按label标识顺序排好的数组来检查load属性是否为true，这样来插入脚本到文档中。这样，就可以尽早的将声明在前面的脚本在加载完成的时候就插入到文档内。《测试页面》

在代码中，因为在重复调用insert方法的情况下要处理临时数组和对象的清空问题比较难解决，所以就进行了再一次的封装，支持链式调用，而且总共也才只有load和insert方法，参数说明：label用于标识该脚本文件以示区分，对于isOrder为true时labe必不可少，isOrder为false时可有可无；callback是回调函数，url为脚本的地址。操作方式如下几种：

[javascript]
//分类的方式，几个insert方法调用
jL().load({"label":"jquery","url":"jquery.js",isOrder:true,callback:function(){
alert($("#test").html());
}})
.load({"label":"test","url":"test.js",isOrder:true})
.insert();
///////////////////////////////////
jL().load({"label":"test2","url":"test2.js",isOrder:true})
.load({"label":"test3","url":"test3.js",isOrder:true})
.insert();
//链式调用的方式，最后一个insert方法调用：
jL().load({"label":"jquery","url":"jquery.js",isOrder:false,callback:function(){
alert($("#test").html());
}})
.load({"label":"test","url":"test.js",isOrder:true})
.load({"label":"test2","url":"test2.js",isOrder:true})
.load({"label":"test3","url":"test3.js",isOrder:true}).insert();
//可以将加载信息都声明到一个load方法里：
jL().load(
{"label":"jquery","url":"jquery.js",isOrder:true,callback:function(){
alert($("#test").html());
}},
{"label":"test","url":"test.js",isOrder:true},
{"label":"test2","url":"test2.js",isOrder:true},
{"label":"test3","url":"test3.js",isOrder:true}
)
.insert();
[/javascript]

如上所示，操作简单方便而且实用，下面是js源码：

[javascript]
; (function(win) {
var _h = document.getElementsByTagName("head")[0];
//使用lazy Definition的方式声明xhr实例
var _xhr = function() {
_xhr = win.XMLHttpRequest ? function() {
return new XMLHttpRequest();
}: (new ActiveXObject("Msxml2.XMLHTTP")) ? function() {
return new ActiveXObject("Msxml2.XMLHTTP");
}: function() {
return new ActiveXObject("Microsoft.XMLHTTP");
}
return _xhr();
}
//使用DOM Element的方式把脚本动态插入到文档?
var _domLoad = function(url, parent, callback) {
if (!url){
return;
}
var s = document.createElement("script");
s.setAttribute("src", url); (parent || _h).appendChild(s);
if (callback) {
if (s.readyState) { //IE,Opera
s.onreadystatechange = function() {
if (s.readyState === "loaded" || s.readyState === "complete") {
s.onreadystatechange = null;
callback();
}
}
} else { // FF,Chrome,Safari
s.onload = function() {
s.onload = null;
callback();
}
}
}
}
//通过设置script标签的text属性来插入行内脚本到文档中
//不过一定要插入到head中，插入到body中在IE6下测试出?
var _script = function(text) {
var s = document.createElement("script");
s.text = text;
_h.appendChild(s);
}
//请求每一个js脚本文件
var _request = function(_p, _o) {
var _x = _xhr(),
item = _o._cache[_p.label];
_x.open("GET", _p.url, true);
_x.onreadystatechange = function() {
if (_x.readyState === 4 && (_x.status === 200 || _x.status === 304)) {
item["text"] = _x.responseText;
item["load"] = true;
}
}
_x.send(null);
}
var _load =function (){
for(var i=0,l=arguments.length;i<l;i++){
var a = arguments[i];
if(!a.isOrder){
_domLoad(a.url,a.parent,a.callback);
}else{
this._param.push(a);
this._cache[a.label]={};
this._cache[a.label]["callback"]=a.callback;
}
}
return this;
}
var _insert = function() {
if (!this._param.length) {
return;
}
var _o = null,i = 0;
//请求脚本文件
while (_o = this._param[i++]) {
_request(_o, this);
}
//定时器检查并插入脚本到文档中
var o = this._param.shift(),item = null,that = this;
var interval = setInterval(function() {
item = that._cache[o.label];
if (item["load"]) {
_script(item["text"]);
if (item["callback"]) {
item["callback"]();
}
if (! (o = that._param.shift())) {
clearInterval(interval);
}
}
},5);
return this;
}
var _jL = function() {
this._cache = {};
this._param = [];
}
_jL.prototype = {
load: _load,
insert: _insert
}
win.jL = function() {
return new _jL();
}
})(this);
[/javascript]

对于实现这个轮询发出请求来更新页面UI的功能，还可以通过setInterval定时器来实现，不过普通的定时器的实现方式是在规定的时间内重复的发出请求，而不管前面的请求是否已经完成，这样的实现方式是有很多弊端的。从这点出发，我修改了通过定时器setInterval的实现方式，通过一个布尔值来判断前面的请求是否完成，没完成的话就压缩到堆栈里等待执行。下面是实现的源码：
[javascript]
/*
* @author Shanpeng
* @website:http://www.ilovejs.net
* @e-mail:supersha@foxmail/shanpeng@taobao.com/supershafeng@gmail.com
* @QQ:770104121
* @my word:Here,believe what browsers display,and believe yourself
*/
////////////////////// Javascript’s code below ///////////////////////
(function(global){
var XHR = function(){
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject("Msxml2.XMLHTTP")) {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}

var query = [];
var xhr = XHR();
var ready = true; //用于判断某个请求响应是否成功

var queryAjax = function(url, callback){
query[query.length] = [url, callback];
if (ready) {
var cur = query.shift();
xhr.open("GET", cur[0], true);
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
cur[1](xhr);
ready = true;
}
}
xhr.send(null);
}
ready = false;
}
global.queryAjax = queryAjax;
})(this);

//Usage：
onload = function(){
var div = document.getElementById("test");
var i = 0;
setInterval(function(){
queryAjax("test.txt", function(obj){
div.innerHTML = obj.responseText + (++i);
});
}, 1000);
}
[/javascript]

///////////////////////////////////////////////////////////////////

前几天接触到关于长轮询调用Ajax的技巧，原理很简单：就是在前一次Ajax调用并且响应成功之后再调用XHR对象的open和send方法，继续发送请求。代码示例如下：
[javascript]
var sendRequest = function(url, callback){
var xhr = XHR();
if (typeof xhr === "string") throw xhr;
xhr.open("GET", url, true);
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
//调用回调函数处理响应
callback(xhr);
//重新打开连接
xhr.open("GET", url, true);
xhr.send(null);
}
}
xhr.send(null);
}
[/javascript]
长轮询的关键点就在onreadystatechange事件内，当响应成功之后再打开连接，发送请求。这个比起使用定时器的方式又优化很多了。定时器的代码示例如下：
[javascript]
var sendRequest=function(url,callback){
var xhr=XHR();
if(typeof xhr === "string") throw xhr;
xhr.open("GET",url,true);
xhr.onreadystatechange=function(){
if(xhr.readyState === 4 && xhr.status === 200){
callback(xhr);
}
}
xhr.send(null):
}
//设置定时器
setInterval(sendRequest,1000);
[/javascript]

定时器技巧可能会引发一个致命的问题，就是在时间间隔内如果响应还没有完成，下一个请求就又发出了，这将会导致过多的无用请求，同时也会拖慢系统的运行。

但是这篇文章并不是来说明定时器技巧和长轮询的优异，而是为了说明我在测试长轮询的过程中发现的一个问题。就拿上面第一段展示长轮询的代码来说，如果在IE8下，将会导致崩溃；Google Chrome、Safari、Opera和Firefox下正常。《测试页面》

我通过将定时器跟长轮询结合起来，就可以避免这个问题，在各个浏览器下测试正常，代码示例如下：

[javascript]
var sendRequest = function(url, callback){
var xhr = XHR();
if (typeof xhr === "string")
throw xhr;
xhr.open("GET", url, true);
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
callback(xhr);
//设置一个0时间间隔的定时器
setTimeout(function(){
xhr.open("GET", url, true);
xhr.send(null);
}, 0);
}
}
xhr.send(null);
}
[/javascript]

在上面的代码示例中，在onreadystatechange事件中在响应成功之后设置一个0时间间隔的定时器，这就解决了IE下的问题。《测试页面》，原理可能是定时器本身需要一个生成并执行的过程，这个就给了javascript解析器一个缓冲的过程，从而避免了“死循环”使得javascript解析器错误的解析判断代码。

在IE下崩溃的主要原因一方面是“死循环”，但是主要还是回调函数比较简单，执行的时间非常的短，使得IE的JScript解析器执行的次数超过了极限。或许回调函数如果能执行比较长时间的话，IE的这个问题也就无需使用0定时器了。

Javascript:

[javascript]
onload = function(){
document.getElementById("btn").onclick = function(){
//添加请求队列
addAjax({method: "GET",url: "test2.txt",callback: callback1});
addAjax({method: "GET",url: "test.txt",callback: callback2});
addAjax({method: "GET",url: "test2.txt",callback: callback3});
//开始执行队列
executeAjax();
}
}

var callback1 = function(data, xhr){
document.getElementById("div1").innerHTML = data;
}
var callback2 = function(data, xhr){
document.getElementById("div2").innerHTML = data;
}
var callback3 = function(data, xhr){
document.getElementById("div3").innerHTML = data;
}
[/javascript]

HTML：

[html]
<div id="div1">getStyle test.</div>
<div id="div2">getStyle test.</div>
<div id="div3">getStyle test.</div>
<input type="button" value="Get data" id="btn" />
[/html]

这三个请求会按顺序执行下来，请点击查看具体效果

下面展示我所实现这个请求队列的Javascript源码：
[javascript]
var ajaxes = []; //用于存储参数对象的队列
//用于声明XMLHttpRequest实例对象
var Xhr = function(){
var xhr = false;
try {
xhr = new XMLHttpRequest();
}
catch (e) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xhr;
}

var xhr = new Xhr(); //获得XMLHttpRequest实例对象xhr
//executeAjax是主要的执行Ajax的函数
var executeAjax = function(){
//如果队列为空，则退出执行
if (!ajaxes.length)
return;
var options = ajaxes[0];
if (xhr) {
xhr.open(options.method, options.url, true);
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 &amp;&amp; (xhr.status === 200 || xhr.status === 304)) {
options.callback(xhr.responseText, xhr);
//删除队列中的第一个请求
ajaxes.shift();
//如果队列中还有请求，就接着递归执行executeAjax函数，直到队列为空
if (ajaxes.length > 0) {
executeAjax();
}
}
}
if (xhr.method === "post") {
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
xhr.send(options.data || null);
}
}
//用于添加队列的函数
var addAjax = function(options){
ajaxes.push(options);
}
[/javascript]

上面写的或许有些人会认为封装性不好，污染全局变量，如果封装起来也是非常简单的，这只是本人实现了这个效果时候的草稿，放到具体的项目中当然会封装为类或者对象，方便调用，具体的封装后的代码就不提供了。

var testObj;
try{
testObj=standard.createXhr();
return standard;
}catch(e){
try{
testObj=activeXNew.createXhr();
return activeXNew;
}catch(e){
testObj=activeXOld.createXhr();
return activeXNew;
}
}
}();
[/javascript]
上面的例子就是分支技术的一个应用。我不知道大家对这段代码是否有什么意见或者异议，反正我是觉得冗长了，无端端的声明了三个对象不说，最后还是需要try…catch一套。下面是我所想到的一种解决方案来代替这个关于声明XMLHttpRequest实例对象的例子：
[javascript]
//在运行时就确定了特定的浏览器下将要执行哪个分支的函数
var XHR = {}
XHR.create = (function(){
if (window.XMLHttpRequest) {
return function(){
return new XMLHttpRequest();
}
}
else {
try {
//为了判断Msxml2和Microsoft版本的ActiveXObject，不得不实例化一个,不过也就是一次性过了而已
return new ActiveXObject("Msxml2.XMLHTTP") && function(){
return new ActiveXObject("Msxml2.XMLHTTP");
}
} catch (e) {
return function(){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
})();
[/javascript]

上面的代码简洁明了，有一个不好的缺点就是需要在IE6下需要实例化多一个ActiveXObject(“Msxml2.XMLHTTP”)作为判断条件，IE7以上以及FF等其他浏览器则不会有这个实例化的过程，不过还是那句话，也就是在初始化的时候有这个过程而已，之后浏览器会根据特定的函数来执行。测试页面

当然了，使用Lazy Definition Pattern的方式来实现也是同样的原理：
[javascript]
var XHR = {}
XHR.create = function(){
if (window.XMLHttpRequest) {
XHR.create = function(){
return new XMLHttpRequest();
}
}
else {
try {
//为了判断Msxml2和Microsoft版本的ActiveXObject，不得不实例化一个
XHR.create = new ActiveXObject("Msxml2.XMLHTTP") &&function(){
return new ActiveXObject("Msxml2.XMLHTTP");
}
} catch (e) {
XHR.create = function(){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
XHR.create();
};
[/javascript]

上面就是一个简单的JsonP的应用例子，不过值得说明的是，因为已经把链接到代理的script标签静态的声明了，所以它只能是随页面加载的时候获取异域数据，想要重新获取数据，只能是刷新页面，这个是上面那种方式的其中的一个缺点。要解决这个问题的方法就是动态生成链接到代理的script标签，这样就可以实现局部刷新获取数据，不过这里也有一个小问题，就是动态生成的这个script标签，需要在下次用户重复局部刷新这个异域获取数据的组件的时候能及时的remove掉，否则head就会囤积了很多丢弃的script标签，造成性能问题。下面是这种方式的实现方式：

[javascript]
//将要执行的函数
var callMethod = function(obj){
document.getElementById("div").innerHTML = obj.message;
}

var getJSONP = function(data, callback){
var script = document.getElementById("jsonp");
var head = document.getElementsByTagName("head")[0];
//如果已经存在了id为jsonp的script标签，先remove掉，这一步非常重要
if (script) {
head.removeChild(script);
}
script = document.createElement("script");
script.type = "text/javascript";
script.id = "jsonp";
//在参数中传递客户端的数据以及将要执行的函数名，再加一个时间戳，可以解除浏览器缓存问题
script.src = "http://www.ilovejs.net/lab/test.php?method=callMethod&jsonp=" + data + "&date=" + new Date().getTime();
head.appendChild(script);
script.onload = function(){
callback(script);
}
script.onreadystatechange = function(){
if (this.readyState == ‘loaded’) {
callback(script);
}
}
}
[/javascript]
上面展示的代码基本说明了JsonP的基本原理和实现方式，更多利用JsonP实现跨域的复杂的操作都是基于这些基础原理的。