Question

我有一个列表，我想更新它以响应其有效负载包含新列表项的事件。我想将新列表项添加到列表中。

我使用以下逻辑来添加新的＆＃39; msg＆＃39;从活动中收到的名单。

containerClass

现在，当我在chrome上对此进行分析时，每次事件发生时都会有预期的重排。 Chrome告诉我大约7个节点需要布局。即使列表中有数百个项目，此数字也是不变的。

现在我的问题是

i）这七个需要布局的节点是什么？

ii）涂料似乎在整个文件上完成，因为清单直接附在身上。因此，如果列表有1000个项目，即使布局仅发生在7个节点上，所有项目仍需要重新绘制。有没有更聪明的策略可以避免这种情况？

Answer 1

更新

在提供HTML后，我设置了test case，其中包含以下方法：

整体速度是底线，重绘只是DOM这个更大世界的一部分。在Chrome上，insertAdjacentElement/HTML insertBefore()比insertAdjacentHTML()快得多（约10％），而在Firefox中只有一点点（比例为.55％）。

i）这七个需要布局的节点是什么？

节点可以是元素，文本，注释，空格等，因此它取决于上下文。听起来微不足道它是7的常数。

ii）涂料似乎在整个文件上完成，因为清单直接附在身上。因此，如果列表有1000个项目，即使布局仅发生在7个节点上，所有项目仍需要重新绘制。有没有更聪明的策略可以避免这种情况？

避免完全重绘页面的唯一方法是AJAX AFAIK。

尝试</*>尽管它的名字是满口的，但它是一种非常快速和灵活的方法。这是签名：

元素。 insertAdjacentHTML（ ＆＃34; position＆＃34; ， string ）;

元素：任何能够保存内容的元素（即有一个结束标记insertBefore()）
＆＃34; position＆＃34;：有四个位置相对于元素：
1. ＆＃34; beforebegin＆＃34;：要插入的元素（即第二个参数： string ）将放在< EM>元素。 EQ。 <li>string</li>
  - 离。 <ul>element</ul> parentNode.prepend()
2. ＆＃34; afterbegin＆＃34; string 将放置在所有孩子面前的元素中。 EQ。 <ul>
  - 离。 <li>string</li> <li>item</li> ，<li>item</li>，</ul> appendChild()
3. ＆＃34; beforeend＆＃34; string 作为最后一个子项插入元素中。 EQ。 <ul>
  - 离。 <li>item</li> <li>item</li>，<li>string</li>， </ul> insertAdjacentHTML()
4. ＆＃34;后续＆＃34; 字符串位于元素之后。 EQ。不存在，除了使用<ul>，另一种选择太混乱了，我不打算包括它。
  - 离。 <li>item</li> <li>item</li>，</ul> <li>string</li> innerHTML
5. string：这是一个字符串，表示要呈现为HTML的一个或多个元素。 EQ。 const btn = document.querySelector('.btn'); const li = `<li class='item'>Item</li>`; const ul = document.querySelector('.ul'); btn.addEventListener('click', function(e) { ul.insertAdjacentHTML('afterbegin', li); }, false);

演示

＆＃13;

<button class='btn'>ADD</button>
<ul class='ul'></ul>

＆＃13;

{{1}}

＆＃13;