js 数据存储和DOM编程
数据存储
·在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）把元素带回文档中
具体方法有
·隐藏元素、应用修改、重新显示
·使用文档片段，在别的地方构建一个子树，再把它拷贝回文档
·将原始元素拷贝到一个脱离文档的节点，修改后再替换原始元素
⑤动画中使用绝对定位，使用拖放代理。
⑥使用事件委托来减少事件处理器的数量。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
实现JavaScript高性能的数据存储
1.JavaScript中四种基本数据存取位置:字面量,本地变量,数组元素,对象成员. 一般来说:[字面量,局部变量]运行速度>[数组,对象成员] 2.内部属性包含了一个函数被创建的作用域中对象的集合.这个集合被称为作用域链. 3.执行函数->创建执行环境->创建活动对象(即函数运行时变量对象). 所以多次调用同一个函数会导致创建多个执行环境. 4.函数执行过程 每遇到一个变量都会经历一次标识符解析过程,从哪里获取或存储数据.该过程搜索执行环境的作用域链.正是这种搜索过程影响了性能. 5
-
javascript 数据存储的常用函数总结
数据存储的常用函数 存入数组不重复值 function pushtoArray(myarr,mydata){ if(myarr.length==0){ myarr.push(mydata); }else{ var oktopush=true; for(var ele in myarr){ if(myarr[ele]==mydata){ oktopush=false; } } if(oktopush){ myarr.push(mydata); } } return myarr; } 删除数组中的元
-
Ajax与用户交互的JSON数据存储格式
数据存储是JavaScript的核心功能,这是一个在学习前期的一个容易让人迷惑的问题.它并不是那种像页面滑动.幻灯片展示.淡入淡出等吸引人眼球的特效.适当的存放好数据,就有利于我们组织起结构,又能使应用程序稍后访问这些内容更加容易.JavaScript提供了各种不同的数据存储方式,它是一个从基本到未来走向的演化模式: XML代表可扩展标记语言,是一种比较灵活的数据格式,很多应用程序存储数据都喜欢用到它,结构像HTML,也包含元素,标签以及属性,模型都一样.它的一大优势在于它是一种可扩展的格式,你
-
JavaScript数据存储 Cookie篇
1.什么是cookie? 答:cookie是用于在客户端存储会话信息的. 2.cookie的组成部分? ①名称:一个唯一确定cookie 的名称.建议区分大小写.cookie 的名称必须是经过URL 编码的. ②值:储存在cookie 中的字符串值.值必须被URL 编码. ③域:cookie 对于哪个域是有效的.所有向该域发送的请求中都会包含这个cookie 信息.这个值可以包含子域(subdomain,如www.wrox.com),也可以不包含它(如.wrox.
-
总结JavaScript三种数据存储方式之间的区别
sessionStorage .localStorage 和 cookie 之间的共同点: 都是保存在浏览器端,且同源的. sessionStorage .localStorage 和 cookie 之间的区别: cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存.cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下. 存
-
js 数据存储和DOM编程
数据存储 ·在javascript中,数据存储的位置会对代码整体性能产生重大的影响. ·数据存储共有4种方式:字面量.变量.数组.对象成员. ·要理解变量的访问速度,就要理解作用域.由于局部变量处于作用域的起始位置,因此访问速度比访问跨域作用域变量(即除起始位置之外的外层作用域变量)更快.即变量处在作用域的位置越深,访问速度越慢.这也就说明,访问全局变量的速度是最慢的. 总的来说,字面量和局部变量的访问速度快于数组和对象成员的访问速度. 因此,常见的一些提高数据访问速度的方法有: ①避免使用wi
-
Android编程中的5种数据存储方式
本文介绍Android平台进行数据存储的五大方式,分别如下: 1 使用SharedPreferences存储数据 2 文件存储数据 3 SQLite数据库存储数据 4 使用ContentProvider存储数据 5 网络存储数据 下面详细讲解这五种方式的特点 第一种: 使用SharedPreferences存储数据 适用范围:保存少量的数据,且这些数据的格式非常简单:字符串型.基本类型的值.比如应用程序的各种配置信息(如是否打开音效.是否使用震动效果.小游戏的玩家积分等),解锁口 令密
-
基于js 本地存储(详解)
在客户端运行的JS是不能操作用户电脑磁盘中的文件的(保护客户端运行的安全) 1.JS中的本地存储: 使用JS向浏览器的某一个位置中存储一些内容,浏览器即使关闭了,存储的信息也不会销毁,当在重新打开浏览器的时候我们依然可以获取到上一次存储的信息 本地存储的方案: 传统: cookie:把信息存储到客户端的浏览器中(但是项目服务器端也是可以获取COOKIE的) session:把信息存储到服务器上的(服务器存储) HTML5:webStorage localStorage:永久存储在客户端的本地 s
-
JS localStorage存储对象，sessionStorage存储数组对象操作示例
本文实例讲述了JS localStorage存储对象,sessionStorage存储数组对象操作.分享给大家供大家参考,具体如下: 一.前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个商品准备结算,又修改了商品数量,这时候发起了请求,页面数据被渲染,打钩的商品全被恢复未选中. 想着将所有选中商品的独有Id存入数组,利用localStorage存
-
用XML数据岛结合Dom制作通讯录
一般情况下,如果要为网站提供一个通讯录程序,需要使用CGI结合后台数据库技术,这对WEB服务器的要求比较高,在很多不提供数据库功能的虚拟主机上甚至无法实现.当然,我们还可以采用TXT文本替代数据库,但TXT文本是比较难操作的,我们必须一行一行的读取判断,还要用分隔字符串实现字段分离,无法进行复杂运算. 现在,我们可以使用"可扩展的标记语言 (XML)" 来保存通讯录的数据,从而体现出XML的优点:表现数据的结构化方法,对于保存许多关系型数据结构的文件很有帮助. 一.基本原理: 在Mic
-
Angular JS数据的双向绑定详解及实例
Angular JS数据的双向绑定 接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 视图模型的继承关系 模块和依赖注入的设计 待定 数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="Count
-
正确面对服务器数据存储防止数据丢失
每一家企业的管理层人员都非常重视存储在服务器的重要数据,包括:各类管理中所产生的机密办公文件.经营中所积累的客户资料.研发中所涉及的重要文件等等,用户时时关注服务器数据存储设备运行情况.其中作为存储设备中的一员,硬盘起着及其重要的作用.然而在所有的硬件部件中,硬盘又是故障率相对较高的产品,硬盘有价但数据无价,各大硬盘厂商提供的保修条例只针对于硬盘部件本身,而对于存储其中的数据没有提供相关的保障. 那么,如何正确面对服务器数据存储,防止一些意外.灾难造成数据丢失呢? 一.服务器存储系统非常重要,大
-
Android开发笔记之: 数据存储方式详解
无论是神马平台,神马开发环境,神马软件程序,数据都是核心.对于开发平台来讲,如果对数据的存储有良好的支持,那么对应用程序的开发将会有很大的促进作用.总体的来讲,数据存储方式有三种:一个是文件,一个是数据库,另一个则是网络.其中文件和数据库可能用的稍多一些,文件用起来较为方便,程序可以自己定义格式:数据库用起稍烦锁一些,但它有它的优点,比如在海量数据时性能优越,有查询功能,可以加密,可以加锁,可以跨应用,跨平台等等:网络,则用于比较重要的事情,比如科研,勘探,航空等实时采集到的数据需要马上通过网络
-
微信小程序数据存储与取值详解
在小程序开发的过程,经常要需要这个页面输入的数据,在下一个页面中进行取值赋值. 比如: 在A页面input输入框,输入电话号码,点击添加.需要在B页面电话区域中,显示刚刚输入的电话号码. 因为这是两个页面,就需要先存储,再取值.微信小程序提供了数据存储的API,wx.setStorage(OBJECT) 可以将数据存储在本地缓存中指定的 key 中,如果重复会覆盖掉原来该 key 对应的内容. 思路是,在A页面,使用bindinput获取input输入的值,赋值给一个变量(自定义),点击添加按钮
-
React通过redux-persist持久化数据存储的方法示例
在React项目中,我们经常会通过redux以及react-redux来存储和管理全局数据.但是通过redux存储全局数据时,会有这么一个问题,如果用户刷新了网页,那么我们通过redux存储的全局数据就会被全部清空,比如登录信息等. 这个时候,我们就会有全局数据持久化存储的需求.首先我们想到的就是localStorage,localStorage是没有时间限制的数据存储,我们可以通过它来实现数据的持久化存储. 但是在我们已经使用redux来管理和存储全局数据的基础上,再去使用localStora