Fetch resources on-demand，中文意思大概就是按需加载资源，而这里的资源不只是CSS、JS文件，Image、swf、Content等都可以利用这种方式。特别是当前Yahoo的首页：http://www.yahoo.com，几乎页面的每一个模块都体现了按需加载的技巧：左边的导航（用户可以定制、点击异步请求更多资源）、中间的新闻、图片tab、右栏的第三方资源等等。 按需加载表面理解起来很简单，但是怎么个按需法呢？我所理解的按需，包括两个方面：一个是按用户的需要；另一个是网站本身的需要。按需加载主要解决的问题就是加快页面的初始化以及在页面初始化的时候最大化减少HTTP请求，因为有些模块比如：图片导航tab、多级菜单、内容导航等等，这些在初始化页面的时候有很多内容都是处于隐藏状态，用户是看不到的，那么这些内容对不同的用户来说有不同的需求，那么这些就可以从页面的初始化中剥离出来，按用户的需求通过异步通信来加载内容和资源。对于网站本身的需要来加载后续资源，比如Google首页对于结果页的一些js、image等资源的pre-fetch的方式，通过分析用户可能会产生的行为，为后续的页面提前加载内容，加快后续页面的初始化速度，从缓存中读取页面所需要的资源。
之前一直在想法设法的实现js脚本文件按顺序执行，而且并行下载的测试，但是都无终而返。最先设想的是通过轮询的方式来实现按顺序加载，可是这样就导致不能并行加载了。 今天又拾起这个一直未实现的冲动，首先既然要并行加载、按顺序执行，那么就必须得给每一个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参数对于需要按顺序执行的脚本文件必不可少，用于标识当前脚本，对无需按顺序执行的脚本可有可无。
//////////////////////// 2010-02-19 update ///////////////////////////// 对于实现这个轮询发出请求来更新页面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 … 了解更多
之前想做一个Web桌面的项目，考虑的必须得使用Ajax请求队列，使得Ajax的请求能按照队列按顺序执行，解决了Ajax异步传输覆盖的问题，也看了几个别人的代码，都整不太明白，所以自己干脆自己搞搞阵，自己实现，也得个安慰奖。我的实现方法很简单，通过递归调用函数，而无需使用定时器去检查Ajax请求是否已经执行完毕，具体的例子请看下面的代码： 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: … 了解更多
大家应该都知道Javascript中分支技术的实现原理：是一种用来把浏览器间的差异封装到在运行期间进行设置的动态方法中的技术。没错，这个解释是出自《Javascript设计模式》。分支技术最大的特点是只在脚本加载是一次性的确定针对特定的浏览器的代码，这样一来，在初始化完成之后，每种浏览器都只会执行针对特定浏览器的代码，能够在运行时动态确定函数代码的能力。下面是分支技术的简单实现的一个例子： [javascript] //三个对象都声明相同的createXhr方法以示统一 var SimpleXhrFactory=(function(){ var standard={ createXhr:function(){ return new XMLHttpRequest(); } }; var activeXNew={ createXhr:function(){ return new ActiveXObject("Msxml2.XMLHTTP"); } … 了解更多