Javascript UI渲染技术

好吧，让我们开始吧：

使用工具包

首先，您需要花费时间学习JS工具包。虽然其他人认为原生JS很好（事实确实如此），但你不想浪费时间构建无法跨浏览器运行的应用程序，也不想花太多时间测试它。社区中的人已经为你投入了时间。向开放的社区表达一些爱，并使用他们的产品。我个人使用jQuery，但也有其他类似Dojo和YUI的工具。

但仍然尽可能使用原生JS。它仍然更快。

构造代码

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

模板：从字符串到元素

然后，有了它，您现在有了一个工具包，但仍需要构建接口。如果您使用Mustache或Handlebars这样的模板引擎，效果会更好。这些从字符串（是的，HTML的纯字符串）为UI呈现模板。只需从服务器发送模板数据，将其存储在应用程序中（在变量或浏览器本地存储中），并在必要时重用它。无需克隆隐藏节点！

不要碰那个DOM

至于接近DOM，只有在必要时才应该触摸DOM。DOM很慢，操纵它很慢！这意味着您应该避免不必要的动画，避免过多的元素附加和移除，以及更改样式。查看这篇关于避免过多回流和重新喷漆的文章。面对现实，用户不会注意到你方框的圆角或渐变背景，甚至不在乎你是做了幻灯片动画还是淡出。他们想要的是完成任务，而不是喜欢烟火表演。

此外，删除任何不在屏幕上的内容。你可能会在屏幕上看到20%的内容，在屏幕外看到80%的内容——这是浪费内存。

缓存：获取一次，存储，以后无限使用

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

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

避免HTTP请求（或者至少减轻它们）

当你使用AJAX来增强你的应用程序时，你不可避免地会被诱惑在任何地方使用AJAX——不要滥用它。我经常看到有人（每隔半秒或更短的时间）对服务器进行激烈的轮询。这不仅会使服务器（请求过多）紧张，还会使浏览器（浪费处理周期）和网络（带宽）紧张。这些天有几种做法可以避免添加HTTP请求：

• 图像精灵-将许多图像放在一个图像中，并使用背景位置更改图像的艺术。肯定胜过100个单独的HTTP请求

• 将JSON用于文本数据-AJAX旨在使用XML。。然后出现了JSON，这是一种无脂肪、独立于平台的结构化数据格式。

• 不返回HTML格式的数据-不包括HTML字符串的模板，您永远不应该通过连线返回HTML格式数据。让JS在客户端做JSON+模板。

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

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

我正在做的cms是非常基本的，不需要在客户端进行大量的操作。TinyMCE已经走到了尽头。

最初，我通过从php中echo和<input>来构建客户端管理区域，然后通过解析DOM来收集数据，将其转换为JSON和AJAX并返回到服务器（我发现这段代码非常有用）当然，这需要用户在编辑或添加新数据后点击"保存"。

后来我决定，我需要一个比这更快速、更简单的东西，所以我现在正在为Jedit重新实现一切，只要客户端在特定字段上点击"OK"，就会AJAX数据。不需要"主保存"。

总之，这确实是一个相当未知的领域。我的意思是，在我看来，业内人士不喜欢模糊后端和前端之间的界限，并找到"一个解决方案"来完成整个DB>SERVER>CLIENT>SERVER>DB操作。

我很想看看你是如何解决问题的。

只有我的2美分。