效果，隐藏的HTML或JavaScript DOM附加？

Question

我正在研究一个简单的Cordova应用程序，它有大约4种页面类型，我试图通过哪种方式来处理内部HTML模板。

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

我觉得，当我可以更新更改的部分时，将所有这些附加到DOM的页面效率很低。 但也许一个附加物是轻量级的，我不应该担心它。

Answer 1

有很多方法可以做到。 在浏览器的负载方面。 这很难说。 从您的问题来看，很难知道这些页面中有什么，您在显示什么，是实时数据，静态HTML等。

当你第一次绘制一个应用程序时，如果你来自构建多个页面网站的旧类，那么关于你的应用程序/页面如何与所有那些被塞入其中的页面以及所有数据一起运行可能会有点关注再加上代码。

答案非常好。 如果在现代浏览器中正确完成，例如Ipads，应用程序将运行接近本机性能。

你有的选择

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

2. 使用javascript路由库将网址映射到处理每个网页的代码块，这样可以更轻松地映射您的应用，并且意味着按钮只能链接到您的网页，就像真正的网站一样。 见http://projects.jga.me/routie/

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

根据我的经验，你可以将大量的节点或节点放在一个页面中并且速度很小，请记住，如果你使用类似jquery的东西并且做了很多$（“。page> .page1> .items li”）你的会有一个缓慢的应用程序。

提示

1. 使用元素ID的无处不在document.getElementById（..）在一个$（...）的循环中快100倍
2. 找到它们时缓存元素，如果需要，稍后将它们存储在内存缓存中。
3. 保持循环内码最小化。
4. 使用像http://hammerjs.github.io/这样体面的点击触摸库，并委托身体标签的所有事件或至少在每个页面上。
5. 如果您需要触摸服务器，请加载数据，首先考虑dom，稍后再设置第二台服务器。 一个好的应用程序是一个响应式应用程序，可立即响应用户。

Answer 2

我知道这已经发布了一段时间，但为了用户的缘故，我将添加我的答案。

我完全赞同MartinWebb，但我的回答将会对他的选择结果有所了解。 我目前正在开展一个类似的项目。 请注意，这个答案特别适用于cordova（以前称为phonegap）。 我的应用程序有大约5页，+ -20个不同的组件（输入，div，h1，p等）。 这是我尝试的和每个的结果：

1. jQuery是我的第一个选择，主要是因为它易于使用并减少了完成上述目标所需的代码量。 结果：我第一次尝试这种方法，虽然我会用动画和转换来加强它。 结果是一个非常无响应的应用程序。 我删除了动画和转换，但由于我的应用程序的性质，我需要多个动态添加的组件，而jQuery只是没有完成任务。
2. Css display:none和visible:hidden是我的下一个选项。 我使用javascript的dom来显示某些div。 结果：如果您没有计划在不久之后切换许多div，这是有效的，例如。 一个简单的菜单。 很快就发现这不起作用。 这也不能消除我对dom的需求。 记住document.getElementById('menu').style.display = "none"; 仍然是dom的一部分。 对我来说，这个解决方案很差。 var menu= document.createElement('div'); 是语言的一部分。 这让我想到了最后一个选择。
3. 在javascript的dom上建立一个90％的页面是我的最后一个选择。 从逻辑上讲，我无法看到600行代码如何冷却一个.innerHTML或.style.display = "block"; 但确实如此。 结果：到目前为止，它是所有解决方案中响应最快的。

我并不是说所有的网页都应该用dom附加编码，但正如我之前所说的，对于几页（<6）的cordova应用程序，使用一些组件，javascript dom附加方法将是最好的。 编码需要更长的时间，但您将获得控制和效率。 我建议用html编写你的app的主干，用javascript的dom填充和控制。

祝你好运。

Answer 3

第一个选项， <div> s with display:none; 只需很小的余地就可以提高效率，但是通过使用browserify或require.js等编译JavaScript和模板到一个文件中，您可以充分利用这两个方面。