javascript-js里大量的DOM操作，性能会大量损失吗？

问题描述

js里大量的DOM操作，性能会大量损失吗？: 如题，比如大量的创建DMO节点、字符串拼接等，这些会造成大量的性能损失吗？请详细解释一下，谢谢

解决方案

dom操作肯定是占资源的，大量dom操作最好是创建DocumentFragment，然后修改好DocumentFragment后再一次行插入到dom树中，而不是每次都appendChild，innerHTML+=进行操作

http://www.zhihu.com/question/27260165

解决方案二：

会 dom操作本身就比较损耗性能

解决方案三：

dom操作最好放在一起，好像找完一次，在做其他操作，再找一次相当于页面重新加载渲染

时间： 2024-10-04 16:00:06

javascript-js里大量的DOM操作，性能会大量损失吗？的相关文章

JS写出兼容性Dom操作

一.前言因为一个很小的项目或者说几个页面却要搭上Jquery,当然很不值,gzip下,好歹也有小几十K.为了能够方便的操作Dom,我们需要写很多兼容性的原生JS.就在我看leaflet的源码的时候,我觉得它的DomUtil写的还是不错的. 二.具体的代码分析首先,我们定义一个类,var DomUtil = { functionName: function(){ } }; 以下均已字面量的形式表示. (1)get: 获取一个元素 get: function (id) { return ty

简单实现JS对dom操作封装_javascript技巧

这篇文章主要介绍了JS简单实现对dom操作封装,下面就直接上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

javascript-js里操作DOM节点性能损失最低的方式是什么？

问题描述 js里操作DOM节点性能损失最低的方式是什么? 可能这个标题不太合适,如下有个例子,一种是用原生js里的创建节点.文本节点.插入父节点内的方式,一种是用数据格式化字符串的方式 // 方式1: var a = document.createElement('a'); a.href = 'http://www.baidu.com'; a.target ='_blank'; var text = document.createTextNode('this is baidu homepage'

JavaScript——DOM操作——Window.document对象详解_javascript技巧

一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunment.getElementById("id");将找到的元素放在变量中: docunment.getElementsByName("name"):根据name找,找出来的是数组: docunment.getElementsByTagName("name"):根据标签

为什么说JavaScript中的DOM操作很慢

一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来. 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局 (layout)和绘制(paint).下面主要先介绍下这些浏览器行为,阐述一个页面是怎么最终被呈现出来的,另外还会从代码的角度,来说明一些不好的实践以及一些优化方案. 浏览器是如何呈现一张页面的一个浏览器有许多模块,其中负责呈现页面的是渲

【JavaScript】DOM操作下拉框

DOM操作下拉框这次要实现一个效果,如下图: 在左边选框里选择一个选项,点击"-->",就会把该选项选到右边框里. 在左边选框里选择多个选项,点击"==>",就会把多个选项选到右边框里. 在右边选框里选择一个选项,点击"-->",就会把该选项选到左边框里. 在右边选框里选择多个选项,点击"==>",就会把多个选项选到左边框里. 效果就是这样,下面我们来实现它: 实现源代码: <!DOCTYPE

【JavaScript】DOM操作表格

DOM操作表格 1.利用JavaScript动态增加.删除表格内容页面如图注:首先说个小问题,有些如制定按钮点击事件的js代码,放在html文档最后可以,放在最前面(<head>标签内)不可以,原因是html文档是自上往下读取,当读到最上面的js.代码时,并没有读取相应的DOM标签,所以制定的按钮功能没有效果,如果非要放在上面,可以指定到window.onload方法中去: <head> <span style="white-space:pre">

javascript DOM 操作自定义创建HTML代码实例

创建自定义的HTML元素我们可以使用 document.registerElement() 创建自定义的HTML元素,这个函数返回的是一个构造函数,第一个参数是用来声明自定义HTML元素的名称,第二个参数是可选的,用来描述原型的对象,自定义功能的元素. 在下面的示例中,简单的创建了一个新的HTML元素<x-treehouse>,并且将它放入到页面中: var XTreehouseElement = document.registerElement('x-treehouse');documen

js使用DOM操作实现简单留言板的方法_javascript技巧

本文实例讲述了js使用DOM操作实现简单留言板的方法.分享给大家供大家参考.具体分析如下: 如图所示简易留言板,也就是自娱自乐版,说白了就是练习DOM操作. 要点一:document.createElement("标签名") 新建元素要点二:父元素.appendChild("元素") 把新建的元素插入到页面的标签中(在标签的最后一个显示),这样才会在浏览器中显示出来要点三:父元素.insertBefore("元素","要插入哪个元