通过操纵domw来更改内容。Javascript与创建新的HTML/CSS页面：哪一种更有效？

我正在建立一个非常简单的网站，有几个不同的部分，如“关于我们”、“图片”和“联系”

我想知道哪个更高效（性能更好，响应时间更短）：

1.每当客户端单击菜单中的某一项（“关于我们”、“联系”等）或

2.为我希望站点拥有的这4或5个部分中的每一部分创建一个新页面（不同的HTML和CSS文件）

---

提前谢谢

对于这样的决策，这就是创建、等前端框架的原因

显然，页面更改（如2所示）将比1慢得多，因为：

• 必须重新加载整个页面（清除dom，然后重新构建）
• 必须重新应用所有共享样式/绑定
• 重复请求的开销（这会给页面加载带来网络延迟）

然而，尽管1看起来似乎是一个吸引人的设计选择，但执行未优化的dom操作（通过jQuery）实际上可能会对性能造成更大的伤害，因为这样会引入大量的抖动和不必要的中间步骤

---

类似于React的框架通过模拟虚拟DOM来处理此问题，其中：

• 所有操作都在内存中计算
• 然后对更改进行优化
• 只有更改的差异应用于实际的DOM

---

现代web组件框架（如Polymer，x-tag）通过使用声明性html语法将数据绑定到html/JS行为来处理此问题。优化的工作原理是：

• 仅在该元素的范围内利用执行操作和样式的阴影dom
• 将所有事件静态绑定到创建的元素（无需重复甚至回调）
• 对组件中所有Id元素的静态引用
  • 这将导致选择速度与jQuery的

    O（n）

    方法相比的

    O（1）

    选择速度
• 编写一次，使用/自定义无处不在的方法

---

因为响应时间和性能是您的主要优先事项。DOM操作将更好地满足您的需要，它允许您实现平滑的转换，而无需加载整个页面

如上所述，您可能会从使用虚拟DOM的框架中获益。在这种情况下，由于您的需求非常简单，像riotjs这样的基于组件的小型UI库可能就足够了

也可能值得一看一个单页网站，其中的部分可以手动滚动或使用顶部导航。这肯定会满足您的两个主要优先事项