Javascript渲染技术

Question

我正在构建一个AJAX 'web应用程序‘，一旦UI加载，对服务器的调用仅用于’数据交换‘。因此，许多UI操作将使用Javascript完成。假设Javascript使用AJAX从服务器检索由多个字段组成的一些数据。把它放到屏幕上，我可以想到多种方法-

1. 调用createElement()和appendChild()之类的方法来构建一个接口来显示检索到的数据
2. 为容器元素填充.innerHTML，然后为每个数据字段在新添加的HTML中查找一个容器并填充它。进入.innerHTML的数据可以存储在JS变量中，或者包含在隐藏的节点中，或者使用单独的AJAX调用来获取。
3. 将接口存储在隐藏节点中。克隆它(使用cloneNode())并将其放入实际容器中(使用appendChild())，然后使用方法2中的字段填充它。

而且可能有更多的方法。

您能从跨浏览器支持、性能和编码复杂性的角度来分享这些方法的优点、缺点和可能的目标吗？

有点关联的问题：通过Javascript进行客户端UI呈现是个好主意吗？

谢谢。

Answer 1

好的，让我们开始：

使用工具包

首先，您需要投入时间学习JS工具包。虽然其他人认为原生JS很好(实际上是这样)，但您不想浪费时间来构建跨浏览器工作或花费太多时间测试它的应用程序。社区里的人已经把时间花在为你做这件事上了。向开放的社区展示一些爱，并使用他们的产品。我个人使用jQuery，但也有类似于道场和YUI的。

但只要有可能仍然使用本机JS。它还是更快。

构造您的代码

在一个工具包之后，您需要一些结构。BackboneJS会处理好的。它是构建您的代码，以便您的代码是可重用的和良好的。不会在你的屏幕上变成意大利面。其他工具，如RequireJS，对于那些需要运行其他脚本的脚本也很有用。

模板:从字符串到元素

然后，您现在有了一个工具包，但仍然需要构建接口。最好使用像八字胡或车把这样的模板引擎。这些从字符串(是的，HTML的普通字符串)呈现UI的模板。只需从服务器发送模板数据，将其存储在应用程序中(在变量或浏览器区域存储中)，并在必要时重用它。不需要克隆隐藏的节点！

别碰那个DOM

至于接近DOM，只应在必要的时才触摸DOM。多姆很慢，操纵它是他**慢！这意味着您应该避免不必要的动画，避免过多的元素附加和删除，以及更改样式。查看这篇关于避免过多的回流和再油漆的文章。面对它，用户不会注意到您的框的圆角，或梯度背景，甚至不在乎您是否做了幻灯片动画或淡出。他们想要的是把工作做完，而不是喜欢烟花表演。

另外，删除屏幕上没有的任何内容。你可能最终会有20%的内容在屏幕上，80%的屏幕之外--这是对内存的浪费。

缓存:获取一次，存储，然后无限地使用

现在，您的应用程序变得越来越重，您想刮掉一些HTTP请求。您可以通过缓存来实现这一点。我通常在模板上使用缓存，这样每个新UI都不需要再次从服务器加载。您可以通过在对象中存储东西来实现这一点。您可以更进一步，在可用时使用浏览器的localStorage。

缓存并不完全适用于网络。假设您以后需要使用一些复杂的计算，或者使用未完成表单中的一些文本，也可以使用缓存。

避免HTTP请求(或至少减轻它们)

在通过使用AJAX来减轻应用程序的同时，您将不可避免地尝试在任何地方使用AJAX --不要滥用它。我经常看到有人积极地轮询服务器(每半秒或更短的时间)。这不仅会给服务器带来压力(请求太多)，还会影响浏览器(浪费处理周期)和网络(带宽)。最近有几种避免添加HTTP请求的实践：

• 图像弹簧 --将大量图像放入一幅图像并使用背景位置来改变图像的艺术。肯定胜过100个单独的HTTP请求
• 使用JSON用于文本数据- AJAX的目的是使用XML..然后出现了JSON，它是一种不依赖于平台的非胖结构化数据格式。
• 不要返回HTML格式的数据，而模板是HTML字符串，您不应该通过连线返回HTML格式的数据。让JS在客户端做JSON+templates。

Answer 2

我正在构建一个类似的应用程序(轻量级CMS)

在我看来，您采用的方法将取决于从服务器发送的数据的复杂性>客户端的操作>并返回到服务器和db。

我正在处理的cms非常基本，不需要客户端的繁重管理。TinyMCE就在它将要走的地方。

最初，我是通过从echo从<input>构建客户机管理区域，然后通过解析DOM来收集数据，然后将其转换为JSON并将其转换回服务器(我发现这段代码很有用)，这当然需要用户在编辑或添加新数据后点击“保存”。

后来我决定，我需要一些更响应性更强、更简单的东西，所以现在我正在为吉德重新实现所有的东西，当客户机在特定字段上单击"OK“时，这些AJAXes数据就会被重新实现。不需要“主保存”。

总之，这是一个非常未知的领域。我的意思是，在我看来，这个行业的人不喜欢模糊后端和前端之间的界限，找出“一个解决方案”来完成整个DB>SERVER>CLIENT>SERVER>DB操作。

我很想看看你是怎么解决问题的。

只是我的两分钱。