如何提高Dom访问速度

在浏览器中对于Dom的操作和普通的脚本的操作处于两个不同的dll中，两个dll的交互是比较耗时的，优化对Dom的操作可以提高脚本的执行速度。下面是对如何优化的一些总结：

将需要多次操作的节点存储在一个变量中，避免多次获取。

对于大多数浏览器来说innerHTML操作比Dom操作速度要快，最新的浏览器则相反，但对于大多数日常操作来说具体差异并不大，另外，如果需要新创建的html片段中的脚本能够执行则需要使用Dom操作。

不建议用数组的 length 属性做循环判断条件。访问集合的 length 比数组的length 还要慢。当每次迭代过程访问集合的 length 属性时，它导致集合器更新。可以简单的将length保存在一个变量中，也可以将集合先存储在数组中。

遍历 children 比 childNodes 更快，因为集合项更少。

重绘和重排版是负担很重的操作，可能导致网页应用的用户界面失去相应。所以，十分有必要尽可能减少这类事情的发生。减少方法有三种，一：将需要影响的集合先隐藏，在处理完成后再展示；二：创建需操作节点的备份，对备份处理完成后替换原节点；三：创建节点群，对节点群操作完成后替换到原节点，最高效，操作方式如：

 var fragment = document.createDocumentFragment();//创建节点群，文档片段
 appendDataToElement(fragment, data);//增加节点到节点群
 document.getElementById('mylist').appendChild(fragment);//仅引发一次重新排版

另外对行内样式的操作可以通过document.getElementById("doc").style.cssText修改元素style属性

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

赞 (0)

相关推荐

  • phpStudy访问速度慢和启动失败的解决办法

    phpStudy访问速度慢和启动失败的解决办法

    下面给大家介绍phpstudy访问速度慢的解决办法. 1.修改mysql数据库链接地址为ip地址127.0.0.1. 2.使用最新版本,这个坑了我好久时间. 下面一段内容是关于phpstudy启动失败的解决办法. php5.3.5.4和apache都是用vc9编译,电脑必须安装vc9运行库才能运行. php5.5.5.6是vc11编译,如用php5.5.5.6必须安装vc11运行库. vc9和vc11运行库下载:http://pan.baidu.com/s/1gd0y1Qb php5.5以上才有

  • 如何提高数据访问速度

    hasOwnProperty()仅检索实例不检索原型,in即检索实例,又检索原型 成员嵌套越深,访问速度越慢,只在必要的情况下使用对象成员. 如果在同一个函数中你要多次读取同一个对象属性,最好将它存入一个局部变量.以局部变量替代属性,避免多余的属性查找带来性能开销. 直接量和局部变量访问速度非常快,数组项和对象成员需要更长时间. 局部变量比域外变量快,因为它位于作用域链的第一个对象中.变量在作用域链中的位置越深,访问所需的时间就越长.全局变量总是最慢的,因为它们总是位于作用域链的最后一环. 避免

  • 几种延迟加载JS代码的方法加快网页的访问速度

    本文介绍了如何延迟javascript代码的加载,加快网页的访问速度. 当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点: 1.延迟加载js代码 复制代码 代码如下: <script type="text/javascript" src="" id="my"></script> <script type="text/

  • asp页面提高的访问速度的方法详解

    技巧之一:提高使用Request集合的效率 访问一个ASP集合来提取一个值是费时的.占用计算资源的过程.因为这个操作包含了一系列对相关集合的搜索,这比访问一个局部变量要慢得多.因此,如果打算在页面中多次使用Request集合中的一个值,应该考虑将其存贮为一个局部变量.例如将代码写成下面的形式以加快脚本引擎处理速度: 复制代码 代码如下: strTitle=Request.Form("Title")strFirstName=Request.Form("FirstName&quo

  • js 利用image对象实现图片的预加载提高访问速度

    大量采用高解析度的图像的确可以让一个Web站点容光焕发.但同样也会造成站点访问速度下降--图片是文件,文件就要占用带宽,而带宽直接同访问等待时间相关.现在,让我们来学习一种名为图像预装载(image preloading)的小技巧来提高图像访问速度. 一些浏览器试图通过在本地缓存中保存这些图片来解决此问题.这样一来可以顺序调用这些图片--但对于首次使用这些图片的时候仍然会存在延时.预装载就是一种在需要图片之前就将图片下载到缓存的技术.采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回

  • Nginx服务器限制访问速度的配置方法

    用Nginx建站的同学,常会有限速需求.开发测试阶段在本地限速模拟公网的环境,方便调试.投入运营会有限制附件下限速度,限制每个用户的访问速度,限制每个IP的链接速度等需求. 刚遇到一个Bug在网络很卡的情况下才能重现,本地调试访问本机速度太快,配置Nginx成功达到限速目的,在此分享出来. 配置简单,只需3行,打开"nginx根目录/conf/nginx.conf"配置文件修改如下: http{ -- limit_zone one $binary_remote_addr 10m; --

  • 如何提高Dom访问速度

    在浏览器中对于Dom的操作和普通的脚本的操作处于两个不同的dll中,两个dll的交互是比较耗时的,优化对Dom的操作可以提高脚本的执行速度.下面是对如何优化的一些总结: 将需要多次操作的节点存储在一个变量中,避免多次获取. 对于大多数浏览器来说innerHTML操作比Dom操作速度要快,最新的浏览器则相反,但对于大多数日常操作来说具体差异并不大,另外,如果需要新创建的html片段中的脚本能够执行则需要使用Dom操作. 不建议用数组的 length 属性做循环判断条件.访问集合的 length 比

  • Nginx静态压缩和代码压缩提高访问速度详解

    Nginx静态压缩和代码压缩提高访问速度详解

    目录 前言 nginx静态资源动态压缩 nginx静态资源静态压缩 总结 前言 基于目前大部分的应用,都使用了前后端分离的框架,vue的前端应用,也是十分的流行. 不知道大家伙,有无遇到这样的问题: 随着前端框架的页面,功能开发不断的迭代:安装的依赖,不断的增多: 这样导致的问题,就是我们的前端框架,会变得十分庞大,打包出来的dist目录会变得很大了喔!!! 这样就会导致一个问题:首次访问应用,会变得很慢!!! 这确实是一个严重的问题!!!T_T 对于这个问题,咋们今天就从代码压缩+nginx静

  • MySQL Buffer Pool如何提高页的访问速度

    目录 如何提高SQL执行速度? Buffer Pool的数据结构是怎样的? 改进后的链表是如何工作的? Buffer Pool的相关参数 参考博客 如何提高SQL执行速度? 当我们想更新某条数据的时候,难道是从磁盘中加载出来这条数据,更新后再持久化到磁盘中吗? 如果这样搞的话,那一条sql的执行过程可太慢了,因为对一个大磁盘文件的读写操作是要耗费几百万毫秒的 真实的执行过程是,当我们想更新或者读取某条数据的时候,会把对应的页加载到Buffer Pool缓冲池中(Buffer Pool本质上就是一

  • JavaScript Tips 使用DocumentFragment加快DOM渲染速度

    大家在使用JavaScript的时候,DOM操作是最平常不过的了, 随着Web前端技术的发展,我们越来越多的使用JS来操作DOM元素,比如通过ajax请求获取到数据,然后更新页面上的元素,一般情况下,这种操作我们会用类似node.appendChild()这中方式来完成.这个方法是无缓冲的,也就是说我们每次调用appendChild方法的时候,浏览器都会重新渲染页面.当然,使用这种方法也没有什么不行,因为我们在一般情况下都是对少量的DOM节点进行更新,也并不会带来太大的性能问题,但是如果大量的更

  • 必备 SQL 查询优化技巧提升网站访问速度

    在这篇文章中,我将介绍如何识别导致性能出现问题的查询,如何找出它们的问题所在,以及快速修复这些问题和其他加快查询速度的方法. 你一定知道,一个快速访问的网站能让用户喜欢,可以帮助网站从Google 上提高排名,可以帮助网站增加转化率.如果你看过网站性能优化方面的文章,例如设置服务器的最佳实现.到干掉慢速代码以及 使用CDN 加载图片,就认为你的 WordPress 网站已经足够快了.但是事实果真如此吗? 使用动态数据库驱动的网站,例如WordPress,你的网站可能依然有一个问题亟待解决:数据库

  • Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)

    Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)

    Nginx开启Gzip压缩功能, 可以使网站的css.js .xml.html 文件在传输时进行压缩,提高访问速度, 进而优化Nginx性能!  Web网站上的图片,视频等其它多媒体文件以及大文件,因为压缩效果不好,所以对于图片没有必要支压缩,如果想要优化,可以图片的生命周期设置长一点,让客户端来缓存. 开启Gzip功能后,Nginx服务器会根据配置的策略对发送的内容, 如css.js.xml.html等静态资源进行压缩, 使得这些内容大小减少,在用户接收到返回内容之前对其进行处理,以压缩后的数

随机推荐