如何提高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
投稿猜你喜欢
- 这样写 <select id="search"> <option>baidu</optio
- 现在能用自动化实现的，尽量使用自动化程序去操作，代替人工去操作，更有效率。今天说下用python结合adb命令去实现安卓手机端的通话压力测试
- 1.html代码片段<div class="layui-input-inline"> &nbs
- 一、从 4.0 到 4.1 的主要变化 如果在4.1.0到4.1.3版本的MySQL中创建了包含 TIMESTAMP 字段的 InnoDB表
- 前言本文提供Python上传minio以及阿里oss文件工具，给自己留个记录。环境依赖安装minio以及oss2依赖pip install
通过查看书籍，自己总结了一下，怎样用python代码实现调用笔记本摄像头的功能。这主要是通过opencv中cv2模块来实现这个功能。其中是调- #!/usr/bin/env python# coding: utf-8### show time in console#import sy
- 本文实例为大家分享了python对实例属性进行类型检查的具体代码，供大家参考，具体内容如下案例：在某项目中，我们实现了一些类，并希望能像静态
- 本文为大家分享了WebStorm安装教程，供大家参考一、简介WebStorm 是jetbrains公司旗下一款JavaScript 开发工具
- 前言团队使用的 webpack 功能很强大，有时候会碰到编译失败的情况，总得找工具的作者解决问题，自己很少去追究原因，感觉对于 webpac
- 今日使用 npm init webpack love 创建一个新项目，然后执行 npm run dev 之后项目报错，提示错误如下：没有给这
- 在电子产品的设计中，大家经常提到简洁是设计的重要元素。可是很多产品，不见得简洁就是第一要素。简洁的设计，必须是在对用户需求透彻理解，引导用户
- 1、二维数组取值注：不管是二维数组，还是一维数组，数组里的数据类型要一模一样，即若是数值型，全为数值型#二维数组import numpy a
- 前言因为前面的文章中已经涉及到了登录智慧校园的验证码处理问题，所以本文将略过此过程。如登录时遇到验证码的情况，请参考此文。其实第一次使用有验
- keras根据层名称来初始化网络def get_model(input_shape1=[75, 75, 3], input_shape2=[
- 1.跨域原理1. 首先浏览器安全策略限制js ajax跨域访问服务器2. 如果服务器返回的头部信息中有当前域:// 允许 http://lo
- insert的语法INSERT [LOW_PRIORITY | DELAYED | HIGH_PRIORITY] [IGNORE]
- 说明Python语言中列表(List)与其他语言的数组(Array)类似，是一种有序的集合数据结构，Python List可支持各种数据类型
- 根据 Dotzler 的统计，IE6 的份额正在缩水，这可能是 2009 年本人听到的第一个好消息。于此同时，Gmail 的浏览器支持列表中
- 准备1、下载所需安装包wget https://www.php.net/distributions/php-7.4.0.tar.gzwget
