按需加载，顾名思义就是在用户需要这个功能的时候就初始化这个功能，加载相关的脚本和样式文件等等。普通我们使用的方式，就是在需要的时候，就添加一个文件的url进行加载，并且用一个对象来记录已经加载过的文件。这种方式有些散乱，对于是随意加载的，那倒是不可避免，但是对于一个项目来说，页面的的功能和相应的文件是确定的，那么还是使用上面的方式的话，那么在后期的维护上会比较混乱，增加了成本。 对项目之外的文件加载，使用普通的方式散乱在代码中，也不太合适，那么就需要一个封装的加载器，统一加载文件的接口和调用方式。我下面将要讲的“加载器”，不是传说中的模块化中的加在方式，我更多的是从代码维护方面来考虑，使得一目了然的看到页面本身的功能需要按需加载一些什么文件列表，并且可以标记已经加载的文件，而不会使得url散乱在页面中。 //需要按需加载的内部文件列表映射 mis.classFiles = { ‘AjaxEvent’: ‘includes/ajax.lib.js’, ‘AjaxRequest’: ‘includes/request.lib.js’, ‘colorFade’: ‘includes/effects.lib.js’ } //标记已经include的内部文件 mis.includedFiles = {}; //对内的文件加载 mis.include = … 了解更多
Fetch resources on-demand，中文意思大概就是按需加载资源，而这里的资源不只是CSS、JS文件，Image、swf、Content等都可以利用这种方式。特别是当前Yahoo的首页：http://www.yahoo.com，几乎页面的每一个模块都体现了按需加载的技巧：左边的导航（用户可以定制、点击异步请求更多资源）、中间的新闻、图片tab、右栏的第三方资源等等。 按需加载表面理解起来很简单，但是怎么个按需法呢？我所理解的按需，包括两个方面：一个是按用户的需要；另一个是网站本身的需要。按需加载主要解决的问题就是加快页面的初始化以及在页面初始化的时候最大化减少HTTP请求，因为有些模块比如：图片导航tab、多级菜单、内容导航等等，这些在初始化页面的时候有很多内容都是处于隐藏状态，用户是看不到的，那么这些内容对不同的用户来说有不同的需求，那么这些就可以从页面的初始化中剥离出来，按用户的需求通过异步通信来加载内容和资源。对于网站本身的需要来加载后续资源，比如Google首页对于结果页的一些js、image等资源的pre-fetch的方式，通过分析用户可能会产生的行为，为后续的页面提前加载内容，加快后续页面的初始化速度，从缓存中读取页面所需要的资源。