【发布时间】：2014-10-06 20:30:14
【问题描述】：
我想问你，使用 jQuery 的 append() 方法（以及其他类似的方法，如 prepend()、remove()）来进行 DOM 操作以使网站响应是一个好主意吗？它如何影响性能？
示例：
我有一个菜单（包含数百个链接的非常大的多级菜单），它显示在桌面页面的顶部。但它需要在移动设备上完全不同的位置显示。
解决方案 1：
实现这一点的最简单方法可能是多次包含菜单，然后使用 CSS 媒体查询 使用 display: none; 隐藏一个菜单并使用 display: block; 显示另一个菜单：
<div id="menu-desktop-container">
<div class="menu">...</div>
</div>
<!-- ...Here's some other HTML between both positions of the menus -->
<div id="menu-mobile-container">
<div class="menu">...</div>
</div>
这里的 CSS：
#menu-desktop-container { display: block; }
#menu-mobile-container { display: none; }
@media only screen and (max-width: 768px)
{
#menu-desktop-container { display: none; }
#menu-mobile-container { display: block; }
}
但它有很多缺点。例如。菜单真的很大，所以包含两次会使页面几乎扩大两倍。这会影响性能并增加加载时间（尤其是在连接速度较慢的移动设备上）。此外，它可能对 SEO 非常不利，所有链接都是重复的。
解决方案 2：
其他解决方案是只包含一次菜单，然后使用 jQuery 的 append() 方法将其移动到适当的容器中。这是 HTML 标记（现在它更简单，因为菜单没有重复）：
<div id="menu-desktop-container">
<div id="menu">...</div>
</div>
<!-- ...Here's some other HTML between both positions of the menus -->
<div id="menu-mobile-container"></div>
如果屏幕很窄，我可以使用 jQuery 将菜单移动到移动容器：
$("#menu-mobile-container").append( $("#menu") );
如果屏幕很宽，我可以将菜单移回默认桌面容器：
$("#menu-desktop-container").append( $("#menu") );
我更喜欢append() 方法的解决方案，但我有一些顾虑：
问题
- 它如何影响性能？
- 它可以在移动设备上正常工作吗？
- 它适用于所有浏览器吗？
- 它可以在旧版本的 Internet Explorer 中运行吗？
- 在开始使用此方法之前，我还应该注意哪些其他缺点？
【问题讨论】：
-
重要的是要记住，大多数人不会为了好玩而不断调整页面大小......至少在他们第一次这样做之后。如果是这种情况，最好使用 js 方式，因为移动可能永远不会发生。如果您希望人们一直在调整大小，那么最好只在开始时包含带有 css 的菜单。在我看来，您的问题或多或少来自糟糕的设计。答案甚至可能是一种意见，我不确定是否有最好的方法来做到这一点。假设你不能用纯 css 来修改这样的设计。
-
为什么“不同位置”必然意味着“DOM 中的不同位置”？
-
1) 仅将一个 DOM 节点移动到另一个位置相对“便宜”。 2) – 4) – 请自行研究这些要点。
-
@Bergi 我无法仅使用 CSS 更改该元素的位置（设计不允许我这样做），因此唯一的选择是移动菜单或复制菜单。跨度>
-
在关闭该功能的情况下使用您的网站。然后打开它，然后再试一次。如果网站感觉速度较慢，请调查原因。当然，做某事总是比什么都不做要花更长的时间，但是在这里测量毫秒是毫无意义的。
标签： javascript jquery performance responsive-design dom-manipulation