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

我正在开发一个大型HTML5应用程序，我真的很想知道这个问题。我将有很多对话框和选项卡，可以通过用户交互打开

我想知道最佳实践是什么——在HTML文档中使用display编写所有对话框和选项卡：对所有对话框和选项卡都不显示，或者在用户每次进行相关交互时使用JS或jQuery动态创建这些HTML部分

在性能、易开发性、可读性等方面，什么更好

---

任何帮助都将不胜感激

我认为这取决于你的应用程序有多少个标签以及标签有多大

• 标签中的大内容意味着应用程序在启动时需要很长时间才能加载，并消耗大量内存。如果是这种情况，我想根据需要加载它们
• 选项卡中的小内容加载速度很快，因此在单击选项卡时立即加载所有内容以提高性能

---

不要忘记在internet连接速度较慢的旧计算机上运行一些测试，以查看应用程序的行为。并不是每个人都有最新最快的硬件。

我会尽力解决这个问题

1-正如我在评论中所说，避免内联样式。 首先也是最重要的是，这是因为内联样式是干的。 必须一遍又一遍地重复同样的事情，这对于维护和开发来说都是非常糟糕的，因为一旦你不得不在大约100个地方更改代码，你就不用再更改代码了

2-避免内联样式也有利于可访问性，一些屏幕阅读器和搜索引擎爬虫基于css选择器进行索引工作和阅读工作，因此使用内联样式将迫使他们忽略或误解内容

3-当作为开发人员工作时，“仅仅为了好玩”很容易进行内联样式设计，但实际上你所做的是混合关注点。HTML是内容，CSS是设计。 混合使用这两种方法通常会让人头疼，而且我作为开发人员的工作也会让你头疼，因为我不知道是什么风格，怎么做的

现在，谈谈表演

当您使用内联样式时，您告诉浏览器的基本是“嘿，对于每个页面视图，请将这些样式应用于所有这些元素。”现在，这一点变得非常明显，这就是为什么不好的原因。 你没有能力缓存和存储你的css，基本上每次都会强迫浏览器重新渲染你的样式。使用外部CSS文件实际上会帮助您加快站点的速度，因为浏览器会缓存它

这就是css部分

您询问的javascript

正如我所说，用css隐藏东西，用javascript显示。你为什么要这么做而不是把所有的东西都拉进去？ 好吧，你两者都可以。如果你只是一个网络浏览者的经验，那么你可以做任何一个，这并不重要。我自己更喜欢DOM中的东西，因为它与内容有关，如果你是一个有几十个ajax调用的大型应用程序，那么维护起来只会更加困难。我相信，如果你必须使用ajax，那么就要确保它是有价值的、合乎逻辑的，而不仅仅是为了好玩（我认为，如果你有jQuery和纯javascript可供使用的话，这是适用的）

例如，如果您使用的是backbone.js，它基于视图，并将某种形式的“MVC”引入前端，使您能够拥有具有子视图的视图，这些子视图可以从服务器拉入内容

---

希望这对做决定有点帮助！：）

+1个好问题-用CSS隐藏它们，用JS切换它们。永远不要内联。永远不要内联样式。还有一些“JS模板”方法/解决方案，可能会有所帮助另一个重要的问题是，这些对话框/选项卡的HTML结构有多大不同？也许只需将数据提供给JS（JSON，…）并将其填充到正确的位置就足够了。好的方面，尽管我个人认为大量提及内联样式有点忽略了这一点，因为这是一个初始DOM权重与JavaScript创建的DOM对象之间的问题。