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

Question

我正在研究一个包含大约4种页面类型的简单Cordova应用程序，我正在尝试思考哪种方法可以更好地处理内部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＆gt; .page1＆gt ;.项目li“）你的应用程序会很慢。

<强>提示

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

Answer 2

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

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

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. 建立一个页面90％的javascript＆＃39; dom是我的最后一个选择。从逻辑上讲，我无法看到600行代码如何冷却一个.innerHTML或.style.display = "block";，但确实如此。 结果：这是迄今为止所有解决方案中响应最快的。

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

祝你好运。

Answer 3

使用<div>的第一个选项display:none;可以稍微提高效率，但是通过使用某些东西将JavaScript和模板一起编译为单个文件，您可以充分利用这两个方面比如browserify或require.js。