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 相关文章推荐
图片之间的切换
Jun 26 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
jquery tab标签页的制作
May 10 Javascript
js更优雅的兼容
Aug 12 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
php防止sql注入的方法详解
2017/02/20 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
Python 解析XML文件
2009/04/15 Python
Python栈类实例分析
2015/06/15 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
实例讲解python中的协程
2018/10/08 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
八荣八耻的活动方案
2014/08/16 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
2014年终个人总结报告
2015/03/09 职场文书
污染环境建议书
2015/09/14 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS