最近，我想出了一些关于如何提高整体性能的想法
一个 Web 应用程序，为什么不让它在客户端完全生成，而不是从 Web 服务器生成准备显示的 html 页面。
这样做，只需将纯数据（在我的例子中是 JSON 格式的数据）发送到浏览器。
这会将 html 生成工作从服务器转移到客户端浏览器，
减少发送回用户的响应数据包的大小。
经过一番研究，我发现这个框架（http://beebole-apps.com/pure/）
和我做同样的事情。
我想知道的是这样做的利弊。
对于 Web 服务器来说，它肯定更快更好，并且使用现代浏览器，Javascript 代码可以快速运行，因此可以快速完成页面生成。
这种方法的缺点可能是 SEO。
我不确定像谷歌这样的搜索引擎是否会适当地索引我的网站。
你能告诉我这个方法的缺点是什么吗？
Ps: 我还附上了示例代码来帮助描述该方法，如下所示：
在 head 中，简单的 javascript 代码将这样编写：
<script type='javascript' src='html_generator.js'/>
<script>
function onPageLoad(){
htmlGenerate($('#data').val());
}
</script>
在 body 中，仅存在一个元素，仅用作数据容器，如下：
<input type='hidden' id='data' value='{"a": 1, "b": 2, "c": 3}'/>
当浏览器渲染文件时，将调用 html_generator.js 中的 htmlGenerate 函数，并在该函数中生成整个 html 页面。请注意，html_generator.js 文件可能很大，因为它包含大量 html 模板，但由于它可以缓存在浏览器中，因此只会下载一次。
Recently, I have come up with some idea about how to improve the overall performance for
a web application in that instead of generating a ready-to-show html page from the web server, why not let it be fully generated in the client side.
Doing it this way, only pure data (in my case is data in JSON format) needs to be sent to the browser.
This will offload the work of html generation from the server to the client's browser and
reduce the size of the response packet sent back to users.
After some research, I have found that this framework (http://beebole-apps.com/pure/)
does the same thing as mine.
What I want to know is the pros and cons of doing it this way.
It is surely faster and better for web servers and with modern browser, Javascript code can run fast so page generation can be done fast.
What should be a downside for this method is probably for SEO.
I am not sure if search engines like Google will appropriately index my website.
Could you tell me what the downside for this method is?
Ps: I also attached sample code to help describe the method as follows:
In the head, simple javascript code will be written like this:
<script type='javascript' src='html_generator.js'/>
<script>
function onPageLoad(){
htmlGenerate($('#data').val());
}
</script>
In the body, only one element exist, used merely as a data container as follows:
<input type='hidden' id='data' value='{"a": 1, "b": 2, "c": 3}'/>
When the browser renders the file, htmlGenerate function which is in html_generator.js will be called and the whole html page will be generated in this function. Note that the html_generator.js file can be large since it contains a lot of html templates but since it can be cached in the browser, it will be downloaded once and only once.
发布评论
评论（5）
缺点
总而言之，
如果您只是为了提高速度，则不建议使用此方法。然而，这通常是在 Web 应用程序中完成的，用户停留在同一页面上，但您可能最好使用现有框架之一来实现此目的，例如 backbone.js，并通过遵循 Google 的 hashbang 指南 或 HTML5 PushState （由 @rohk 建议）。
如果您只是寻求性能，并且您的应用程序并不严格需要这样工作，请不要这样做。但如果您确实这样做，那么请确保以标准化方式进行，以便保持快速和可索引。
Downsides
All in all
This method is not recommended if you're doing it only for speed increase. However, it is often done in web applications, where users stay on the same page, but then you would probably be better off using one of the existing frameworks for this, such as backbone.js, and make sure it remains crawlable by following Google's hashbang guidelines or HTML5 PushState (as suggested by @rohk).
If it's just performance you're looking for, and your app doesn't strictly need to work like this, don't do it. But if you do go this way, then make sure you do it in the standardized way so that it remains fast and indexable.
客户端模板通常用于单页应用程序。
您必须权衡利弊：
优点：
缺点：
如果您要这样做，我建议您查看 Backbone.js。
您可以在这里找到教程和示例：http:// www.quora.com/What-are-some-good-resources-for-Backbone-js
SPA 示例：
另请查看此答案：https://stackoverflow.com/a/8372246/467003
Client-side templating is often used in Single Page Applications.
You have to weight the pros and cons:
Pros :
Cons :
If you are going this way I recommend that you look at Backbone.js.
You can find tutorials and examples here : http://www.quora.com/What-are-some-good-resources-for-Backbone-js
Examples of SPA :
Also look at this answer : https://stackoverflow.com/a/8372246/467003
哎呀。
jQuery 模板更接近您的想法。 Sanity 说你应该有一些可以轻松随意修改的 HTML 模板。您想要的是可维护性，而不是让您在最糟糕的噩梦中翻来覆去的字符串连接。
你可以继续这种疯狂，但你最终会以艰难的方式学习。我让您首先使用 jQuery 模板和纯代码方式尝试一些原型。我的朋友，理智一定会战胜你，我说这是因为你尝试了一段时间的方式。 :)
也可以使用 AJAX 动态加载您需要的模板内容。如果您拥有一种灵丹妙药，需要在单个请求中下载每个可以想到的模板，这是没有意义的。
Yikes.
jQuery templates are closer to what you are thinking. Sanity says you should have some HTML templates that you can easily modify at will. You want MAINTAINABILITY not string concatenations that keep you tossing and turning in your worst nightmares.
You can continue with this madness but you will end up learning the hard way. I employ you to first try some protypes using jQuery templates and your pure code way. Sanity will surely overcome you my friend and I say that coming from trying your way for a time. :)
Its possible to load content in dynamically of the template you need as well using AJAX. It doesn't make sense that you will have a panacea approach where every single conceivable template is needed to be downloaded in a single request.
优点？我实在想不出有什么办法。您说在网络服务器中会更容易，但提供 HTML 正是网络服务器的设计目的。
缺点？在构建网站时，它几乎违背了所有最佳实践：
归根结底，HTML 是一个用于显示内容的出色工具。 JavaScript 是添加交互的好方法。像你建议的那样将它们混合起来是疯狂的，只会导致问题。
The pros? I really can't think of any. You say that it will be easier in the webserver, but serving HTML is what web servers are designed to do.
The cons? It goes against just about every best practise when it comes to building websites:
Ultimately HTML is a great tool for displaying content. JavaScript is a great way of adding interaction. Mixing them up like you suggest is just nuts and will only cause problems.
缺点
优点
如果 SEO 对您来说并不重要并且您的大多数用户都使用 Javascript，您可以创建一个 单页应用程序。它不会减少太多负载，但可以在页面上创建更快的工作流程。
顺便说一句：我不会将所有模板打包在一个文件中。对于大型项目来说它太大了。
Cons
Pros
If SEO is not important for you and most of your user have Javascript you could create a Single Page Applications. It will not reduce your load very much but it can create a faster workflow on the page.
Btw: I would not pack all templates in one file. It would be too big for big projects.