时间:2021-05-18
在浏览器中对于Dom的操作和普通的脚本的操作处于两个不同的dll中,两个dll的交互是比较耗时的,优化对Dom的操作可以提高脚本的执行速度。下面是对如何优化的一些总结:
将需要多次操作的节点存储在一个变量中,避免多次获取。
对于大多数浏览器来说innerHTML操作比Dom操作速度要快,最新的浏览器则相反,但对于大多数日常操作来说具体差异并不大,另外,如果需要新创建的html片段中的脚本能够执行则需要使用Dom操作。
不建议用数组的 length 属性做循环判断条件。访问集合的 length 比数组的length 还要慢。当每次迭代过程访问集合的 length 属性时,它导致集合器更新。可以简单的将length保存在一个变量中,也可以将集合先存储在数组中。
遍历 children 比 childNodes 更快,因为集合项更少。
重绘和重排版是负担很重的操作,可能导致网页应用的用户界面失去相应。所以,十分有必要尽可能减少这类事情的发生。减少方法有三种,一:将需要影响的集合先隐藏,在处理完成后再展示;二:创建需操作节点的备份,对备份处理完成后替换原节点;三:创建节点群,对节点群操作完成后替换到原节点,最高效,操作方式如:
var fragment = document.createDocumentFragment();//创建节点群,文档片段 appendDataToElement(fragment, data);//增加节点到节点群 document.getElementById('mylist').appendChild(fragment);//仅引发一次重新排版另外对行内样式的操作可以通过document.getElementById("doc").style.cssText修改元素style属性
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
VirtualDOM是什么?在之前,React和Ember早就开始用虚拟DOM技术来提高页面更新的速度了。若想了解它是如何工作的,就要先认清这几个概念:1.更新
网站客户体验做的好,不仅会给网站带来流量,还能提高网站的排名,而决定网站用户体验优劣的主要条件就是速度,那么网站页面设计如何在速度方面改善呢? 页面访问速
缓存服务的意义为什么要使用缓存?说到底是为了提高系统的运行速度。将用户频繁访问的内容存放在离用户最近,访问速度最快的地方,提高用户的响应速度。一个web应用的简
查询缓存的使用,主要是为了提高查询访问速度。将用户对同一数据的重复查询过程简化,不再每次均从数据库查询获取结果数据,从而提高访问速度。MyBatis的查询缓存机
延时加载js代码提高速度,具体内容如下所示:如果网页中存在大量的javascript代码会极大的影响网页的访问速度,下面就简单介绍一下如何处理此问题。一.延时加