“异地” DOM 的副本来进行操作
我最近观看了 Nicholas Zakas 谈论高性能脚本的视频。这是关于回流和重绘的。他说不断地回流是不好的，因为回流会移动并改变布局，改变尺寸等。
我回答了一个关于将溢出从一个 div 转移到另一个 - 我将溢出内容“溢出”到另一个 div 的方法是：
- 测量内部和外部容器（目前，我使用 jQuery.height()）
- 检查内部是否大于外部，
- 如果小于（无溢出），
- 如果大于（溢出）则结束脚本，弹出内部容器中的最后一个字符并添加到下一个 div
- 将文本放回内部容器中（导致回流 - 重新计算高度）
- 回到步骤 1
问题是我正在删除和附加字符，并测量每个从容器中“弹出”的字符溢出容器的高度。每次迭代都会重新渲染 - 这有时会导致速度变得非常慢。
有没有办法拥有 DOM 的 JS 副本来操作、检查高度等？我正在寻找的就像页面的克隆。我听说过 DOM 片段，但它只是将节点放入 DOM 之前的一个容器。
I have recently watched a video of Nicholas Zakas talk about high performace scripts. This one is about reflow and repaint. he says it's bad to constantly reflow which is moving around and changing the layout, change dimensions, etc.
i answered a question about Transfer overflow from one div to another - what i did to "spill" overflowing content to the other div was:
- measure the height of the inner and outer container (currently, i use jQuery.height())
- check if inner is greater than outer
- if less than (no spill), end script
- if greater (spill), pop the last character in the inner container and prepend to the next div
- put the text back in the inner container (causing reflow - recalculating heights)
- back to step 1
the problem is i am removing and appending characters, and measuring the height of the spilled container per "character popped" out of the container. it's re-rendering also per iteration - which makes it super slow at times.
is there a way to have a JS copy of the DOM to manipulate, check height etc.? what i'm looking for is like a clone of the page. i have heard of DOM fragments but it's just a container for nodes before placing them into the DOM.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在考虑创建 DOM 副本时，以下方法可能很有用：
document.createDocumentFragment()- 创建一个普通的“节点存储”对象。document.implementation.createDocument和 DOMParser - 创建和操作完整文档。cloneNode- 复制节点（使用 DOM 操作appendChild和replaceChild）。这些方法对于 DOM 结构非常有用，但不幸的是，它们不会返回有用的维度值。
必须渲染元素。这可以通过创建
元素并在其中插入文档（节点）来完成。前面提到的方法可用于此目的：创建文档（部分）的有效副本，并将文档插入 iframe 中。插入
When thinking about creating a copy of the DOM, the following methods can be useful:
document.createDocumentFragment()- Creates a plain "node storage" object.document.implementation.createDocumentand the DOMParser - Create and manipulate full document.cloneNode- Copy a node (DOM manipulation usingappendChildandreplaceChild).These methods are very useful for DOM structures, but unfortunately, they do not return useful values for dimensions.
The elements have to be rendered. This can be done by creating an
<iframe>element, and insert the document (nodes) in it. The previously mentioned methods can be used for this purpose: Create an effective copy of (part of) the document, and insert the document into the iframe.It might be useful to also insert a
<base>element in the<head>, so that URLs and images are correctly resolved.