js中数据存储和DOM编程的示例分析-创新互联

这篇文章给大家分享的是有关js中数据存储和DOM编程的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

我们提供的服务有：成都做网站、成都网站设计、微信公众号开发、网站优化、网站认证、获嘉ssl等。为上1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的获嘉网站制作公司

数据存储

·在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）把元素带回文档中

具体方法有

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

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

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

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

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

感谢各位的阅读！关于“js中数据存储和DOM编程的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站名称：js中数据存储和DOM编程的示例分析-创新互联
标题链接：https://www.cdcxhl.com/article12/dicigc.html

成都网站建设公司_创新互联，为您提供云服务器、全网营销推广、动态网站、App设计、App开发、网站设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联