js 数据存储和DOM编程


Posted in Javascript onFebruary 09, 2017

数据存储

·在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 相关文章推荐
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
javascript三种代码注释方法
Jun 02 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
超全面的javascript中变量命名规则
Feb 09 #Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 #Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 #Javascript
js 原型对象和原型链理解
Feb 09 #Javascript
AngularJs表单校验功能实例代码
Feb 09 #Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 #Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 #Javascript
You might like
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
转PHP手册及PHP编程标准
2006/12/17 PHP
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
使用php实现截取指定长度
2013/08/06 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
判断对象是否Window的实现代码
2012/01/10 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
django 中QuerySet特性功能详解
2019/07/25 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
Python argparse模块使用方法解析
2020/02/20 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
什么叫做SQL注入,如何防止
2016/10/04 面试题
高级销售员求职信
2013/10/25 职场文书
业务员的岗位职责
2014/03/15 职场文书
春季防火方案
2014/05/10 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
大学专科求职信
2014/07/02 职场文书
2014年销售员工作总结
2014/12/01 职场文书