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);