javascript - 通过操作 DOM w 更改内容。 Javascript 与创建新的 HTML/CSS 页面 : which is more efficient?

标签 javascript html css performance dom-manipulation

<分区>

我正在构建一个非常简单的网站，其中包含几个不同的部分，例如“关于我们”、“图片”和“联系方式”。

我想知道哪个更有效(更好的性能和更短的响应时间):

1.使用 Javascript 操作 DOM 并在客户单击菜单中的其中一项(“关于我们”、“联系方式”等)或...时更改主要部分的内容

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

提前致谢!

最佳答案

对于这样的决定，这就是为什么像 Google Polymer 这样的前端框架, AngularJs , React等被创建。

显然，页面更改(如 2. 中所建议)将比 1 慢得多，因为:

整个页面必须重新加载(dom 被清除，然后重新构建)
必须重新应用所有共享样式/绑定(bind)
发出重复请求的开销(将网络延迟引入页面加载)

但是，尽管 1 看起来像是一个吸引人的设计选择，但执行未优化的 dom 操作(通过 jQuery)实际上可能会进一步损害性能，因为您会引入大量的颠簸和不必要的中间步骤。

像 React 这样的框架，通过模拟一个虚拟 DOM 来处理这个问题，其中:

所有操作都在内存中计算
然后优化更改
只有更改的差异会应用到实际的 DOM

现代网络组件框架(如 Polymer、x-tag)通过使用声明性 html 语法将数据绑定(bind)到 HTML/JS 行为。优化工作:

利用影子 dom 执行操作和样式仅在该元素的范围内
将所有事件静态绑定(bind)到创建的元素(不需要重复偶数回调)
静态引用组件中的所有 Id' 元素
- 与 jQuery 的 O(n) 方法相比，这导致 O(1) 选择速度
一次编写，随处使用/定制

关于javascript - 通过操作 DOM w 更改内容。 Javascript 与创建新的 HTML/CSS 页面 : which is more efficient?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43187272/

上一篇：html - 移动 View 中我的网站背景右侧和底部不需要的空白

下一篇：html - 右对齐 FLEXBOX DIV 中的元素？

javascript - 如果以空格开头或结尾，则正则表达式匹配

javascript - jQuery 动画背景颜色在 IE 中不起作用

jquery - 切换时 Bootstrap 导航栏折叠是白色的

jquery - 使div部分着色

html - 当3个div没有空间时并排放置3个div，如何只替换第三个？

javascript - 单击事件后输入值内保留 2 位小数

javascript - 如何使用 css 或 javascript 来实现

javascript - 访问 HTMLcollection 时获取 null

javascript - Raphael Canvas 覆盖 css