/**
 * 微型模板引擎 tmpl 0.2
 * 0.2 更新:
 * 1. 修复转义字符与id判断的BUG
 * 2. 放弃低效的 with 语句从而最高提升3.5倍的执行效率
 * 3. 使用随机内部变量防止与模板变量产生冲突
 * @example
 * 方式一：在页面嵌入模板
 * <scriptt type="text/tmpl" id="tmpl-demo">
 * <ol title="<%=name%>">
 *  <% for (var i = 0, l = list.length; i < length; i ++) { %>
 *      <li><%=list[i]%></li>
 *  <% } %>
 * </ol>
 * </scriptt>
 * tmpl('tmpl-demo', {name: 'demo data', list: [202, 96, 133, 134]})
 *
 * 方式二：直接传入模板：
 * var demoTmpl =
 * '<ol title="<%=name%>">'
 * + '<% for (var i = 0, l = list.length; i < length; i ++) { %>'
 * +    '<li><%=list[i]%></li>'
 * + '<% } %>'
 * +'</ol>';
 * var render = tmpl(demoTmpl);
 * render({name: 'demo data', list: [202, 96, 133, 134]});
 *
 * 这两种方式区别在于第一个会自动缓存编译好的模板，
 * 而第二种缓存交给外部对象控制，如例二中的 render 变量。
 * @blog http://www.planeart.cn/?p=1594
 * @see		http://ejohn.org/blog/javascript-micro-templating/
 * @param	{String}	模板内容或者装有模板内容的元素ID
 * @param	{Object}	附加的数据
 * @return	{String}	解析好的模板
 */
var tmpl = (function (cache, $) {
return function (str, data) {
	var fn = !/W/.test(str)
	? cache[str] = cache[str]
		|| tmpl(document.getElementById(str).innerHTML)

	: function (data) {
		var i, variable = [$], value = [[]];
		for (i in data) {
			variable.push(i);
			value.push(data[i]);
		};
		return (new Function(variable, fn.$))
		.apply(data, value).join("");
	};

	fn.$ = fn.$ || $ + ".push('"
	+ str.replace(/\/g, "\\")
		 .replace(/[rtn]/g, " ")
		 .split("<%").join("t")
		 .replace(/((^|%>)[^t]*)'/g, "$1r")
		 .replace(/t=(.*?)%>/g, "',$1,'")
		 .split("t").join("');")
		 .split("%>").join($ + ".push('")
		 .split("r").join("\'")
	+ "');return " + $;

	return data ? fn(data) : fn;
}})({}, '$' + (+ new Date));

此代码预设了两种模板使用环境，一种是用script标签，另一种直接传入string，是由代码的这个部分：

var fn = !/W/.test(str)

来判断是script标签还是直接string的，\W是代表非单词字符，这种判断预设了用户的script 的 id 一定为单词字符，如果是连字符”-”即会被当成string，出现错误，不是特别完美，
暂时也没找到什么好的判断方式，况且通常应用场都是用string, 索性直接去掉script的判断，只支持string的模板，如果硬要script，可以自行获取 script的innerHTML然后再以string的方式传给tmpl函数，另外模板里的语法是通过<%%>包裹的，容易与其他后端语言的模板冲突，故改成<##>.
以下是修正后的完整代码：

/**
 * 微型模板引擎 tmpl
 * 方式：直接传入模板：(可以随心所欲的使用js原生语法)
 * var demoTmpl =
 * '<ol title="<%=name%>">'
 * + '<% for (var i = 0, l = list.length; i < length; i ++) { %>'
 * +    '<li><%=list[i]%></li>'
 * + '<% } %>'
 * +'</ol>';
 * var render = tmpl(demoTmpl);
 * render({name: 'demo data', list: [202, 96, 133, 134]});
 *
 * 缓存交给外部对象控制，如例二中的 render 变量。
 * @blog http://www.planeart.cn/?p=1594
 * @see		http://ejohn.org/blog/javascript-micro-templating/
 * @param	{String}	模板内容或者装有模板内容的元素ID
 * @param	{Object}	附加的数据
 * @return	{String}	解析好的模板
 */
var tmpl = (function (cache, $) {
return function (str, data) {
	var fn = function (data) {
		var i, variable = [$], value = [[]];
		for (i in data) {
			variable.push(i);
			value.push(data[i]);
		};
		return (new Function(variable, fn.$))
		.apply(data, value).join("");
	};

	fn.$ = fn.$ || $ + ".push('"
	+ str.replace(/\/g, "\\")
		 .replace(/[rtn]/g, " ")
		 .split("<#").join("t")
		 .replace(/((^|#>)[^t]*)'/g, "$1r")
		 .replace(/t=(.*?)#>/g, "',$1,'")
		 .split("t").join("');")
		 .split("#>").join($ + ".push('")
		 .split("r").join("\'")
	+ "');return " + $;

	return data ? fn(data) : fn;
}})({}, '$' + (+ new Date));

在通常的JS或CSS文件里，汉字等字符是以unicode的16进制形式存在的， 如果直接输入汉字，在英文或其他语种的系统上，容易造成乱码无法识别的状况，如果把所有汉字转成unicode形式就没有问题了，所以就想到做一个chrome小插件，随时查看汉字的unicode编码，
直接看下主转换代码：

/**
 * 中文转unicode字符工具
 */
function toUnicode(str, cssType) {
    var i = 0,
        l = str.length,
        result = [], //转换后的结果数组
        unicodePrefix, //unicode前缀 (example:\1234||\u1234)
        unicode16; //转换成16进制后的unicode

    //如果是css中使用格式为\1234之类
    unicodePrefix = (cssType && cssType.toLowerCase() === 'css') ? '\\' : '\\u';

    for (; i < l; i++) {
        //转为16进制的unicode, js及css里须转成16进制
        unicode16 = str.charCodeAt(i).toString(16);
        result.push( unicodePrefix + unicode16 );
    }

    return result.join(' ');
}

字符串的charCodeAt方法返回的是10进制的unicode，所以我们需要用toString(16)将其转为16进制的，才能在JS及CSS中使用，而CSS中跟JS不同的是少了个U。

再来看下页面上的调用 ：

/**
 * excute
 */
var input = document.getElementById('input'),
    convert = document.getElementById('convert'),
    CSSResult = document.getElementById('resultCSSType'),
    JSResult = document.getElementById('resultJSType'),
    msg = document.getElementById('msg');

//事件处理
function convertStr(e) {
    var v = input.value;

    //管理事件
    switch (e.type) {
        case 'click':
            if (checkInput(v)) {
                renderResult(v);
            }
            break;

        case 'keydown':
            if (e.keyCode === 13 && checkInput(v)) {
                renderResult(v);
            }
            break;
    }

    //检测英文等字符排除
    function checkInput(str) {
        var charReg = /[^u0391-uFFE5]/g; //匹配英文等无需转换的字符

        if (charReg.test(str)) {
            msg.innerHTML = '输入字符格式有误，请输入中文等字符';
            input.select();
            input.focus();
            renderResult('');
            return false;
        } else {
            msg.innerHTML = '';
            return true;
        }

    }

    //渲染结果
    function renderResult(str) {
        JSResult.innerHTML = toUnicode(str);
        CSSResult.innerHTML = toUnicode(str, 'css');
    }

} 

//bind事件
convert.addEventListener('click', convertStr, false);
input.addEventListener('keydown', convertStr, false);
input.addEventListener('blur', convertStr, false);

正则/[\u0391-\uFFE5]/是用来匹配中文字符，包括标点，繁体什么的。

再来就是生成chrome插件，chrome插件制作很简单，只需在chrome的扩展程序里导入你的项目文件 ，通常就是html+css+js文件即可，然后就可打包生成crx文件，可以在chrome上安装的插件了，（PS:具体的插件制作GG搜索下就有了）

本来想发布至chrome的webstore里，结果发布竟然还要收费 ，所以还是作罢，直接贴一下插件安装地址吧，请用chrome打开 toUnicode.crx

//json数据
var json = {
    status: 'success',
    data: [
        {
            status: 0,
            title: '文件夹1',
            data: [
                {
                    status: 0,
                    title: '文件夹2',
                    data: [
                        {
                            status: 0,
                            title: '文件夹3',
                            data: [
                                {
                                    status: 0,
                                    title: '文件夹4',
                                    data: []
                                },
                                {
                                    status: 0,
                                    title: '文件夹4',
                                    data: []
                                }
                            ]
                        },
                        {
                            status: 0,
                            title: '文件夹3',
                            data: []
                        }
                    ]
                },
                {
                    status: 0,
                    title: '文件夹2',
                    data: []
                }
            ]
        },
        {
            status: 1,
            title: '文件1',
        }
    ]
};

对于上面这种深层次的数据结构，普通的循环是无法搞定的，此时可以提取重复处理的代码片段，然后使用递归 即可搞定，直接看代码：

/**
 * 递归遍历数据
 */
function recursion(data) {
    var i = 0,
        len = data.length,
        j, item, current, flag;

    for (; i < len; i++) {
        item = data[i];

        for (j in item) {
            current = item[j];
            //是否数组判断
            flag = (Object.prototype.toString.call(current) === '[object Array]') ? true : false;

            if (flag) {
                recursion(current);
            } else {
                //这里执行对数据的相应操作
                console.log(current);
            }
        }
    }
}

//调用
recursion(json.data);

一个类似的应用是DOM节点的游走，可以遍历整个文档所有节点，包括子节点，看如下代码：

/**
 * 节点遍历
 */
function nodeWalk(node, fn) {
    var re = arguments.callee; //引用函数本身

    if (node.nodeType === 1) {
        //处理节点
        fn.call(node, node);
    }

    node = node.firstChild;

    while (node) {
        re(node, fn);
        node = node.nextSibling;
    }

}

//调用
nodeWalk(document.body, function(n){
    console.log(this.nodeName);
});

还有一种典型用例是，对于多行的input需要往后端ajax实时验证输入内容的时候，普通的for循环已不能解决问题，需要在ajax请求成功的回调函数里进行递归调用，直接看示例代码：

//初始化
var nodeList = $('#test input:text'),
    n = 0;

/**
 * 递归验证
 */
(function recursionCheck(node) {

    var v = node.value,
        nextNode = nodeList[++n];

    //ajax请求服务端验证
    $.ajax({
        'url': 'xxxxx.do',
        'data': 'xxxxxx',
        'dataType': 'json',
        'success': function(data){

            //验证成功，递归调用代码验证下一个node
            if (data.value === v) {

                //判断节点是否存在
                if (nextNode) {
                    recursionCheck(nextNode);
                } else {
                    alert('验证通过');
                }
            } 

            //验证不成功，结束执行，给出错误提示
            else {
                alert('数据验证不正确');
            }
        }
    });

})(nodeList[n]);

<form action="test.php" target="" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file" />
    <input type="submit" id="J_submit"  value="submit" />
</form>

在ajax盛行的现时，提交form再刷新整个页面，显得用户体验不佳，然而ajax与后端通信 只能传送字符串，是无法传递实体文件的，所以用ajax是无法实现直接文件上传的，这里提供一个解决方案就是用一个实时创建的隐藏iframe来完成上传功能， 具体的原理是，在点击提交按钮时，动态的生成一个隐藏iframe加入到页面上，并且 将form 的 target指向该隐藏iframe，服务端就接收到上传的file文件，并进行相应的操作，然后将返回结果返回到隐藏的iframe里面，这时我们可以与后端开发约定返回结果的格式，可以是json格式，便于我们前端操作，然后前端部分就可以用iframe.contentWindow.document.body.innerHTML来获取后端返回的结果，进行相应的parseJSON处理，即可像处理ajax返回的json一样，处理数据。。。直接贴源代码了(ps:代码是基于jQuery库的)：

/**
 * 模拟ajax无刷新文件上传
 */
var fileUpLoad = function(config) {

    var ifr = null,
        fm = null,
        defConfig = {
            submitBtn: $('#J_submit'), //提交按钮
            complete: function(response) {}, //上传成功后回调
            beforeUpLoad: function() {}, //点击提交未上传时回调
            afterUpLoad: function() {} //点击提交上传后回调
        };

    //静态变量
    var IFRAME_NAME = 'fileUpLoadIframe';

    //配置
    config = $.extend(defConfig, config);

    //绑定submit事件
    config.submitBtn.bind('click', function(e){
        e.preventDefault();

        //点击提交前触发事件, 函数返回false可阻止提交表单，用于file为空判断
        if (config.beforeUpLoad.call(this) === false) {
            return;
        }

        //生成一个隐藏iframe，并设置form的target为该iframe，模拟ajax效果
        ifr = $('<iframe name="'+ IFRAME_NAME +'" id="'+ IFRAME_NAME +'" style="display:none;"></iframe>');
        fm = this.form;

        ifr.appendTo($('body'));
        fm.target = IFRAME_NAME; //target目标设为ifr

        //上传完毕iframe onload事件
        ifr.load(function(){
            var response = this.contentWindow.document.body.innerHTML;

            config.complete.call(this, response);
            ifr.remove();
            ifr = null; //清除引用
        });

        fm.submit(); //提交表单

        //点击提交后触发事件
        config.afterUpLoad.call(this);

    });

};

页面调用是：

fileUpLoad({
    submitBtn: $('#J_submit'),
    complete: function(response){ //上传成功后处理回调
        var d = $.parseJSON(response);

        alert('返回成功')
        console.log(d);
    },
    beforeUpLoad: function() {
        alert('上传前');
    },
    afterUpLoad: function() {
        alert('上传后');
    }
});

而对于需要实时显示上传进度条的应用，则可以考虑form提交后用ajax实时轮询的方式向后端取文件上传的进度，来进行前端页面进度渲染，另一种方式则是基于flash上传，这里就不详细展开了。。

1. 一些常用的元字符.
\w : 查找单词字符，包含字母数字及下划线，相当于[A-Za-z0-9_];
\d : 查找数字，相当于[0-9]
\s : 查找空白字符
\n : 查找换行符
. : 点号代表除换行符及行结束符外所有字符

2. 验证完整字符串，这在表单验证中常用到，例子如下:

var str = '18636200607';
var str2 = '10010';
var reg = /^\d{11}$/;
console.log(reg.test(str)); // return true;
console.log(reg.test(str2)); // return false;

这里的头尾的^$即是限定匹配的必须是整个字符串，而不是其中一部分，这对于表单验证里验证完整的合法输入很有用。

3. 验证一个完整的单词，可以用到\b，例子如下：

var str = 'hello world!';
var str2 = 'helloworld!';
var reg = /\bhello\b/;
console.log(reg.test(str)); //return true
console.log(reg.test(str2)); //return false

这里\b作为单词的边界条件进行判断，与^$夹着字符串相似，但\b夹的是单个单词

4. 捕获型分组与非捕获型分组
捕获型分组是小括号包围起来的一个分组表达式，里面匹配到的内容可以在之后调用，例子如下:

var str = '1234haha';
var reg = /(\d+)\w+/;
var result = reg.exec(str);
console.log(result[0]); //return '1234haha'
console.log(result[1]); //return '1234'

正则对象的exec方法与test不同，它如果匹配不成功返回null,成功则返回一个数组对象，[0]包含匹配到的完整字符串，[1][2]…等等则保存着各个子表达式里所捕获的内容（即小括号里获取的字符串）;
小括号在正则里还有一个用处则是起到分组的作用
如： (abcd){4}
此表达式表示abcd整个字符串重复4次才能匹配成功
但小括号同时也影响了exec方法返回的捕获数组内容，
此时如果不希望捕获内容影响，可以使用非捕获分组，非捕获分组格式是(?:…..);
如： (?:abcd){4}
此时小括号里的内容只会起到分组的作用，并不会捕获内容。

5. 方括号与分组表达式的或结构
方括号里的内容只会匹配单个字符，
例如 [1234] 只会匹配1234里的一个字符，如果希望匹配的是一个字符串可以使用非捕获型分组来达成目的
而或结构的分组表达式 (?:12|34) 会匹配12 或 34这两个字符里的其中一组。
示例代码：

var str = '1234';
var reg = /[1234]/;
var reg2 = /(?:12|34)/;
console.log(reg.exec(str)[0]); //retrun '1'
console.log(reg2.exec(str)[0]); //return '12'

6. 贪婪模式与非贪婪模式
\w+ 在匹配字符串 ‘hello’ 时会匹配整个字符串，此时为贪婪模式
但 \w+? 在匹配时 则只匹配 ‘h’单个字符串，此时为非贪婪模式
也就是说在量词(*, +, ?, {5, })后面加个?即形成非贪婪模式，会尽可能在不影响匹配成功的情况下，少匹配字符
示例代码：

var str = 'hello';
var reg = /\w+/;
var reg2 = /\w+?/;
console.log(reg.exec(str)[0]); //retrun 'hello'
console.log(reg2.exec(str)[0]); //return 'h'

7. 反向引用
捕获型分组里捕获的内容在三种情况下可以被引用
第一是exec方法回复的数组里，从[1]开始
第二是test或exec方法执行后，RegExp.$1开始之后存储捕获内容
第三则是在正则表达式里的反向引用，如\1 \2这种形式
看下例子：

var str = '<td>这里是td</td>';
var reg = /<(\w+)>.*<\/\1>/;
console.log(reg.test(str)); // return true

此处正则表达式里\1则是引用了前面的捕获型分级(\w+)的内容

8. 正向预搜索及不匹配
预搜索与^$\b一样本身不匹配内容，只是提供一个判断
看下例子：

var str = 'HelloWorld';
var reg = /Hello(?=World)/;
var reg2 = /Hello(?!World)/;
console.log(reg.test(str)); // return true
console.log(reg2.test(str)); //return false

(?=…)代表前面要匹配的字符后面必须带有指定的字符才能匹配成功
(?!…)则相反，代表不包含指定的字符
javascript不支持反向预搜索，这里就不介绍了

9. 正则对象的方法
RegExpObject.test 方法：
这是表单验证中常用到的方法，如果匹配成功返回true,反之false

RegExpObject.exec 方法：
exec方法很强大，它基本提供了所有所需要的信息
返回的是一个数组，数组的[0]存放的是匹配到的完整字符串，[1][2]开始存放的是捕获型分组（也就是正则里的小括号包围的内容）捕获到的字符串,
该数组还包含额外两个属性index及input; index标识的是匹配结果的字符串位置，input标识的是正则表达式
其实exec最强大的地方是在于，对于带g全局标识的正则表达式(如/\w+/g)，在每次执行exec的时候，都会将正则对象的lastIndex设置为前一个匹配到的字符串的最后一个位置
换句话说，你就可以利用这个特性进行整个字符串的遍历，并配合捕获型分组，就可以得到你想要的字串内容
看如下例子

//解析url
var url = 'http://www.taobao.com/?ver=1.0&q=search';
var reg = /(\w+)=([^&]*)/g;
var obj = {};
var result;
while(result = reg.exec(url)){
    obj[result[1]] = result[2];
}
console.log(obj); //return {ver:'1.0', q:'search'}

以上就可以遍历正则匹配整个字符串，配合捕获分组就可以得到你想要的字串了

String.match 方法 ：
如果正则表达式不带g全局标识，字符串的match方法与正则对象的exec对象相似，只进行一次匹配，返回一个数组，[0]存放的是完整匹配字串，[1]以后存放捕获分组的内容
如果正则表达式带g全局标识，则match方法回返的内容大不一样，也是一个数组，但是是从[0]开始各个存放匹配到的完整匹配字串，就不会再存放捕获分组的内容了
有时这在简单匹配整个字串的时候比起exec简便些
看下例子：

var str = '1: 哈哈，2: 呵呵， 3: 嘿嘿';
var reg = /\d:/g;
console.log(str.match(reg)); //return ['1:', '2:', '3:']

以上直接回返匹配到的结果数组

String.replace 方法：
字符串的replace方法带两个参数，第一个参数是查找匹配的字符串，第二个参数是要替换成的内容，也可以是个function匿名函数
如果是正则替换方式，则第二个参数里的$有特殊的含义，$1 $1…代表的是之前正则表达式里的捕获分组得到的字串，$&代表的是匹配得到的完整字串，$`代表匹配字串左侧的文本，$’代表匹配字串右侧的文本

看下面个例子：

var str = 'hello world!';
var reg = /(\w+)\s(\w+)/;
str = str.replace(reg, '$2 $1');
console.log(str); //return 'world hello!'

这里利用到$1 $2的捕获分组的内容。

再看个例子：

var str = 'background-color';
var reg = /-(\w)/g;
str = str.replace(reg, function(w, s){
    return s.toUpperCase();
});
console.log(str); // return 'backgroundColor'

对于加g的正则表达式，replace方法会循环执行替换操作，replace方法里的第二个参数如果是function，则function的第一个参数是完整的正则匹配字串，第二个参数开始则是捕获分组得到的字串。

String.split方法及String.search方法较为简单，可参考相关资料

参考资料：
http://www.regexlab.com/zh/regref.htm
http://w3school.com.cn/js/jsref_obj_regexp.asp

这种设置inline-block的缺点是，元素需要设置vertical-align:middle，并且ie下不能完美对齐，以及元素间有空白符等。。
所以可以考虑用float方式代替inline-block，优点是float的元素盒模型好控制 ，无空白符等等。
代码如下：

这里主要用到position:relative配合left:50%的技巧，兼容各浏览器，需要注意的是IE7下需要设置overflow:hidden;来解决无法设置子元素宽度的BUG。

这里也可以多套一层的方式设置left:-50%，更合理，也可以避免一些不必要的IE BUG，如下代码：

举一反三，这种float元素居中的方式其实可以延展应用到很多需要浮动元素又居中的情况。

以前有用过cookie的都了解cookie的存储读取方式都不太优雅，需要自己封装set get方法，而localStorage则方便许多，localStorage 是作為window的一个属性存在的，拥有setItem,getItem,removeItem,clear等方法，相当方便。

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，支持情况如下图：

如下代码即可判断浏览器是否支持

if(window.localStorage){
    alert("浏览支持localStorage")
}else{
   alert("浏览暂不支持localStorage")
}

localStorage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点操作符，及[]的方式进行数据存储，像如下的例子

var storage = window.localStorage;
storage.a = "haha";
storage["b"] = "hehe";
var a = storage.a;
var b = storage["b"];

另外，localStorage还提供了一个key()方法，配合localStorage的length属性，可以在不知道有哪些键值的时候使用，如下：

var storage = window.localStorage;
function showStorage(){
 for(var i=0;i<storage.length;i++){
  //key(i)获得相应的键，再用getItem()方法获得对应的值
  document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
 }
}

FF里storage.key(i) == storage[i], 算个BUG吧

HTML5的本地存储，还提供了一个storage事件，可以对键值对的改变进行监听，使用方法如下：

if(window.addEventListener){
 window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
 window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
 if(!e){e=window.event;}
 //showStorage();
}

对于事件变量e，是一个StorageEvent对象，提供了一些实用的属性，可以很好的观察键值对的变化，如下表：

写一个最简单的，利用本地存储的计数器，有一个需要注意的地方是不管setItem里传什么类型，最终都会被转成string，所以getItem的时候需要转类型：

点运行可查看结果,这里测试代码略显粗糙,其实可以利用JQuery好好的用插件形式封装一下,比如可以判断img是否有src属性,没有再执行赋值操作,避免重要赋值,以及setTimeout的使用可以避免滚动过程中大量scroll事件引起性能损耗.

页面DOM结构按需渲染
按需渲染与按需加载不同, 按需渲染是指DOM结构在浏览器的呈现过程, 这无关网络, 是浏览器构建盒模型,渲染页面的过程,
一个页面通常内容有轻有重,有时候我们会希望最先呈现给用户的是一些重要信息, 这个一方面可以在页面结构上做一些小技巧, 像经典的负边距三列布局,就可以让中间重要内容列,在代码上首先呈现,
另一方面则可以通过把次要内容放置于textarea中并且隐藏它,此时页面会加载相关文本,但不会渲染页面DOM结构,等到需要呈现的时候,再把textarea中的内容赋给相应的容器,再进行渲染..
看下面的代码:

以上代码可以看到实现原理很简单,次要内容在代码上置前,如果不做处理,是会比重要内容先呈现的,此时就先放置于textarea中,需要时再加入到页面渲染.

sprites图片预加载
现在大部分页面上都会使用sprites图片技术, 因sprites图片一般较小, 且对页面显示完整较重要, 可考虑在页面开始时就预加载进sprites图片, 像下面这段代码即可:

var img = new Image();
img.src = "sprites.png";

这样即可达到预加载的效果,也可以在任何你认为需要的地方进行预加载.

script及css的预加载
因为浏览器会缓存外部JS及CSS文件 ，所以script与css文件同样可以进行预加载,
很多门户首页或流量大的页面,为了节省http请求数,常常会把JS及css直接写在页面上, 但子页一般是使用外调的CSS及JS文件,此时就可以考虑在首页加载完毕时, 在用户空闲时,在后台加载子页所需要的CSS及JS文件即可,同时又不影响用户操作，可以使用setTimeout动态加载外部JS及CSS.
动态加载外调 js及CSS可参考 这个Der微型库,提供的方法，用法也很简单:

//加载js带回调
Der.loadScript("http://www.ueder.net/derjs/Der.js",function(){
    //这里是加载完毕的回调函数
});
//加载CSS
Der.loadCss("http://www.ueder.net/wp-content/themes/DerStyle/style.css");

预加载与按需加载(或延迟加载)似乎听起来矛盾, 事实上并不冲突, 根据用户体验可以适当的选择预加载或按需加载.

以下是下载：
压缩版:http://www.ueder.net/derjs/Der.min.js
未压版:http://www.ueder.net/derjs/Der.js

以下是源码:

/**
 * name:微型库Der.js
 * Author:Der(www.ueder.net)
 * Date:2011/01/01
 * Update:2011/01/23
 * Description:以方法集的方式整合兼容性的底层JS功能,可按需取用
 */

//声明Der命名空间,并防止覆盖页面开发者定义的重名变量
var Der = Der || {}; 

/**************************
 *DOM节点元素创建及获取的相关方法
 **************************/

//通过id获取节点元素
Der.getById = Der.g = function(id){
	if(typeof id === "string" && !!id){
		return document.getElementById(id);
	}
};

//通过节点属性attribute获取节点元素集合[返回节点数组]
Der.getByAttribute = function(attribute,value,nodeRefer){
	/**参数解释
	 * attribute:属性名,
	 * value:属性值,
	 * nodeRefer:参照节点 [可选]
	 */

	var nodesResult = [], //结果数组
		nodeRefer = (nodeRefer) ? nodeRefer : document, //无参照节点则设参照节点为document
		nodesCollection = nodeRefer.getElementsByTagName("*"); //获取参照节点下所有节点

	//通过attribute筛选进数组
	for(var i=nodesCollection.length-1; i>=0; i--){
		var node = nodesCollection[i];
		if(attribute === "className" || attribute === "class"){ //当属性为class样式时，因IE支持不一样的字符，不用getAttribute方法，直接用点符号取className属性值
			if(node.className === value){
				nodesResult.push(node);
			}
		}else{ //为其他属性时,正常getAttribute取值
			if(node.getAttribute(attribute) === value){
				nodesResult.push(node);
			}
		}
	}

	//返回节点数组
	return nodesResult;
};

//通过class获取节点元素集合[返回节点数组]
Der.getByClass = function(cssName,nodeRefer){
	/** 参数解释
	 * cssName:样式名,
	 * nodeRefer:参照节点[可选]
	 */

	if(typeof document.getElementsByClassName === "function"){ //判断是否原生支持getElementsByClassName
		nodeRefer = (nodeRefer) ? nodeRefer : document; //无参照节点则设参照节点为document
		return Array.prototype.slice.call(nodeRefer.getElementsByClassName(cssName)); //返回转化为数组的节点集合
	}else{
		return Der.getByAttribute("className",cssName,nodeRefer);
	}
};

//创建标签[返回节点]
Der.createElement = function(tagName,attributes){
	/**参数解释
	 * tagName:元素标签名
	 * attributes:元素的属性,对象形式(范例:{"id":"myid","style":"background:red; color:blue;"})
	 */

	//创建DOM标签
	var element = document.createElement(tagName); 

	//遍历设置属性
	if(attributes){
		for(var name in attributes){
			if (attributes.hasOwnProperty(name)) { //过滤掉prototype继承的属性
				if(name === "class" || name === "className"){ //如果为样式名则直接指定className
					element.className = attributes[name];
				}else if(name === "style"){ //如果为内联样式则调用style.cssText;
					element.style.cssText = attributes[name];
				}else{ //正常设置属性
					element.setAttribute(name,attributes[name]);
				}
			}
		}
	}

	return element;
};

/**************************
 *与event事件相关的方法
 **************************/

//添加事件
Der.addEvent = function(element, type, handle){
	/**参数解释
	 * element:元素对象,
	 * type:事件类型,
	 * handle:事件处理函数
	 */

	if(element.addEventListener){
		element.addEventListener(type, handle, false);
	}else if(element.attachEvent){ //for ie
		element.attachEvent("on" + type, handle);
	}else{
		element["on" + type] = handle;
	}
};

//移除事件
Der.removeEvent = function(element, type, handle){
	/**参数解释
	 * element:元素对象,
	 * type:事件类型,
	 * handle:事件处理函数
	 */

	if(element.removeEventListener){
		element.removeEventListener(type, handle, false);
	}else if(element.detachEvent){ //for ie
		element.detachEvent("on" + type, handle);
	}else{
		element["on" + type] = null;
	}
};

//获取event对象
Der.getEvent = function(e){
	return e || event;
};

//获取target对象(须先获取event对象)
Der.getEventTarget = function(e){
	return e.target || e.srcElement;
};

//获取相关元素,在mouseover,mouseout时使用(须先获取event对象)
Der.getRelatedTarget = function(e){
	if(e.relatedTarget){
		return e.relatedTarget;
	}else if(e.toElement){ //for ie
		return e.toElement;
	}else if(e.fromElement){ //for ie
		return e.fromElement;
	}else{
		return null;
	}
};

//阻止冒泡(须先获取event对象)
Der.stopPropagation = function(e){
	if(e.stopPropagation){
		e.stopPropagation();
	}else{
		e.cancelBubble = true; //for ie
	}
};

//阻止默认行为(须先获取event对象)
Der.preventDefault = function(e){
	if(e.preventDefault){
		e.preventDefault();
	}else{
		e.returnValue = false; //for ie
	}
};

//window加载完毕
Der.windowLoad = function(handle){
	/**参数解释
	 * handle:事件处理函数
	 */

	var win = window;
	Der.addEvent(win,"load",function(){
		Der.removeEvent(win, "load", arguments.callee); //移除事件,释放内存
		handle();
	});
};

//DOM文档树加载完毕
Der.DOMReady = function(handle){
	/**参数解释
	 * handle:事件处理函数
	 */

	var doc = document;
	if(doc.addEventListener){ // 支持标准DOM事件的浏览器使用DOMContentLoaded即可判断页面DOM文档树加载完毕
		doc.addEventListener("DOMContentLoaded",function(){
			doc.removeEventListener("DOMContentLoaded", arguments.callee, false); //移除事件,释放内存
			handle();
		},false);
	}else if(doc.attachEvent){ //ie下则使用document的readystatechange事件来模拟判断文档树加载完毕
		doc.attachEvent("onreadystatechange", function(){
			if(doc.readyState === "interactive" || doc.readyState === "complete"){ //ie下可能发生两种情况中的一种
				doc.detachEvent("onreadystatechange", arguments.callee);//移除事件，防止执行两次
				handle();
			}
		});
	}
};

/**********************
 *获取、设置、删除cookie等相关方法
 *********************/

//设置cookie
Der.setCookie = function(name,value,days,path,domain,secure){
	/**参数解释
	 * name:cookie名,
	 * value:cookie值,
	 * days:失效天数,[可选]
	 * path:路径,[可选]
	 * domain:域,[可选]
	 * secure:安全标志(可选值true/false)[可选]
	 */

	//name value 编码
	var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value); 

	if (days) { //cookie保存天数
		var _exp = new Date();
		_exp.setTime(_exp.getTime() + days * 24 * 60 * 60 * 1000);
		cookieText += "; expires=" + _exp.toGMTString();
	}
	if(path){ //路径
		cookieText += "; path=" + path;
	}
	if(domain){ //域
		cookieText += "; domain=" + domain;
	}
	if(secure){ //安全标志
		cookieText += "; secure";
	}

	//写入cookie
	document.cookie = cookieText;
};

//获取cookie
Der.getCookie = function(name){
	/**参数解释
	 * name:cookie名
	 */

	var cookieName = encodeURIComponent(name) + "=",
		cookieStart = document.cookie.indexOf(cookieName), //获取cookieName在cookie中的字符位置
		cookieValue = ""; //cookie值

	if(cookieStart > -1){	//如果存在cookieName
		var cookieEnd = document.cookie.indexOf(";",cookieStart); //获取所需cookie末位置
		if(cookieEnd === -1){
			cookieEnd = document.cookie.length; //cookie在最后一条时
		}
		cookieValue = decodeURIComponent(document.cookie.slice(cookieStart + cookieName.length, cookieEnd)); //截取cookie
	}

	//返回cookie值
	return cookieValue;
};

//删除cookie
Der.deleteCookie = function(name){
	/**参数解释
	 * name:cookie名
	 */

	Der.setCookie(name,"",-1); //通过设置cookie过期来删除相应cookie
};	

/**********************
 *ajax以及加载外部js,css文件
 *********************/

 //ajax异步请求
 Der.ajax = function(settings){
	/**参数解释
	 * settings:对象形式的参数,
	 * 范例:{
	 *			url:"json.php", //ajax请求地址
	 *			type:"get", //请求类型,可为get或post
	 *			data:"name=Der&value=frontEngineer", //请求类型为post时,传递的数据
	 *			isJson:false, //对返回数据是否进行json格式转换
	 *			success:function(response){ //返回数据成功时的回调函数
	 *				alert(response);
	 *			}
	 *		}
	 */ 

	//参数默认值扩展
	settings = Der.extend({
		url:"",
		type:"get",
		data:"",
		isJson:false
	},settings);

	//参数
	var url = Der.trim(settings.url),
		type = settings.type.toLowerCase(),
		data = settings.data,
		isJson = settings.isJson,
		success = settings.success,
		response;

	//url合法性筛选
	if(typeof url !== "string" || url === "") return;

	//创建XMLHttpRequest对象
	function createXHR(){
		if(typeof XMLHttpRequest === "function"){ //支持XMLHttpRequest的浏览器
			return new XMLHttpRequest();
		}else if(typeof ActiveXObject === "function"){ //IE6等支持ActiveXObject
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
	}

	//发送http请求
	var xhr = createXHR();
	xhr.onreadystatechange = function(){
		if(xhr.readyState === 4){
			if((xhr.status>=200 && xhr.status<300) ||
				xhr.status === 304 ||
				xhr.status === 1223){
				if(isJson){
					response = eval("("+xhr.responseText+")"); //json格式解析
				}else{
					response = xhr.responseText;
				}
				if(success){
					success(response);
				}
			}
		}
	}
	xhr.open(type,url,true);
	if(type === "get"){
		xhr.send(null);
	}else if(type === "post"){
		xhr.send(data);
	}
 };

//动态加载外部js文件
Der.loadScript = function(url, callback) {
	/**参数解释
	 * url:需要加载的外部JS路径,
	 * callback:加载完毕回调函数[可选]
	 */

	setTimeout(function(){ //setTimeout将加载js彻底移出文档加载流，实现异步，不阻塞页面其他内容
		//创建script
		var script = Der.createElement("script",{
			"src":url,
			"type":"text/javascript"
		});

		//为script添加加载完毕判断事件
		if(script.readyState) { //ie不支持DOM标签的onload事件,支持readystatechange事件
			Der.addEvent(script,"readystatechange",function(){
				if(script.readyState === "loaded" || script.readyState === "complete") {
					//加载完执行回调函数
					if(callback){callback();}
					//此处销毁事件引用，防止IE下执行两次
					Der.removeEvent(script,"readystatechange",arguments.callee);
				}
			});
		}else{ //DOM标签的onload事件
			Der.addEvent(script,"load",function(){
				//加载完执行回调函数
				if(callback){callback();}
				//此处销毁事件引用
				Der.removeEvent(script,"load",arguments.callee)
			});
		}

		//加入head
		document.getElementsByTagName("head")[0].appendChild(script);
	},0);
};

//动态加载外部css文件,无回调
Der.loadCss = function(url) {
	/**参数解释
	 * url:需要加载的外部CSS路径
	 */

	//创建引用外部CSS的link标签
	var css = Der.createElement("link",{
		"href":url,
		"rel":"stylesheet",
		"type":"text/css"
	});

	//加入head
	document.getElementsByTagName("head")[0].appendChild(css);
};

/**********************
 *工具类方法
 *********************/

//去除字符串的左右空格
Der.trim = function(str,pos){
	/**参数解释
	 * str:需要去除空格的字符串
	 * pos:去除空格的位置,可选值为"left","right"[可选]
	 */

	var trimLeft = /^[sxA0]+/,
		trimRight = /[sxA0]+$/;
	if(!pos || (pos!=="left" && pos!=="right")){ //默认去除字符串两边空格
		return str.replace(trimLeft,"").replace(trimRight,"");
	}else if(pos === "left"){ //去除字符串左空格
		return str.replace(trimLeft,"");
	}else if(pos === "right"){ //去除字符串右空格
		return str.replace(trimRight,"");
	}
};

 //扩展对象(默认值替换)
Der.extend = function(target,obj){
	/**参数解释
	 * target:默认值对象
	 * obj:待扩展的对象
	 */

	if(obj){
		for (var i in target){
			if((typeof obj[i]) === "undefined"){
				obj[i] = target[i];
			}
		}
		return obj;
	}else{
		return target;
	}
}

所谓事件委托就是利用事件的冒泡特性，只需为所有需要添加事件的子元素的父元素添加一个事件处理程序就可以满足应用。在DOM标准中，事件支持捕获及冒泡过程，但IE中只支持冒泡过程，所以我们只需要关注冒泡过程。看下面一段代码

<ul id="list">
	<li id="list1">列表1</li>
	<li id="list2">列表1</li>
	<li id="list3">列表1</li>
</ul>

在上面这段代码中，如果我们需要alert出每个li的innerHTML，传统方法是:

var items = document.getElementById("list").getElementsByTagName("li");
for(var i=0,len=items.length; i<len; i++){
	items[i].onclick = function(){
		alert(this.innerHTML);
	};
}

这样我们就为页面添加了三个事件处理程序，如果在更复杂的更多的li元素的页面，那么事件处理程序就会更多，会影响到页面性能，此时我们可以利用事件冒泡优化性能，如下面代码:

//事件封装
var EventUtil = {
		getEvent:function(e){
			return e || event;
		},
		getTarget:function(e){
			return e.target || e.srcElement;
		}
	};
//
var list = document.getElementById("list");
list.onclick = function(e){
	//获取事件目标
	var evt = EventUtil.getEvent(e);
	var target = EventUtil.getTarget(evt);
	//
	alert(target.innerHTML);
};

在这段代码里，我们只为父级元素添加了一个onclick事件，然后根据target获取事件实际的作用对象，然后执行我们需要的代码，这样我们只创建了一个事件处理程序，相较前面的传统代码得到了优化。

如果可以的话，也可以考虑为document添加事件处理程序，以减少在具体元素上添加各种事件，而且document在页面加载时是最先呈现的，几乎随时都可调用到。

另一个与事件有关的影响性能的则是事件的移除，我们在页面中的DOM操作常常会移除一些页面元素，而这些元素可能会带有事件，看下面的例子:

<div id="form">
	<button type="submit" id="btn">提交</button>
</div>
<script type="text/javascript">
	var btn = document.getElementById("btn");
	btn.onclick = function(){
		//执行一些操作...
		document.getElementById("form").innerHTML = "已提交，等待中..."
	};
</script>

上面的代码中点击按钮后移除了按钮，但按钮上的onclick事件并没有移除，事件会驻留在内存中，特别是IE不能很好的处理，此时我们可以在事件无用的时候手动移除，如下：

<div id="form">
	<button type="submit" id="btn">提交</button>
</div>
<script type="text/javascript">
	var btn = document.getElementById("btn");
	btn.onclick = function(){
		//执行一些操作...
		btn.onclick = null; //移除事件处理函数
		document.getElementById("form").innerHTML = "已提交，等待中..."
	};
</script>

所以我们在往页面添加事件的时候，在不用的时候记得移除，释放内存。