JQ不错，被JS大师们封装的不错，这对于开发者来说是件好事，会让你少写很多代码，呵呵，你可能已经忘记了document.getElementByID,document.getElementByTags等等恩，写这个系列的目的是帮助“我喜欢的”年轻人们一起成长，呵呵！

对于javascript类库目前来说有几个比较流行，如jquery,yahooYUI,prototype等等，但今天的主角是jquery，目前比较新的是1.8了，发展的很快呀，呵呵，解决了之前版本的很多BUG，这一点告诉我们，对于jq我们还是要用新版本的。

好了，来看一下我们JQ系列的目录吧！

Jquery真的不难~目录

第一回　　编程基础知识

第二回　　选择器的使用及性能

第三回　　如何改变HTML标签的样式

第四回　　JQ也是事件驱动的（匿名函数的使用）

第五回　　JQ中的遍历（遍历中的性能知识点）

第六回　　JQ中的异步调用方式

第七回　　JS也要面向对象

第八回　　JS的闭包问题

书后语：感谢兄弟让我静下心来写这个系列，其时早就想总结一下了，最后祝有志者早日事尽成！

本文链接

1. 批量增加Dom 
尽量使用修改innerHTML的方式而不是用appendChild的方式; 因为使用innerHTML开销更小,速度更快,同时也更加内存安全. 
有一点需要注意的是,用innerHTML方式添加时,一定不要在循环中使用 innerHTML += 的方式添加,这样反而会使速度减慢; 而是应该中间用array缓存起来,循环结束后调用 xx.innerHTML = array.join(‘’);的方式,或者至少保存到string中再插到innerHTML中. 
针对用户列表一块采用这种方式优化后,加载速度提升一倍. 
2. 单个增加Dom 
这里是指要将新节点加载到一个内容不断变化的节点的情形,对于内容稳定的节点来说,随便怎么加都没有问题. 但是对于有动态内容的节点来说,为其添加子节点尽量使用 dom append的方式. 
这是因为,dom append不会影响到其他的节点;而如果修改innerHTML属性的话,该父节点的所有子节点都会从dom树中剥离,再根据新的innerHTML值来重绘子节点dom树;所有注册到原来子节点的事件也会失效. 
综上,如果在一个有动态内容的节点上 出现了 innerHTML += 的代码,就该考虑是否有问题了. 
3. 创建Dom节点 
用createElement方式创建一个dom节点,有一个很重要的细节: 在执行完createElement代码之后,应该马上append到dom树中; 否则,如果在将这个孤立节点加载到dom树之前所做的赋值它的属性和innerHTML的操作都会引发该dom片段内存无法回收的问题. 这个不起眼细节,一旦遇到大量dom增删操作,就会引发内存的灾难. 
4. 删除Dom节点 
删除dom节点之前,一定要删除注册在该节点上的事件,不管是用observe方式还是用attachEvent方式注册的事件,否则将会产生无法回收的内存. 
另,在removeChild和innerHTML=’’二者之间,尽量选择后者. 因为在sIEve(内存泄露监测工具)中监测的结果是用removeChild无法有效地释放dom节点. 
5. 创建事件监听 
现有的js库都采用observe方式来创建事件监听,其实现上隔离了dom对象和事件处理函数之间的循环引用,所以应该尽量采用这种方式来创建事件监听. 
6. 监听动态元素 
Dom事件默认是向上冒泡的,发生在子节点中的事件,可以由父节点来处理. Event的 target/srcElement 仍是产生事件的最深层子节点. 这样,对于内容动态增加并且子节点都需要相同的事件处理函数的情况,可以把事件注册上提到父节点上,这样就不需要为每个子节点注册事件监听了. 
同时,这样做也避免了产生无法回收的内存.即使是用Prototype的observe方式注册事件并在删除节点前调用stopObserving,也会产生出少量无法回收的内存,所以应该尽量少的为dom节点注册事件监听. 
所以,当代码中出现在循环里注册事件时,也是我们该考虑事件上提机制的时候了. 
7. HTML提纯 
HTML提纯体现的是一种各负其责的思想. HTML只用来显示,尽量不出现和显示无关的属性.比如onclick事件,比如自定义的对象属性. 
事件可以用前面的方法避免, 对象属性指的是这样的一种情景: 通常情况下,动态增加的内容都是有个对象和它对应,比如聊天室的用户列表,每个显示用户的dom节点都有一个user对象和它对应,这样在html中,应该仅保留一个id属性和user对象对应,而其他的信息,则应通过user对象去获取. 


    基于PrototypeJS，写了一个Dom生成器，以提供简单高效的HTML操作接口的语法和语义优化： 

作者:长沙
1. 使用类似JSONML的格式(HTML in JSON)描述DOM结构，以补充HTML转义字符串的表达形式，规范格式中可支持以下HTML语义： 
l 标签名 
l 属性(标识符,类名,事件名,内联样式等) 
注：事件名上注册的侦听函数将自动通过Event.observe方式添加 
l 嵌套标签 
格式规范可简单描述为： 
{ 
tag:string,　　　　　　　　　　// 元素的标记名，如果没有，默认为div 
children|cn: string|Array|json,　　// 子结点对应的json数组或字节点的html或单个json 
html:string,　　　　　　　　　　// 对应的html，如果有cn或children属性就忽略 
style:function|string|json,　　　　// 元素的样式，可以是函数，字符串，json对象 
cls:string,　　　　　　　　　　　// 元素的class属性的值 
x:y　　　　　　　　　　　　　　// x表示其他名字，y表示变量值、非空字符串 
onXXX: function // 以on为首的属性是事件侦听器 
} 
一个具体的例子为： 
var list = DomBuilder.append('my-div', { 
tag : 'ul', 
cls : 'my-list', 
children : [ 
{ 
tag : 'li', 
id : 'item1', 
html : 'List Item 1', 
onclick : function() { 
alert('List Item1 Clicked') 
} 
}, 
{ 
tag : 'li', 
id : 'item2', 
html : 'List Item 2', 
customattr : 'customValue' 
}] 
}); 
2. 在实际修改DOM结构时，提供两种方式可供调用者选择，以便应需使用： 
l W3C标准DOM操作(appendChild, removeChild)方式 
l 使用innerHTML,insertAdjacentHTML等的实效模式 
一个具体例子为： 
DomBuilder.useDom = true; //显示申明使用W3C Dom操作方式 
3. 另外提供DOM节点的有效回收方法 
var abandoned = DomBuilder.destroy(list); //将DOM节点从文档中移除

csdn

本文链接

1.HTML5实现了script的async属性，这个新的属性可以让js在浏览器中以非阻塞的模式加载，另外script还有一个defer属性，这个属性目前所有浏览器都已实现（除了firefox和chrome的早期版本），IE这方面做得好，从一开始就支持些属性。

2.async和defer的区别：

带有async或者defer的script都会立刻下载并不阻塞页面解析,而且都提供一个可选的onload事件处理, 在script下载完成后调用,用于做一些和此script相关的初始化工作。它的不同之处在于async一旦下载完成就立即执行（在window.onload事件之前），不确保执行的顺序，而defer能确保js是在按照其在页面中的顺序执行（在DOMContentLoaded事件之前）。

3.为了解决浏览器兼容问题可以使用下面的代码进行处理

由于是异步加载所以使用相应js内容就需要在window.onload事件中使用，直接写在页面中会报脚本错误，如：

本文链接