1whilevar num = 1//1、声明循环变量while (num<=10){//2、判断循环条件 document.write(num+"<br />")//3、执行循环体操作；num++//4、更新循环变量；} while循环()中的表达式，运算结果可以是各种类型，但是最终都会转为真假，转换规则如下。①Boolean：true为真，false为假；②String：空字符串为假，所有非空字符串为真；③Number：0为假，一切非0数字为真；④null/Undefined/NaN:全为假；⑤Object：全为真。2do-while循环while循环特点：先判断后执行；do-while循环特点：先执行再判断，即使初始条件不成立，do-while循环至少执行一次；var num = 10 do{document.write(num+"<br />")//10 9 8 7 6 5 4 3 2 1 0num-- }while(num>=0) document.write(num)//-13,for循环for (var num =1num<=10num++) {document.write(num+" <br />")//1 2 3 4 5 6 7 8 9 10 }4for-in循环　var arr = ['a', 'b', 'c', 'd'] for (let a in arr) {console.log(a)// 0 1 2 3}for (let a of arr) {console.log(a)// a b c d}JQ循环有$.each和$.map('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象})

1:JS中大量的DOM操作也会导致事件响应缓慢甚至真正卡死浏览器，如在IE6下一次插入大量的HTML。而如果真的弹出了“脚本运行时间过长“的提示框则说明你的JS脚本肯定有死循环或者进行过深的递归操作了。

2:这时候需要对脚本进行优化，其步骤如下：

第一步，优化循环，循环体中包含太多的操作和循环的次数过多都会导致循环执行时间过长，并直接导致锁死浏览器。如果循环之后没有其他操作，每次循环只处理一个数值，而且不依赖于上一次循环的结果则可以对循环进行拆解，看下面的chunk的函数：

function chunk(array, process, context){

setTimeout(function(){

var item = array.shift()

process.call(context, item)

if(array.length >0){

setTimeout(arguments.callee,100)

}),100)

}

chunk()函数的用途就是将一个数组分成小块处理，它接受三个参数：要处理的数组，处理函数以及可选的上下文环境。每次函数都会将数组中第一个对象取出交给process函数处理，如果数组中还有对象没有被处理则启动下一个timer，直到数组处理完。这样可保证脚本不会长时间占用处理机，使浏览器出一个高响应的流畅状态。

其实看来，借助JS强大的闭包机制任何循环都是可拆分的，下面的版本增加了callback机制，使可再循环处理完毕之后进行其他的操作。

function chunk(array,process,cbfun){

var i=0,len = array.length //这里要注意在执行过程中数组最好是不变的

setTimeout(function(){

process( array[i], i++) //循环体要做的操作

if( i <len ){

setTimeout(arguments.callee,100)

}else{

cbfun()//循环结束之后要做的操作

}

}

}

第二步，优化函数，如果函数体内有太多不相干但又要一起执行的操作则可以进行拆分，考虑下面的函数：

function dosomething(){

dosomething1()

dosomething2()

}

dosomething1和dosomething2互不相干，执行没有先后次序，可用前面提到的chunk函数进行拆分：

function dosomething(){

chunk([dosomething1,dosomething2],function(item){item()})

}

或者直接交给浏览器去调度

function dosome(){

setTimeout(dosomething1,0)

setTimeout(dosomething2,0)

}

第三步，优化递归操作，函数递归虽然简单直接但是过深的递归操作不但影响性能而且稍不注意就会导致浏览器弹出脚本失控对话框，必须小心处理。

看以下斐波那契数列的递归算法：

function fibonacci(n){

return n <2? n: fibonacci(n -1)+ fibonacci(n -2)

}

fibonacci(40)这条语句将重复调用自身331160280次,在浏览器中执行必然导致脚本失控，而采用下面的算法则只需要调用40次

fibonacci =function(n){

var memo ={0:0,1:0}//计算结果缓存

var shell =function(n){

var result = memo[n]

if(typeof result !='number')//如果值没有被计算则进行计算

memo[n]= shell(n-1)+ shell(n -2)

return memo[n]

}

return shell(n)

}

这项技术被称为memoization,他的原理很简单就是同样的结果没必要计算两次。另一种消除递归的办法就是利用迭代，递归和迭代经常会被作为互相弥补的方法。

第四步，减少DOM操作，DOM操作的代价是相当昂贵的，大多数DOM操作都会触发浏览器的回流(reflow)操作。例如添加删除节点，修改元素样式，获取需要经过计算的元素样式等。我们要做的就是尽量少的触发回流操作。

el.style.width ='300px' el.style.height ='300px' el.style.backgroundColor ='red'

上面的操作会触发浏览器的三次回流操作，再看下面的方式：

el.className ='newStyle'

通过设置改元素的className一次设置多个样式属性，将样式写再CSS文件中，只触发一次回流，达到了同样是效果而且效率更高。因为浏览器最擅长的就是根据class设置样式。

还有很多可以减少DOM操作的方法，在此就不多说了，但是一个基本的原则就是让浏览器去做它自己擅长的事情，例如通过class来改变元素的属性。

相信经过上面的优化的过程必定可以大大提高用户体验，不会出现浏览器被锁死和弹出脚本失控的对话框，使你的浏览器从繁重的任务中解放出来。需要指出的是上面这些优化并不是必须的，只有当一段脚本的执行时间真的影响到了用户体验才需要进行。虽然让用户觉得脚本的执行变快了，但其实完成同一个操作的时间可能被延长了，这些技术只是让浏览器处于一个快速响应的状态，使浏览更流畅。

DOM： Document Object Model，文档对象模型；js提供了丰富的api来操作文档内容。

DOM树： html文档中的内容是以树形结构排布，html是DOM树根，html下只有两个子标签head、body

节点： DOM将所有的分支端都成为节点。节点有很多类型，常见的节点类型有：文本节点、元素节点。

可以通过 nodeType查看节点类型 ： 1元素节点、3文本节点

特殊的元素节点：

1、html元素

2、body元素

3、head元素

节点操作的api（属性和方法）

1、nodeName：只读属性，可以读取节点名称

2、nodeType：只读属性，读取节点类型

3、 hasChildNodes()：判断调用方法的节点是否存在子节点，存在返回true，不存在返回false。

主流浏览器会将换行符、制表符、空格当做文本节点处理，IE9以下会忽略它们。

4、childNodes：只读属性，获得节点的子节点集合，子节点集合是一个类数组结构，有数组特点无数组方法

5、firstChild：获得节点的第一个子节点

6、lastChild：获得节点的最后一个子节点

7、querySelector()：

参数：string类型，css选择器

作用：获得文档中第一个符合选择器条件的节点

兼容：在IE9以下不支持

8、 querySelectorAll()： // 获得的都是静态集合

参数：string类型，css选择器

作用：获得文档中所有符合选择器条件的节点集合（类数组结构）

兼容：在IE9以下不支持

注意： querySelector() 和 querySelectorAll() 得到的都是元素节点。

9、previousSibling：获取节点的前一个兄弟节点

10、nextSibling：获取节点的后一个兄弟节点

11、parentNode：获得节点的父节点（父节点一定是元素节点）

12、removeChild()：节点删除它的指定子节点

DOM操作元素：暂时不用的隐藏、一定不用的删除。

13、cloneNode()：克隆一个节点

参数：boolean类型，true深克隆，false浅克隆，默认浅克隆

深克隆：不仅克隆节点和节点的属性，还会克隆节点的子节点

浅克隆：只克隆节点和节点的属性，不会克隆节点的子节点

14、a.replaceChild(b,c)：用b替换c

其中a是c的父节点，c是文档上已经存在的节点，b可以是节点也可以是已存在节点，被替换的节点会从文档结构中删除。

15、a.replaceWith(b)：用b替换a

a已存在的节点，b可以是新节点也可以是已存在节点，被替换的节点从DOM树删除。

16、a.insertBefore(b,c)：在c前面插入b

其中，a是c的父节点，c是已经存在的节点，b是新节点

17、a.appendChild(b)：在a末尾追加b

a是父节点，b是a的子节点, c是子节点

元素节点的相关api

1、getElementsByTagName()：根据标签名获得元素集合（类数组结构）

区别：HTMLCollection 是动态集合，NodeList 是静态集合。

2、createElement()：根据标签名创建新元素

3、id：读写属性，可以读取或设置元素的id值

4、className：读写属性，可以读取或设置元素的class值

5、classList：读取标签的类名集合（类数组结构）

add()：为元素新增类名，如果类名已存在不会重复添加

remove()：删除元素指定类名，如果类名不存在不会执行操作

元素的属性分为两类：

一类是元素本里就拥有的属性，例如：id、class、style、src、herf、target、alt、title、type、value等等，这些属性可以在js中直接通过.语法读取或设置。

再一类是我们为了解决问题给元素添加的自定义属性，这些属性在js中无法直接通过.语法读取，需要通过操作方法访问。

6、setAttribute(name,value)

参数：name表示要设置的属性名，value要为属性设置的值

无返回值

7、getAttribute(name)

参数：name表示要读取的属性名

返回值：返回属性的值，如果属性不存在会返回null

8、removeAttribute(name)

参数：name表示要删除的属性名

无返回值

说明：setAttribute()、getAttribute()、removeAttribute()都可以操作元素的本地属性和自定义属性。

element拓展：

兼容：以下属性、方法在IE9以下不支持。

1、children：读取元素的所有元素子节点集合（类数组）

2、parentElement：读取元素的父元素节点

3、previousElementSibling：读取前一个元素兄弟节点

4、nextElementSibling：读取后一个元素兄弟节点

5、firstElementChild：读取第一个元素子节点

6、lastElementChild：读取最后一个元素子节点

7、remove(): 将调用方法的元素从DOM结构中删除

---