(web前端)DOM优化的暂时11中方法

原创 帝都灬春哥 随笔 DOM 168阅读 15 天前 举报

1、减少DOM与js语法的多次交互。

如: 插入5000 个a 进入到 div1 中。
如一边循环,一边+= innerHTML 的话,就算是多次产生过桥费,数据交互过多。
那么如果先定义一个 变量,等5000 次 循环完之后 在插入到 div1 结构里面的话,那么等于就过桥了一次,这样会大大的减少交互的时间,减轻服务器的承受。

这是多次操作DOM的。

同样的,下面的例子是先创建了一个变量,测试完性能上大大提升,有兴趣的可以根据代码去测试下。

2、 根据用户情况选择是否用DOM方法,还是 innerHTML。

经过测试,谷歌内核的偏向于DOM方法的用时少,
ie 、火狐等内核的浏览器,会对innerHTML 操作DOM结构的用时会少。

所以要根据公司分析,来决定用那种方法来操作DOM结构。

3、克隆节点,因为创建一个节点,进行复制,会比多次创建节点好。

4、局部变量的方法,

如:循环时候的 length,提前声明一个局部变量,会提升一些性能,提升的不会太高,但是积少成多,也会影响到一些性能。

}

// 如2:
let doc = document;
let oDiv = doc.getElementsByTagName('div')

let ul1 = document.querySelector('#ul1');

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复