如何提高Dom访问速度

作者:大朋展翅 时间:2024-07-28 06:19:09 

在浏览器中对于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属性

来源:http://www.cnblogs.com/xietong/p/6231659.html

标签:访问速度
0
投稿

猜你喜欢

  • 时间序列分析之ARIMA模型预测餐厅销量

    2023-07-09 13:53:59
  • Javascript中的isNaN函数使用说明

    2023-08-27 10:10:02
  • 在golang中使用Sync.WaitGroup解决等待的问题

    2024-04-26 17:30:17
  • python相似模块用例

    2023-02-05 12:04:09
  • python如何编写win程序

    2022-12-09 11:48:38
  • Django项目中动态设置静态文件路径的全过程

    2021-07-12 00:52:24
  • sqlserver 2000中创建用户的图文方法

    2024-01-18 20:02:39
  • Python实例练习水仙花数问题讲解

    2023-05-26 18:38:11
  • JavaScript库jQuery入门简介

    2007-10-17 11:43:00
  • Mysql分组查询每组最新一条数据的三种实现方法

    2024-01-13 16:32:04
  • sql注入数据库原理详情介绍

    2024-01-15 17:05:12
  • python爬取微信公众号文章

    2021-12-30 18:46:35
  • go语言 xorm框架 postgresql 的用法及详细注解

    2024-04-25 15:26:45
  • python实现的二叉树算法和kmp算法实例

    2023-08-07 20:50:49
  • python调用kubernetesAPI简单使用方法

    2021-05-09 23:25:21
  • select 终极美化

    2007-10-16 17:57:00
  • numpy中实现ndarray数组返回符合特定条件的索引方法

    2023-04-21 06:21:53
  • Python实现滑块验证码详解

    2022-03-15 09:04:53
  • Java通过MySQL的加解密函数实现敏感字段存储

    2024-01-27 12:08:25
  • 在ASP中使用SQL语句之12:连接

    2009-04-23 18:27:00
  • asp之家 网络编程 m.aspxhome.com