通过操作 DOM w 更改内容。 Javascript 与创建新的 HTML/CSS 页面：哪个更有效？
Changing content by manipulating the DOM w. Javascript vs. creating new HTML/CSS pages: which is more efficient?
我正在构建一个非常简单的网站，其中包含几个不同的部分，例如 "about us"、"pictures" 和 "contact"。
我想知道哪个更有效（更好的性能和更短的响应时间）：
1.Using Javascript 来操纵 DOM 并在客户单击菜单中的其中一项时更改主要部分的内容 ("about us", "contact"等）或...
2.Creating 一个新页面（不同的 HTML 和 CSS 文件）我希望网站有这 4 或 5 个部分？
提前致谢！
为了做出这样的决定，创建了 Google Polymer, AngularJs, React 等前端框架。
显然，页面更改（如 2. 中所建议）将比 1 慢得多，因为：
- 整个页面必须重新加载（dom被清除，然后重新构建）
- 所有共享 styles/bindings 必须重新应用
- 发出重复请求的开销（将网络延迟引入页面加载）
然而，尽管 1 看起来像是一个吸引人的设计选择，但执行未优化的 dom 操作（通过 jQuery）实际上可能会进一步损害性能，因为您会引入大量颠簸和不必要的中间步骤。
像React这样的框架，通过模拟虚拟DOM[=来处理这个问题55=] 其中：
- 所有操作都在内存中计算
- 然后优化更改
- 只有更改的差异会应用到实际 DOM
现代网络组件框架（如Polymer、x-tag）处理这个通过使用声明性 html 语法将数据绑定到 HTML/JS 行为。优化工作：
- 利用阴影 dom 执行操作和样式 仅在该元素的范围内
- 将所有事件静态绑定到创建的元素（不需要重复偶数回调）
- 静态引用组件中的所有 Id' 元素
- 这导致
O(1) 选择速度与 jQuery 的 O(n) 方法
- 一次编写，use/customize处处接近
因为响应时间和性能是您的首要任务。 DOM 操作将更好地满足您的需求，因为它允许您在不加载整页的情况下实现平滑过渡。
如上所述，您可能会受益于使用虚拟 DOM 的框架。在这种情况下，由于您的要求非常简单，基于组件的小型 UI 库（如 riotjs）可能就足够了。
也可能值得看看单页网站，其中的部分可以手动滚动或使用顶部导航。这肯定会满足您的两个主要优先事项。
我正在构建一个非常简单的网站，其中包含几个不同的部分，例如 "about us"、"pictures" 和 "contact"。
我想知道哪个更有效（更好的性能和更短的响应时间）：
1.Using Javascript 来操纵 DOM 并在客户单击菜单中的其中一项时更改主要部分的内容 ("about us", "contact"等）或...
2.Creating 一个新页面（不同的 HTML 和 CSS 文件）我希望网站有这 4 或 5 个部分？
提前致谢！
为了做出这样的决定，创建了 Google Polymer, AngularJs, React 等前端框架。
显然，页面更改（如 2. 中所建议）将比 1 慢得多，因为：
- 整个页面必须重新加载（dom被清除，然后重新构建）
- 所有共享 styles/bindings 必须重新应用
- 发出重复请求的开销（将网络延迟引入页面加载）
然而，尽管 1 看起来像是一个吸引人的设计选择，但执行未优化的 dom 操作（通过 jQuery）实际上可能会进一步损害性能，因为您会引入大量颠簸和不必要的中间步骤。
像React这样的框架，通过模拟虚拟DOM[=来处理这个问题55=] 其中：
- 所有操作都在内存中计算
- 然后优化更改
- 只有更改的差异会应用到实际 DOM
现代网络组件框架（如Polymer、x-tag）处理这个通过使用声明性 html 语法将数据绑定到 HTML/JS 行为。优化工作：
- 利用阴影 dom 执行操作和样式 仅在该元素的范围内
- 将所有事件静态绑定到创建的元素（不需要重复偶数回调）
- 静态引用组件中的所有 Id' 元素
- 这导致
O(1)选择速度与 jQuery 的O(n)方法
- 这导致
- 一次编写，use/customize处处接近
因为响应时间和性能是您的首要任务。 DOM 操作将更好地满足您的需求，因为它允许您在不加载整页的情况下实现平滑过渡。
如上所述，您可能会受益于使用虚拟 DOM 的框架。在这种情况下，由于您的要求非常简单，基于组件的小型 UI 库（如 riotjs）可能就足够了。
也可能值得看看单页网站，其中的部分可以手动滚动或使用顶部导航。这肯定会满足您的两个主要优先事项。