当前位置:首页 > 日记 > 正文

js 数据存储和DOM编程

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 -> childrenchildElementCount -> childNodes.lengthfirstElementChild -> firstChildlastElementChild -> last ChildgetElementByTagName ->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)把元素带回文档中

具体方法有

     ·隐藏元素、应用修改、重新显示

     ·使用文档片段,在别的地方构建一个子树,再把它拷贝回文档

     ·将原始元素拷贝到一个脱离文档的节点,修改后再替换原始元素

⑤动画中使用绝对定位,使用拖放代理。

⑥使用事件委托来减少事件处理器的数量。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

相关文章

JS检测数组类型的方法小结

JS检测数组类型的方法小结

检测,方法,数组类型,电脑软件,JS,1.instanceof  当只有一个全局执行环境时适用,如果包含多个框架,就存在两个以上不同版本的Array构造函数,如果从一个框架向另一个框架传递数组,传入的数组与在第二个框架中原生创建的数组分别具有不同的构造…

PS半调图案滤镜怎么处理?

PS半调图案滤镜怎么处理?

滤镜,怎么处理,图案,电脑软件,PS,PS的半调图案滤镜可以给图片换个风格,该怎么使用半调图案滤镜呢?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、打开一个PS的软件,然后打…

angularJS利用ng-repeat遍历二维数

angularJS利用ng-repeat遍历二维数

二维数组,实例代码,遍历,电脑软件,angularJS,最近在做报表的项目,有一种情况是后台返回给我的是一个二维数组,在前台将数据放入到表格中,因为我们用的是AngularJS的前台框架,所以利用ng-repeat来实现:首先在js中:复制代码 代码如下:$scope.Week =…

PPT2013发光边缘文字特效如何制作

PPT2013发光边缘文字特效如何制作

边缘,文字特效,电脑软件,  PPT中文字处理的一些技巧,例如制作发光文字特效,比起干瘪瘪的文字未经处理来说,可谓增色不少。以下是小编为您带来的关于PPT2013发光边缘文字特效,希望对您有所帮助。PPT2013发光边缘文字特效1 启动PowerPoint2013,…

jQuery修改DOM结构_动力节点Java学

jQuery修改DOM结构_动力节点Java学

修改,节点,结构,学院,动力,直接使用浏览器提供的API对DOM结构进行修改,不但代码复杂,而且要针对浏览器写不同的代码。有了jQuery,我们就专注于操作jQuery对象本身,底层的DOM操作由jQuery完成就可以了,这样一来,修改DOM也大大简化了。添加DOM要添…

excel 日期函数的使用方法excel的

excel 日期函数的使用方法excel的

日期函数,使用方法,电脑软件,excel,strong,  Excel中的日期函数具体该如何使用呢?下面是由小编分享的excel 日期函数的使用方法,以供大家阅读和学习。excel 日期函数的使用方法日期函数使用步骤1:例如显示今天的日期。输入公式=today()。ex…

在Excel2010中怎么用颜色筛选显示

在Excel2010中怎么用颜色筛选显示

显示,筛选,颜色,中用,电脑软件,  在Excel的操作使用中,若想高亮度显示某一数据区域的重复值,可以使用Excel2010中的条件格式得以实现。以下是小编为您带来的关于在Excel2010中用颜色筛选显示重复值,希望对您有所帮助。在Excel2010中用颜色筛…

jquery ztree实现右键收藏功能

jquery ztree实现右键收藏功能

右键,功能,收藏,电脑软件,jquery,公司用到ztree。近期把工作中需要的做个总结html部分:js和cssjs:总结以上所述是小编给大家介绍的ztree实现右键收藏功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感…

PS将自己的照片制作成素描效果

PS将自己的照片制作成素描效果

照片,自己的,素描,效果,电脑软件,怎样把自己的照片做成素描呢?今天和大家分享一下我的制作方法,大家一起来学习吧!对比图原图效果图1、打开需要处理的图片后,Ctrl+j复制图片,执行图像&mdash;>调整&mdash;>去色。 2、对图层1副本Ctrl+i反相操作。…

vue语法之拼接字符串的示例代码

vue语法之拼接字符串的示例代码

语法,示例代码,拼接字符串,电脑软件,vue,本文介绍了vue语法之拼接字符串的示例代码,分享给大家,具体如下。先来一行代码:<div class="swiper-slide" v-for="item in message">  <img v-bind:src="['xxx(需要拼接的字符串)'+item.picu…

Bootstrap轮播效果详解

Bootstrap轮播效果详解

详解,效果,电脑软件,Bootstrap,导言Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。示例下面演示图片的轮播,使用bootst…

AI绘制一个逼真复古露营灯教程

AI绘制一个逼真复古露营灯教程

教程,绘制,逼真,电脑软件,AI,12 3 4 5 6 7 阅读全文1 23 4 5 6 7 阅读全文1 2 34 5 6 7 阅读全文1 2 3 45 6 7 阅读全文1 2 3 4 56 7 阅读全文1 2 3 4 5 67 阅读全文1 2 3 4 5 6 7阅读全文…