javascript优化-DOM

1、减少js和dom的操作
ex:比如说要多次循环操作动态往元素内插入一些内容。建议能够用一个字符串把要插入的内容都保存下来。在循环结束后,再一次性添加;

2、通过clone节点的方式。先创建一个。其余的都用clone.
ex:比如说要创建500个li节点,我们可以先创建一个。再克隆其余的。

3、访问元素尽量的用局部变量。

4、尽量只用元素节点 (ps:像标签间的文字就属于文本节点)

5、选择器api,利用querySelector和querySelectorAll

Dom与浏览器

1、重排:改变了元素的宽、高、位置(改变了页面内容)
2、重绘:改变颜色等
3、在appendchild前添加操作。
4、使用cssText(能合并dom操作。不要单独的去设置width,height,而是都写在cssText中)。
5、缓存布局的信息。
6、创建文档碎片。

//先创建文档碎片

var oFragmeng = document.createDocumentFragment(); 


for(var i=0;i<10000;i++)

{ 

    var op = document.createElement("span"); 

    var oText = document.createTextNode(i); 

    op.appendChild(oText); 

    //先附加在文档碎片中

    oFragmeng.appendChild(op);  

} 


//最后一次性添加到document中

document.body.appendChild(oFragmeng); 

你可能感兴趣的:(javascript优化-DOM)