频繁DOM操作问题

最新推荐文章于 2024-02-25 00:15:00 发布
最新推荐文章于 2024-02-25 00:15:00 发布
阅读量690 收藏 1
点赞数
分类专栏： javascript 文章标签： JavaScript XHTML J# XML HTML ViewUI

      今天看到一篇文章 Nicholas C. Zakas(professional javascript 作者) 的 Speed up your JavaScript, Part 4

,恍然想起以前好像也碰到过上述现象 ，只是没加深究，找到解决方法后就完事大吉了，当时的代码抽象如下：

 

方法1 :

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">

<head>
	<title>dom测试</title>
</head>
<body>
	<div>
		<ul id='ul_test'><li>t</li></ul>
	</div>
	
	<script type='text/javascript'>
		window.οnlοad=function () {
			//return;
		setInterval(function(){
			document.getElementById('ul_test').innerHTML='';
			for(var i=0;i<100;i++)  {
				for(var j=0;j<100;j++) {
					var tli=document.createElement('li');
					tli.innerHTML=i+'-'+j;
					document.getElementById('ul_test').appendChild(tli);
				}
			
			}
		},1000);
		
		
		}
	</script>
</body>
</html>

运行时 cpu 暴涨 ，长时间 90以上

 

后来经过多方查看  ，确定了是 多次读写 dom 操作太费cpu ，dom 并没有缓存的操作 ，修改后变为;

 

方法2 :

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">

<head>
	<title>dom测试</title>
</head>
<body>
	<div>
		<ul id='ul_test'><li>t2</li></ul>
	</div>
	
	<script type='text/javascript'>
		window.οnlοad=function () {
		
		var ilt=	document.getElementById('ul_test');
		
		setInterval(function(){
			
			
			
			var fragment = [];
			
			for(var i=0;i<100;i++)  {
				for(var j=0;j<100;j++) {
					fragment.push('<li>'+i+'-'+j+'</li>');
				
				}
			
			}
			
			ilt.innerHTML=(fragment.join(''));
			
		},1000);
		
		
		}
	</script>
</body>
</html>
 

 

这样的话 ，cpu 最高在50且就一瞬间，


后看了

JavaScript教程--如何提升JavaScript的运行速度（DOM篇）


又实现了一遍：

 

方法3 :

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">

<head>
	<title>dom测试</title>
</head>
<body>
	<div>
		<ul id='ul_test'><li>t2</li></ul>
	</div>
	
	<script type='text/javascript'>
		window.οnlοad=function () {
		
		var ilt=	document.getElementById('ul_test');
		
		setInterval(function(){
			
			ilt.innerHTML='';
			
			var fragment = document.createDocumentFragment();
			
			for(var i=0;i<100;i++)  {
				for(var j=0;j<100;j++) {
					var tli=document.createElement('li');
					tli.appendChild(document.createTextNode(i+'-'+j));
				
					fragment.appendChild(tli);
				}
			
			}
			
			ilt.appendChild(fragment);
			
		},1000);
		
		
		}
	</script>
</body>
</html>

 

方法3 cpu最高 90 ，且也是只有一瞬间 ，比方法1好，但是还有没方法2好 ,

   说明dom操作还是不如 innerHTML 的 ，innerHTML 只有最后加入 ul 的话才需要结构化 ，而dom的话即使采用节点碎片，新create node 也是挺费资源的，fragment用来加快dom操作还是作用很明显的 。

 

 

iteye_4865
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用Dom操作字符串一例
10-28
最后，对于需要频繁进行此类操作的项目，建议对DOM操作涉及的类和成员进行进一步的封装，以简化代码并提高可维护性。例如，可以创建一些辅助类或方法来封装常见的DOM操作，如查找元素、修改文本等，这样不仅可以提高...
使用jQuery操作 DOM
qq_49384528的博客
08-12 203
DOM操作分为三类： 1）DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() 2）HTML-DOM：用于处理HTML文档，如document.forms 3）CSS-DOM：用于操作CSS，如element.style.color="green" 注释：JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持 设置和获取样式值：{ } 追加和移除样式：{ 追加样式： 移除样式： } 切换样式：{ t
js数组遍历、对象遍历、字符串遍历
热门推荐
weixin_34138139的博客
04-21 2万+
2019独角兽企业重金招聘Python工程师标准>>> ...
为什么不要频繁操作DOM之性能优化
I大俊
10-13 1492
性能优化-为什么不要频繁操作DOM 性能优化的时候，我们常说“不要频繁操作DOM”，但是“DOM 为什么这么慢”以及“如何使 DOM 变快”呢。 DOM 为什么这么慢，因为，DOM和JS的跨界交流 把 DOM 和 JavaScript 各自想象成一个岛屿，它们之间用收费桥梁连接。——《高性能 JavaScript》 JS 是很快的，在 JS 中修改 DOM 对象也是很快的。在JS的世界里，一切...
【JavaScript】减少 DOM 操作
最新发布
好久不见的流星
02-25 1676
减少DOM操作是提高Web应用性能的有效途径之一。通过使用文档片段、事件委托、缓存选择器、缓存计算值等技巧，可以有效降低浏览器的重排和重绘次数，提高页面性能。在编写JavaScript代码时，要时刻关注DOM操作的影响，并选择最优的方案。希望通过本篇博客，你对如何减少DOM操作有了更清晰的认识，并能够在实际项目中应用这些技巧。
过多得操作DOM会降低WEB应用的性能
weixin_30470857的博客
09-24 176
平时在工作中，要优化自己开发的WEB应用的性能，一般是遵循以下几个原则： 1.减少网络请求。 2.压缩、合并静态资源文件，以此来减轻网络传输的带宽压力和资源消耗。 3.代码逻辑层面上的性能优化、比如减少循环次数、减少DOM操作的次数（减少DOM的获取与修改次数）等。 这里就来讲一下为什么DOM操作会影响WEB应用的性能。 DOM与ES的关系 DOM（Document Obje...
简单实现JS对dom操作封装
10-23
在这个例子中，我们看到的是一个简单的JS库的实现，它封装了一些基本的DOM操作，类似于jQuery。这个库被称为`duquery`，通过创建一个名为`Duquery`的构造函数并扩展其原型来实现。 首先，`duquery`是一个立即执行的...
javascript DOM 操作基础知识小结
10-29
掌握DOM操作的基础知识对于任何前端开发者来说都至关重要。下面我们将深入探讨DOM的一些基本概念和常用操作。 1. **节点(Node)**： - **Document**：整个文档的顶级节点，所有其他节点都是其子节点。 - **...
LivingDom:DOM 操作框架
06-20
LivingDom 是一个专门用于操作 Document Object Model (DOM) 的框架，它简化了JavaScript中的DOM操作，使得开发者可以更高效地创建、修改和管理DOM元素。DOM是网页的结构化表示，通过JavaScript与DOM交互，我们可以...
前端页面卡顿、也许是DOM操作惹的祸？
cxu123321的博客
06-05 864
前端页面卡顿、也许是DOM操作惹的祸？ 界面上UI的更改都是通过DOM操作实现的，并不是通过传统的刷新页面实现 的。尽管DOM提供了丰富接口供外部调用，但DOM操作的代价很高，页面前端代码的性能瓶颈也大多集中在DOM操作上，所以前端性能优化的一个主要的关注 点就是DOM操作的优化。DOM操作优化的总原则是尽量减少DOM操作。 先来看看DOM操作为什么会影响性能 在浏览器中，DOM的实现和ECMAScript的实现是分离的。比如 在IE中，ECMAScrit的实现在jscript.dll中，而DOM的实
php 频繁dom和 文件,性能优化之为什么不要频繁操作DOM
weixin_39987138的博客
03-19 144
性能优化：为什么不要频繁操作DOM@[toc]性能优化的时候，我们常说“不要频繁操作DOM”，但是“DOM 为什么这么慢”以及“如何使 DOM 变快”呢。DOM 为什么这么慢，因为，DOM和JS的跨界交流把 DOM 和 JavaScript 各自想象成一个岛屿，它们之间用收费桥梁连接。——《高性能 JavaScript》JS 是很快的，在 JS 中修改 DOM 对象也是很快的。在JS的世界里，一切...
vue面试题：说说vue操作真实dom性能瓶颈
sdasadasds的博客
10-20 918
vue面试题：说说vue操作真实dom性能瓶颈，下面一起来看看吧！vue性能瓶颈的几种情况。
jquery对dom的操作常用方法整理
qq_33043025的博客
05-04 2294
参考：https://www.jb51.net/article/39099.htm jquery对dom的操作包括了对html内容的添加、删除元素/内容、操作CSS等等，本文整理了一些dom操作的常用方法，感兴趣的朋友可以参考下哈 Jquery对dom的操作也是很总要的。1.三个简单实用的用于 DOM 操作的 jQuery 方法： · text() - 设置或返回所选元素的文本内容 · html() - 设置或返回所选元素的内容（包括 HTML 标记） · val() - 设置或返回表单字段的值2.at
【性能优化】频繁操作DOM所引发的重排（回流）与重绘
马云
07-02 1677
为什么不要频繁操作DOM？ 一、DOM和JS属于跨界交流 把 DOM 和 JavaScript 各自想象成一个岛屿，它们之间用收费桥梁连接。——《高性能 JavaScript》 JS 是很快的，在 JS 中修改 DOM 对象也是很快的。在JS的世界里，一切是简单的、迅速的。但 DOM 操作并非 JS 一个人的独舞，而是两个模块之间的协作。 JS 引擎和渲染引擎（浏览器内核）是独立实现的。当我们用 JS 去操作 DOM 时，本质上是 JS 引擎和渲染引擎之间进行了“跨界交流”。 “跨界交流”要收费——.
为什么要减少DOM操作
silentCoder的博客
03-05 3670
今天，在这学习vue，突然想到一个问题，我jQuery用的这么爽，看到什么元素，想操作dom就直接选中进行变化，好像没什么不方便的啊？那为啥我用的jQuery操作dom的构建页面的方法就这么被淘汰了呢？那就问百度吧。结果基本一面倒的都在说需要减少dom层的操作，原因，就是因为操作dom慢。至于为啥慢，就涉及到浏览器渲染页面。浏览器分为：渲染引擎和js引擎。渲染引擎工作：解析HTML代码，生产DOM...
高频dom操作和页面性能优化探索（转）
02-22 6979
一、DOM操作影响页面性能的核心问题 通过js操作DOM的代价很高，影响页面性能的主要问题有如下几点： 访问和修改DOM元素 修改DOM元素的样式，导致重绘或重排 通过对DOM元素的事件处理，完成与用户的交互功能 DOM的修改会导致重绘和重排。 重绘是指一些样式的修改，元素的位置和大小都没有改变； 重排是指元素的位置或尺寸发生了变化，浏览器需要重新
jQuery性能优化--循环时的DOM操作
小石头
08-12 3239
jQuery性能优化--循环时的DOM操作
数据过多/DOM操作导致页面卡顿和请求突增导致页面崩溃
SpringRolls的博客
06-11 8047
数据过多导致页面卡顿 采用懒加载+分页(前端维护懒加载的数据分发和分页) 使用虚拟滚动技术(目前react的antd4.0已支持虚拟滚动的select长列表) 请求突增导致页面崩溃
DOM操作详解：前端面试必备知识
- `createDocumentFragment`: 创建一个文档碎片，用于存储多个临时节点，然后一次性添加到DOM中，避免频繁的DOM操作。 2. **查询节点** - `getElementById`: 通过ID获取元素。 - `getElementsByClassName`: 通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值