Javascript UI渲染技术

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,但还有其他像Dojo和YUI.

但是尽可能使用本机JS.它仍然更快.

构建您的代码

在工具包之后,您需要一些结构.BackboneJS将负责这一点.这是为了构建你的代码,以便你的代码可以重复使用......不会最终成为你屏幕上的意大利面条.其他工具(如RequireJS)对于需要运行其他脚本的脚本也很有用.

模板:从字符串到元素

然后,通过它,您现在有了一个工具包,但您仍然需要构建接口.如果你使用像Mustache或Handlebars这样的模板引擎会更好.这些从字符串呈现UI的模板(是的,HTML的纯字符串).只需从服务器发送模板数据,将其存储在您的应用程序中(在变量或浏览器localstorage中),并在必要时重复使用它.无需克隆隐藏节点!

不要触摸那个DOM

至于接近DOM,您应该只在必要时触摸DOM.DOM很慢,操纵它是他慢啊!这意味着你应该避免不必要的动画,避免过多的元素追加和删除,以及改变样式.查看本文关于避免过多的回流和重绘.面对它,用户不会注意到你的盒子的圆角或渐变背景,甚至不关心你是否做了幻灯片动画或淡出.他们想要的是完成工作而不是喜欢烟花汇演.

此外,删除屏幕上没有的任何内容.您最终可能会在屏幕上显示20%的内容,并且屏幕显示80%的折扣 - 浪费内存.

缓存:获取一次,存储,无限使用以供日后使用

现在,您的应用程序变得越来越重,您想要削减一些HTTP请求.您可以通过缓存来完成此操作.我通常主要在模板上使用缓存,这样每个新UI都不需要再次从服务器加载.您可以通过在对象中存储内容来完成此操作.您可以更进一步,并在可用时使用浏览器的localStorage.

缓存并不是网络的全部.假设您稍后要使用一些复杂的计算,或者来自未完成表单的某些文本,也可以使用缓存.

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

在使用AJAX减轻您的应用程序的同时,您将不可避免地想要在任何地方使用AJAX - 不要滥用它.通常我会看到那些积极轮询服务器的人(每半秒或更短时间).这不仅会对服务器造成压力(请求太多),还会影响浏览器(浪费处理周期)和网络(带宽).现在有几种做法可以避免添加HTTP请求:

• 图像Spriting - 将大量图像放入一个图像并使用背景位置来改变图像的艺术.肯定会击败100个单独的HTTP请求

• 将JSON用于文本数据 - AJAX意味着使用XML ..然后出现了JSON,它是一种无结构,独立于平台的结构化数据格式.

• 不要返回HTML格式的数据 - 通过免除模板(HTML 字符串),您不应该通过网络返回HTML格式的数据.让JS在客户端执行JSON +模板.