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); 
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容