最佳实践 - 使用display:none预写HTML文档，还是使用JS创建？

Question

我正在开发一款大型HTML5应用程序，我非常关心这个问题。我将有很多对话框和选项卡会在用户交互时打开。

我想知道什么是最佳实践 - 将所有对话框和选项卡写在HTML文档中，并对它们全部使用display:none，还是每次用户进行相关交互时使用JS或jQuery动态创建这些HTML部分。

从性能、开发便利性、可读性等方面来看，哪种方法更好？

任何帮助都将不胜感激。

- Light

---

好问题-使用CSS隐藏它们，并使用JS切换它们。永远不要内联，绝对不能内联样式。 - Henrik Andersson

还有一些“JS模板化”方法/解决方案，可能会有所帮助。另一个重要的问题是，这些对话框/选项卡在它们的HTML结构上有多大的差异？也许只需要将数据提供给JS（JSON等），并将其填充到正确的位置即可。 - CBroe

Answer 1

我会尽力回答这个问题。

1-如我在评论中所说，避免使用内联样式。 首先这是因为内联样式违反了DRY原则。 需要重复多次相同的样式非常不利于维护和开发，因为除了要更改代码一次，你还必须在大约100个地方修改。

2-避免使用内联样式还有助于可访问性，一些屏幕阅读器和搜索引擎爬虫根据CSS选择器进行索引和读取工作，因此使用内联样式会强制它们忽略或误解一些内容。

3-当我们作为开发人员时，很容易“随便玩玩”内联样式，但实际上你在混合关注点。HTML是内容，CSS是设计。 混用这两个通常会导致头疼，并且我作为紧随其后的开发人员的工作会变得非常麻烦，因为我不知道什么被样式化以及如何被样式化。

现在讲讲性能问题。

当你使用内联样式时，你告诉浏览器的基本上是“嘿，对于每个页面视图将这些样式应用于所有这些元素。” 现在这变得非常明显为什么这是不好的。 你无法缓存和存储CSS文件，并且基本上要求浏览器每次重新渲染你的样式。使用外部CSS文件将实际上有助于加快网站速度，因为浏览器可以缓存它。

这是CSS部分。

你问到的JavaScript。

就像我说的，用css隐藏事物，用javascript显示。现在为什么要这么做而不是拉进来所有东西？ 好吧，你两个都可以做。如果你只是一个网页浏览器经验，那么你可以任意选择，没有关系。我自己更喜欢把东西放在DOM中，因为它涉及内容，如果你有一个大型应用程序然后有许多ajax调用只会使维护更加困难。我相信如果你必须进行ajax调用，请确保其计算逻辑正确，并且不仅仅是为了好玩（我认为这适用于只有jQuery和纯JavaScript可用的情况）。

例如，如果你使用backbone.js，则基于视图并引入某种形式的“MVC”到前端，使您拥有具有子视图的视图，可以从服务器中提取内容。

希望这有助于做出决定! :)

- Henrik Andersson

---

好的观点，尽管我个人认为过多地提及内联样式有些偏离了重点，因为这更是一个关于初始DOM权重与JavaScript创建的DOM对象之间的问题。 - MackieeE

Answer 2

我认为这取决于您的应用程序有多少选项卡以及这些选项卡的大小。

• 选项卡内的大量内容意味着应用程序启动时需要较长时间加载并消耗大量内存。如果是这种情况，建议根据需要加载它们。
• 选项卡内的小量内容将快速加载，因此一次性加载所有内容以增加选项卡点击时的性能。

不要忘记在旧电脑和慢速互联网连接上运行一些测试，以查看您的应用程序的表现。并非每个人都拥有最新和最快的硬件设备。

- Uooo