对于比较大的页面innerHTML或appendChild要避免

最新推荐文章于 2023-06-28 12:42:04 发布
最新推荐文章于 2023-06-28 12:42:04 发布
阅读量1.7k 收藏
点赞数
分类专栏： WEB编程 文章标签： 浏览器 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anghlq/article/details/1589352
版权

我们经常会通过JS来对页面布局进行调整。

然而，对于比较大的部分最好避免调整，比如innerHTML或appendChild进行位置调整。因为在调整的过程中，浏览器会对这些变动的部位进行重新刷新，其HTML比较大时浏览器解析就很慢，然后会导致页面的明显抖动。

anghlq
关注
专栏目录
为什么不推荐用innerText，最好用innerHTML
qq_37635012的博客
04-01 117
innerHTML和innerText 这两个属性都是获取document对象的文本内容的，innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。**同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。通过 chrome 浏览器打开，弹出内容为 “hello world” 和 “hello world”通过IE浏览器打开，弹出内容为 “hello world” 和 “hello world”
javascript appendChild,innerHTML,join性能比较代码
10-29
在开发中，对于大量内容的添加操作，推荐的做法是尽量减少对DOM的直接操作次数，并尽可能地批量处理，避免频繁的DOM操作带来的性能问题。当不得不进行大量的动态内容添加时，先在JavaScript层面完成数据处理和字符串...
谨慎使用 innerHTML
weixin_33738555的博客
01-08 281
        遇到一个有意思的问题, HTML中有一个表单, 而表单中的需要填写的元素是通过一个按钮来动态添加的, 这些需要填写的内容id通过Javascript设置为day1, day2, day3等等...都放在dayList这个div中.         原先的方法比较暴力, 但速度非常快, 就是构造一个新的html, 然后直接添加到dayList的innerHTML后面. 但问题是...
Web前端之操作元素内容的方法、介绍、区别、createTextNode、createElement、appendChild、textConten、innerText、innerHTML、append
CSDN博客主页地址：https://mengjian.blog.csdn.net/
06-28 6197
Web前端之操作元素内容的方法、介绍、区别、createTextNode、createElement、appendChild、textConten、innerText、innerHTML、append
append()、appendChild() 和 innerHTML 的区别
weixin_45492475的博客
04-04 986
概念和区别：...
JS 之 appendChild 与 innerHTML
Rand Tsui
07-27 3051
问题：手机滑动分页，每次向下滑到低，就会请求数据并增加 n 个 item ，至于这个 item是什么，item 就是一类相似的 元素，它们有共同的父元素，那么，我要如何添加这几个item？ 方式有两种，第一种很简单，修改父元素的innerHTML，原来的加上新的。 第二种，用appendChild方式，有几个加几个。 以上两种方法比较 第一种方式会删除父元素里面内容，然后重新写入所有ite
Javascript createElement和innerHTML增加页面元素的性能对比
11-30
例如，我们可以通过 `document.createElement('a')` 创建一个新的`<a>`元素，然后通过 `innerText` 或 `textContent` 设置文本内容，最后使用 `appendChild` 将新元素添加到目标父元素中。这种方法避免了解析整个...
如何在框架(frame)页面之间使用appendChild()？
03-17
在处理框架页面间交互时，JavaScript的`appendChild()`方法是一个非常实用的工具，它允许我们在DOM（文档对象模型）中添加新的元素。本篇文章将详细探讨如何在框架页面之间使用`appendChild()`。 首先，理解`...
关于在innerHTML中JS不执行的问题
03-28
在JavaScript中，`innerHTML`属性是一个非常常用的工具，用于设置或获取HTML元素的内部HTML内容。然而，有时候我们在使用`innerHTML`插入包含JavaScript代码的HTML时，会发现这些脚本并没有像预期那样执行。这个问题...
HTML中append与innerHTML的区别及图片大小设置
小橘是橘子的博客
10-31 588
HTML中append与innerHTML的区别及图片大小设置
innerHTML和appendChild的性能
weixin_33690367的博客
04-14 417
　　目测innerHTML比appendChild好了3到4倍， 但是界面渲染还是很慢啊；  　 chrome结果 /** *chrome浏览器; * innerHTML appendChild * 1千条的情况下：3MS 11MS ...
innerHTML使用总结4个注意点
xufangfanglemon的专栏
04-20 1343
<br /><br />对像的innerHTML属性的作用是设置或返回表格行的开始和结束标签之间的 HTML。一般都是用于DIV控件中,下面就来说说不同浏览器下面对空格，回车，换行的区别的，以便于你在开发中处理bug呢:<br />1、空格处理<br />当在DIV中输入"a[任意个空格]a" HTML呈现在Chrome和IE下是一样的：只显示一个空格。<br />innerHTML属性IE还是两个a加一个空格，Chrome则是原始输入的样子。<br />2、回车<br />当在DIV中输入"a[回车][任
有关appendChild和innerHTML（转
weixin_30297281的博客
07-25 145
在我们向dom页面写入一些内容时，一般我们都是既使用innerHTML也可以使用appendChild，两者功能似乎没有多大差别。很多朋友一定也对这两个东西感到困惑，今天写代码时我就想到了这个问题，两者真的没有差别吗？ 在网上查看了一些文章，然后再通过自己一些测试，得到了如下一些结论。1、在执行速度的比较上，使用appendChild比innerHTML要快，特别是内容...
appendChild和innerHTML的小区别
qq_40931054的博客
06-08 703
appendChild接收的类型是一个对象， innerHTML接收的是一个字符串。 一般在js里，拼接html标签时，使用字符串比如：var html+='<div></div>'，用innerHTML=html来接收值 如果是创建了一个div标签对象，var div= createElement('div')，用appendChild(div)把标签放进去。 如果用innerHTML=div接收一个创建的对象，会出现显示不正常变为一个字符串（[object HTMLDivElem
js中append,appendChild及innerHTML的认识
qq_43222297的博客
05-03 6233
本人是新手，在js的学习中遇到了一些问题，查了许多博客，但对新手来说都不友好，特和大家分享一下自己的理解心得。如有错误谢谢指出。 append用法： 可以同时传入多个节点或字符串，没有返回值。 appendchild用法： 只能传一个节点，且不直接支持传字符串。 innerHTML用法： 添加纯字符串，不能获取内部元素的属性。 下面是我打的代码，可以让大家分清它们的用法。 <!DOCTYPE...
HTML5的child,HTML中appendChild和innerHTML的区别
weixin_39845461的博客
06-18 507
1、在执行速度的比较上，使用appendChild比innerHTML要快，特别是内容包括html标记时，appendChild明显要快于innerHTML，这可能是因为innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上，当包含html标记过多时，innerHTML速度会明显变慢。可运行下面的代码测试：/p>1.0 Transitional//EN""http://www.w3...
使用appendChild巧妙解决火狐下innerHTML无法沿用input数据问题
weixin_33733810的博客
12-03 182
canrun 今天做一个模块的时候碰到了一个问题：使用innerHTML追加数据的时候导致已填写的input数据丢失，这个问题对于jQuery的append来说是不会存在问题的，但是现在并没有引用jQuery，因此，怎样才能让数据追加到指定div的末端呢？我想到了appendChild方法，但是appendChild的处理对象是一个Element，直接将html标签作为参数是不行的，因此为了能够...
lastRowHtml = newRow.outerHTML tbody.appendChild(newRow).innerHTML = lastRowHtml
最新发布
10-07
这两行代码的意思是首先获取新行`newRow`的HTML内容（包括标签和所有子节点），然后将其插入到表格的tbody部分。接着，删除刚刚插入的新行，再设置tbody的HTML内容为`lastRowHtml`，也就是之前保存的原最后一个行的HTML。 这样做可能会导致两个问题： 1. `tbody.appendChild(newRow)`这行会直接将新行添加到tbody，而不仅仅是复制其内容。所以，如果你后续想要保留原`lastRow`的内容，只通过innerHTML重置`tbody`可能覆盖掉之前的所有数据，除非`lastRowHtml`就是你期望的新行内容。 2. 删除新行后再设置innerHTML可能导致性能问题，因为每次`innerHTML`都会解析整个字符串生成新的DOM树，频繁操作可能会降低页面的渲染速度。 建议调整代码逻辑，避免不必要的DOM操作，例如，可以在`upinsertRowData`函数结束后，单独处理`lastRow`的更新，使其与表格内容分离。以下是优化后的代码片段： ```javascript function upinsertRowData() { var newRow = document.createElement('tr'); newRow = originalLastRow; // 使用原始的最后一行 // 更新新行的ID和其他属性 ... // 插入新行 tbody.appendChild(newRow); // 保存新行的HTML用于后期可能的复用 var newRowHtml = newRow.outerHTML; // 如果需要保存原lastRow的HTML，这里可以单独处理 // lastRowHtml = lastRow.outerHTML; } // 当不再需要lastRow的HTML时，可以在这里更新tbody if (typeof lastRowHtml !== 'undefined') { tbody.innerHTML = lastRowHtml; } ``` 这样既保证了表格的正常操作，又避免了不必要的DOM刷新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值