jQuery和动态元素vs显示css属性

Question

在设计html界面元素时，根据某些事件，DOM显示/隐藏是一种非常常见的场景。我的问题很简单，但是每次遇到这个问题我总是在想：它是不是更好＆＃34;要在html中硬编码元素并简单地切换display属性（例如使用.show / .hide），或者根据需要通过JS动态添加/删除它们？两者都很容易实现，但我不知道如何比较以及是否有使用一个优于另一个的任何优点/缺点。

有些情况，比如在几个地方逐字使用相同的元素，在你去的时候动态创建DOM似乎是有意义的，但另一方面，理论上对它们进行硬编码更容易维护，因为你可以移动围绕DOM并根据需要更改它们，只要选择器对于jQuery仍然相同，它们将按预期工作。一般来说，从设计师的角度来看，硬编码似乎是要走的路，但我期待着思考，也许我可能会在这里看到的东西。

编辑：通过＆＃34;硬编码＆＃34;我的意思是完全没有通过JS插入的元素;也就是说，在原始html标记中已经在其父文档中指定其位置的元素而不是JS。

Answer 1

在处理更大的应用程序时需要考虑性能，并且在编写较小的应用程序时没有太多性能问题时，请执行您觉得简单易用的操作。 非常大的DOM可能会杀死移动浏览器。很多DOM修改都会影响性能。在更大的应用程序中，最好保持DOM光并减少DOM修改。因此，简而言之，当性能未受到密切关注时，它比传统方便。但始终建议密切注意性能和良好做法。

Answer 2

最终，它实际上取决于您正在使用的内容以及您的应用程序的功能，但是：

• 静态标记意味着服务器的工作量更多（但只有首先动态生成页面，静态页面的效果可以忽略不计）。

• 动态加价意味着为客户提供更多工作，这并不总是坏事，具体取决于您的目标受众。

但从技术上讲，Graceful Degradation表明静态标记是最佳选择，因为理想情况下，页面应该在禁用脚本时保持可用（动态标记是工作静态核心上方的可选层）。

另一方面，Progressive Enhancement从那里构建并基本上说，因为我们已经在使用一个简单的核心，我们可以在客户端的所有柱面上启动，并动态增强静态标记利用最新浏览器技术的内容。

例如，jQuery UI和jQuery Mobile是围绕渐进增强设计的，因为他们的策略是扩展现有标记，使客户端行为更丰富，通常通过动态创建的元素公开。

因此，标题中的两个选项都可以并且可以说应该一起实现。在一般情况下，如果可能的话，渲染应用程序在无脚本平台上工作所需的标记，那么从客户端增强该标记看起来是个好主意。