javascript - 效率、隐藏的 HTML 或 JavaScript DOM 附加？

Question

我正在开发一个包含大约 4 种页面类型的简单 Cordova 应用程序，我正在尝试思考哪种是处理内部 HTML 模板的更好方法。

1. 将隐藏的 HTML 硬编码到由我的 JS 隐藏和填充/显示的 HTML 文件中。
2. 使用 JS 模板系统并在 DOM 中添加和删除。

我觉得将所有内容附加到页面的 DOM 是低效的，因为我只能更新发生变化的部分。但也许 append 足够轻量级，我不应该担心它。

Answer 1

您可以通过多种方式做到这一点。就浏览器的负载而言。这很难说。从你的问题中很难知道这些页面中有什么，你在显示什么，是实时数据，静态 html 等。

当你第一次设计一个应用程序时，如果你来自构建多页面网站的老一辈，你可能会有点担心你的应用程序/页面在将所有这些页面塞进一个页面时的运行情况，并且所有这些数据加上代码。

答案是，非常好。如果在现代浏览器(例如 Ipad)中正确完成，该应用程序将以接近 native 的性能运行。

你的选择是

1. 将所有页面映射到一个 HTML 文档中。使用 css display:none 隐藏每个页面内容，使用 css 动画、淡入淡出或仅显示: block 将它们翻转到 View 中。

2. 使用 javascript 路由库将 url 映射到处理每个页面的代码块，这使得映射您的应用程序变得更加容易，并且意味着按钮可以链接到您的页面，就像一个真正的网站。见http://projects.jga.me/routie/

3. 将所有页面模板构建到一个页面中会使编码变得困难，随着页面变得巨大，考虑将每个页面的内部内容分解成单独的文件，然后您可以为每个页面持有者提供一个 url 并使用用于动态加载页面的小型 xhr 请求，加载后您可以将其缓存到内存甚至本地存储中，具体取决于您是在关闭时将其删除还是将其隐藏。

根据我的经验，您可以将大量的数字或节点放入一个页面中并且速度下降很小，请记住，如果您使用 jquery 之类的东西并执行大量 $(".page > .page1 > .items li ") 你的应用程序会很慢。

提示

1. 在任何地方使用元素 ID document.getElementById(..) 在循环中比 $(...) 快 100 倍
2. 在找到元素时缓存元素，如果以后需要它们，将它们存储在内存缓存中。
3. 尽量减少 for 循环内部代码。
4. 使用像http://hammerjs.github.io/ 这样的不错的点击触摸库并委托(delegate) body 标记的所有事件或至少在每个页面上。
5. 如果您需要接触服务器、加载数据，请首先考虑 dom，然后再考虑设备和服务器。一个好的应用是响应式应用，可以立即响应用户。