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实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
JS打印组合功能
Aug 04 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
基于Layui自定义模块的使用方法详解
Sep 14 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
php批量更改数据库表前缀实现方法
2013/10/26 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
Bootstrap按钮组实例详解
2017/07/03 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
Python实现简易端口扫描器代码实例
2017/03/15 Python
python 日志增量抓取实现方法
2018/04/28 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
红色影片观后感
2015/06/18 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
ES6 解构赋值的原理及运用
2021/05/25 Javascript