js 数据存储和DOM编程
作者:小蚊 发布时间:2024-02-24 07:52:31
数据存储
·在javascript中,数据存储的位置会对代码整体性能产生重大的影响。
·数据存储共有4种方式:字面量、变量、数组、对象成员。
·要理解变量的访问速度,就要理解作用域。由于局部变量处于作用域的起始位置,因此访问速度比访问跨域作用域变量(即除起始位置之外的外层作用域变量)更快。即变量处在作用域的位置越深,访问速度越慢。这也就说明,访问全局变量的速度是最慢的。 总的来说,字面量和局部变量的访问速度快于数组和对象成员的访问速度。
因此,常见的一些提高数据访问速度的方法有:
①避免使用with、try-catch中的catch语句,因为它会改变执行环境的作用域链。
②尽量少用嵌套对象、避免对象嵌套过深。
③可以把常需要访问的对象成员、数组项、跨域变量保存在局部变量中。
DOM编程
我们知道用javascript操作DOM会影响性能,这是为什呢。这个问题是“天生”的。
因为DOM是一个独立于语言的,用于操作XML和HTML文档的程序接口,而客户端脚本编程大多数时候是和底层文档打交道。所以推荐的做法就是尽可能少操作DOM。
有这么一些小技巧:
①如果需要多次访问某个DOM节点,使用局部变量存储它的引用。
②小心处理HTML集合,因为它实时联系着底层文档。
例如:
var divs= document.getElementsByTagName('div');
for(var i = 0;i < divs.length; i++){
document.body.appendChild(document.creatElement('div'))
}
这是一个死循环,原因就是divs.length每次迭代都会增加,它反映的是底层文档的当前状态。
因此,我们在需要遍历某个HTML集合的时候,可以先把长度缓存起来再使用。而如果是要经常操作的集合,可以把整个集合拷贝到一个数组中。
③使用一些速度更快的API
例如:
childNodes -> children
childElementCount -> childNodes.length
firstElementChild -> firstChild
lastElementChild -> last Child
getElementByTagName ->querySelectorAll
④注意重绘和重排
1.由于每次重排都会产生计算消耗,大多数浏览器通过队列化修改并批量执行来优化重排过程。
而获取布局信息的操作会导致队列刷新,如下方法:
offsetTop,offsetLeft,offsetWidth,offsetHeight、
scrollTop,scrollLeft,scrollWidth,scrollHeight、
clientTop,clientLeft,clientWidth,clientHeight、
getComputedStyle
因为这些属性或方法需要返回最新的布局信息,因此浏览器不得不执行渲染列队中的“待处理变化”并触发重排以返回正确的值。
2.最小化重绘和重排,合并多次对DOM和样式的修改,如
var el = document.getElementById('mydiv');
el.style.margin = '5px';
el.style.padding = '2px';
el.style.borderLeft= '5px';
以上,修改了三个样式,每个都会影响元素的几何结构,最糟糕的情况下会导致三次重排(大部分现代浏览器为此做了优化,只会触发一次)
可以被优化为:
var el = document.getElementById('mydiv');
el.style.cssText = 'margin = '5px';padding = '2px';borderLeft= '5px';
3.需要对DOM元素进行一系列操作时,可以通过以下步骤:
1)使元素脱离文档流
2)对其应用多重改变
3)把元素带回文档中
具体方法有
·隐藏元素、应用修改、重新显示
·使用文档片段,在别的地方构建一个子树,再把它拷贝回文档
·将原始元素拷贝到一个脱离文档的节点,修改后再替换原始元素
⑤动画中使用绝对定位,使用拖放代理。
⑥使用事件委托来减少事件处理器的数量。
来源:http://www.cnblogs.com/LuckyWinty/p/6378606.html
猜你喜欢
- 前言如果你和我一样偶尔看看股票,看看自己关注的股票是涨了还是跌了,或者想快速获取到想看的头条新闻,我们不必把过多的注意力放在去寻找上面,我们
- 只要你的Web开发知识不是语文老师教的,那么你应该已经知道一个合格的开发者应该永远抱着怀疑的眼光看用户提交的数据。你不仅需要在前端通过表单或
- 前言编写条件分支代码是编码过程中不可或缺的一部分。如果用道路来做比喻,现实世界中的代码从来都不是一条笔直的高速公路,而更像是由无数个岔路口组
- 提示:以下操作均在root权限下进行。# 查看有没有安装MySQL:dpkg -l | grep mysql# 安装MySQL:apt in
- 引子Matlab中有一个函数叫做find,可以很方便地寻找数组内特定元素的下标,即:Find indices and values of n
- 这篇文章主要介绍了如何基于Python获取图片的物理尺寸,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的
- Python 运算符通常用于对值和变量执行操作。这些是用于逻辑和算术运算的标准符号。在本文中,我们将研究不同类型的 Python 运算符。&
- 环境:go 1.19.8在读多写少的情况下,即使一段时间内没有写操作,大量并发的读访问也不得不在Mutex的保护下变成串行访问,这种情况下,
- 1 logging模块简介logging模块是Python内置的标准模块,主要用于输出运行日志,可以设置输出日志的等级、日志保存路径、日志文
- 这篇文章主要介绍了通过实例简单了解Python中yield的作用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
- 对所有数据进行整合与管理当你使用SQL Server 2008企业级的数据仓库平台时,你可以高效的操纵所有数据,并对其进行统一管理存储。◆合
- Oracle公司6月9日宣布同意收购TimesTen公司,TimesTen是一家私营软件企业,其产品能提高用于股市和机票预订等需要快速响应时
- 一、base64模块base64模块提供了在二进制数据和可打印ASCII字符间编解码的功能,包括 RFC3548中定义的Base16, Ba
- 本文实例讲述了golang使用sort接口实现排序的方法。分享给大家供大家参考,具体如下:今天看见群里再讨论排序的sort.Interfac
- 本文实例讲述了Python面向对象编程基础。分享给大家供大家参考,具体如下:1、类的定义Python中类的定义与对象的初始化如下,pytho
- 前言最近在工作中碰到一个小的排序问题,需要按嵌套对象的多个属性来排序,于是发现了Python里的operator模块和sorted函数组合可
- 使用MS数据库的朋友就会知道一个问题,C盘的空间很容易被占满了。因为本来系统盘就分区比较小,这是由于数据库在使用过程中会使日志文件不断增加,
- 本文阐述了网页设计中的十大诀窍,作为网页开发者我们应该注意,这样才能最大限度得发挥网站的功能和效益: 预早筹划设计主页未必很艰难。
- if(document.mylist.length != "undefined" ) {} 这个用法有误. 正确的是 i
- 比如下面一个listbinfo = ['lao','wang','python']我们通过h