性能优化之数据存储DOM编程

news/2024/7/7 15:59:55

多读书多看报

数据存储

·在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)把元素带回文档中
具体方法有
     ·隐藏元素、应用修改、重新显示
     ·使用文档片段,在别的地方构建一个子树,再把它拷贝回文档
     ·将原始元素拷贝到一个脱离文档的节点,修改后再替换原始元素
 
⑤动画中使用绝对定位,使用拖放代理。
 
⑥使用事件委托来减少事件处理器的数量。
 
 

转载于:https://www.cnblogs.com/LuckyWinty/p/6378606.html


http://www.niftyadmin.cn/n/2623552.html

相关文章

ASP.NET MVC案例教程(基于ASP.NET MVC beta)——第三篇:ASP.NET MVC全局观

摘要 本文对ASP.NET MVC的全局运行机理进行一个简要的介绍&#xff0c;以使得朋友们更好的理解后续文章。前言 在上一篇文章中&#xff0c;我们实现了第一个ASP.NET MVC页面。对于没有接触过这个框架的朋友来说&#xff0c;可能对有些地方会迷惑&#xff0c;所以这篇…

mysql 5.5 centos_Centos7 下安装 Mysql 5.5

本文仅适用于个人开发学习的环境搭建参考&#xff0c;搭建步骤基于网络教程&#xff0c;因此可能有很多不严谨的地方&#xff0c;目的是做为笔记参考学习使用。如果你觉得这篇文字像流水账一样无聊又没有看下去的欲望&#xff0c;可以跳过&#xff0c;翻阅我的其他博客文章。卸…

数据库文件怎么查看服务器,服务器如何查看文件个数据库文件

服务器如何查看文件个数据库文件 内容精选换一换通常在将数据导入数据库前&#xff0c;即将入库的数据已经在相关主机上了。我们称这种保存着待入库数据的服务器为数据服务器。此时&#xff0c;只需检测以确认数据服务器和GaussDB(for openGauss)集群能够正常通信&#xff0c;并…

如何使用Xcode的Targets来管理开发和生产版本的构建

备注&#xff1a;话说博主从微信上打开转载&#xff0c;居然说微信上图片权限&#xff0c;不让随意查看&#xff0c;没办法博主只好使用原始的办法&#xff0c;一张一张截图再往上贴了。 编者提示&#xff1a;这篇文章由Eugene Trapeznikov贡献。想象一下&#xff0c;你已经完…

mysql set substring_Mysql更新(substring函数和concat函数的使用) | 学步园

在工作中碰到一个Mysql字段更新问题在custom表中有一个tariffurl的值中有如下情况&#xff1a;uploadfiles ariff2007031172720306698.jpg以及uploadfiles ariff2007031172720306690.jpg;uploadfiles ariff2007031172720306691.jpg形式要更改成uploadfiles/tariff/200703/11727…

javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行...

jsp页面表格布局Html代码 <body οnlοad"show()"> <center> <input type"text" value"111" id"mytext"> <table border"1" width"60%" id"mytable"> <tr> <td …

32位系统mysql修改密码_ASPCMS免改数据库 快速修改后台登陆密码

很多时候我们在面对自己网站的时候&#xff0c;时间久了都会出现忘记密码无法登陆的情况&#xff1b;这个时候通过我们都采用直接以下三种办法一解决&#xff1b;忘记管理密码修复方案一如果是ASP语言下的ACCESS数据库&#xff0c;则可以直接通过下载ACCESS软件&#xff0c;直接…

python中模块导入问题(已解决)

想在python中导入request包&#xff1a; 无此模块&#xff0c;于是先安装requests包&#xff1a; 但是提示"Requirement already satisfied"。在提示的相应目录里&#xff0c;找到确实有request包。但是python就是无法导入。 在通哥的帮助下&#xff0c;发现python和…