So, I'm new to dynamic web design (my sites have been mostly static with some PHP), and I'm trying to learn the latest technologies in web development (which seems to be AJAX), and I was wondering, if you're transferring a lot of data, is it better to construct the page on the server and "push" it to the user, or is it better to "pull" the data needed and create the HTML around it on the clientside using JavaScript?
所以，我是动态网页设计的新手（我的网站大多是静态的，有些PHP），我正在尝试学习网页开发的最新技术（似乎是AJAX），我想知道，如果你要传输大量数据，最好是在服务器上构建页面并将其“推送”给用户，还是更好地“拉”所需的数据并使用JavaScript在客户端创建HTML？
More specifically, I'm using CodeIgniter as my PHP framework, and jQuery for JavaScript, and if I wanted to display a table of data to the user (dynamically), would it be better to format the HTML using CodeIgniter (create the tables, add CSS classes to elements, etc..), or would it be better to just serve the raw data using JSON and then build it into a table with jQuery? My intuition says to do it clientside, as it would save bandwidth and the page would probably load quicker with the new JavaScript optimizations all these browsers have now, however, then the site would break for someone not using JavaScript...
更具体地说，我使用CodeIgniter作为我的PHP框架，使用jQuery for JavaScript，如果我想向用户显示数据表（动态），那么使用CodeIgniter格式化HTML会更好吗（创建表格，将CSS类添加到元素等。），或者更好的方法是使用JSON提供原始数据，然后使用jQuery将其构建到表中？我的直觉说要做客户端，因为它可以节省带宽，并且页面可能会加快所有这些浏览器现有的新JavaScript优化，然而，对于不使用JavaScript的人来说网站会破坏...
Thanks for the help
谢谢您的帮助
6 个解决方案
#1
9
Congratulations for moving to dynamic sites! I would say the following conditions have to be met for you to do client-side layout (it goes without saying that you should always be doing things like filtering DB queries and controlling access rights server side):
恭喜您搬到动态网站！我会说你必须满足以下条件才能进行客户端布局（不用说你应该总是做过滤数据库查询和控制访问权限服务器端）：
- Client browser and connection capabilities are up to snuff for the vast majority of use cases
- 客户端浏览器和连接功能可以满足绝大多数用例的要求
- SEO and mobile/legacy browser degradation are not a big concern (much easier when you synthesize HTML server side)
- 搜索引擎优化和移动/遗留浏览器退化不是一个大问题（合成HTML服务器端时更容易）
Even then, doing client-side layout makes testing a lot harder. It also produces rather troublesome synchronization issues. With an AJAX site that loads partials, if part of the page screws up, you might never know, but with regular server-side composition, the entire page is reloaded on every request. It also adds additional challenges to error/timeout handling, session/cookie handling, caching, and navigation (browser back/forward).
即使这样，做客户端布局也会使测试变得更加困难。它还会产生相当麻烦的同步问题。使用加载部分内容的AJAX站点，如果页面的一部分搞砸了，您可能永远不会知道，但是通过常规的服务器端组合，每个请求都会重新加载整个页面。它还为错误/超时处理，会话/ cookie处理，缓存和导航（浏览器后退/前进）添加了额外的挑战。
Finally, it's a bit harder to produce perma-URLs in case someone wants to share a link with their friends or bookmark a link for themselves. I go over a workaround in my blog post here, or you can have a prominent "permalink" button that displays a dynamically rendered permalink.
最后，如果有人想与朋友分享链接或为自己添加链接，那么制作perma-URL有点困难。我在这里的博客文章中查看了一个解决方法，或者您可以使用一个突出的“固定链接”按钮来显示动态呈现的永久链接。
Overall, especially when starting out, I would say go with the more kosher, better supported, more tutorialed, traditional approach of putting together the HTML server side. Then dip in some AJAX here and there (maybe start out with form validation or auto-completion), and then move on up.
总的来说，特别是在开始的时候，我会说更合适的kosher，更好的支持，更多的tutorialed，传统的方法来整合HTML服务器端。然后在这里和那里浸入一些AJAX（可能从表单验证或自动完成开始），然后继续前进。
Good luck!
祝你好运！
#2
4
It is much better to do the heavy lifting on the server side.
在服务器端进行繁重的工作要好得多。
In CodeIgniter you create a view, looping through all the rows in the table adding in the classes or whatever else you would need. There is no reason at all to do this in Javascript.
在CodeIgniter中，您可以创建一个视图，循环遍历表中的所有行，添加类或您需要的任何其他内容。在Javascript中完全没有理由这样做。
Javascript is a sickly abused language with unfortunate syntax. Why on earth would you want to load a page, and then issue a AJAX call to load up some JSON objects to push into a table is beyond me. There is little reason to do that.
Javascript是一种病态滥用的语言，具有不幸的语法。为什么你想要加载一个页面，然后发出一个AJAX调用来加载一些JSON对象以推入一个表格超出我的范围。没有理由这样做。
Javascript (and jQuery) is for end user enhancement. Make things slide, flash, disappear! It is not for data processing in even the mildest of loads. The end user experience would be crap because you're relying on their machine to process all the data when you have a server that is infinitely more capable and even designed for this specifically.
Javascript（和jQuery）用于最终用户增强。使事物滑动，闪烁，消失！即使是最轻微的负载也不适用于数据处理。最终用户体验将是废话，因为当您拥有一台功能无限且甚至专门为此设计的服务器时，您依靠他们的机器来处理所有数据。
#3
3
It's better to do as much as possible on the server-side because 1) you don't know if the client will even have JavaScript enabled and 2) you don't know how fast the client-side processing will be. If they have a slow computer and you make them process the entire site, they're going to get pretty ticked off. JavaScript/jQuery is only supposed to be used to enhance your site, not process it.
最好尽可能在服务器端做，因为1）你不知道客户端是否会启用JavaScript，2）你不知道客户端处理的速度有多快。如果他们的计算机速度很慢而你让他们处理整个网站，那么他们就会被淘汰。 JavaScript / jQuery仅用于增强您的网站，而不是用于处理它。
#4
2
You got the trade-off correctly. However, keep in mind that you can activate compression in the server side, which will probably make adding repetitive markup to format the table a small bandwidth cost.
你得到了正确的权衡。但是，请记住，您可以在服务器端激活压缩，这可能会增加重复标记，从而以较小的带宽成本格式化表。
Keep also in mind that writing Javascript that works in all browsers (including hand-helds) is more complicated than doing the same server side in PHP. And don't forget that the "new JavaScript optimizations" do not apply to the same extent to browsers of handheld devices.
还要记住，编写适用于所有浏览器（包括手持设备）的Javascript比在PHP中使用相同的服务器端更复杂。并且不要忘记“新的JavaScript优化”不适用于手持设备的浏览器。
#5
2
It depends on your target market and the goal of your site.
这取决于您的目标市场和您网站的目标。
I strongly believe in using the client side where ever you can to offload work from the server. Obviously its important you do it correctly so it remains fast for the end user.
我坚信使用客户端可以从服务器卸载工作。显然，重要的是你正确地做到这一点，因此它对最终用户来说仍然很快。
On sites where no-js support is important (public websites, etc), you can have fallbacks to the server. You end up doubling code in these situations but the gains are very beneficial.
在no-js支持很重要的站点（公共网站等）上，您可以回退到服务器。在这些情况下，您最终会将代码加倍，但收益非常有益。
For advanced web applications, you can decided if making JS a requirement is worth the trade of losing a (very) few users. For me, if I have some control over the target market, I make it a requirement and move on. It almost never makes sense to spend a ton of time to support a small percentage of potential audience. (Unless the time is spent on accessibility which is different, and VERY important regardless of how many people fit into this group on your site.)
对于高级Web应用程序，您可以决定将JS作为一项要求是否值得失去（非常）少数用户的交易。对我来说，如果我对目标市场有一定的控制权，我就会把它作为一项要求并继续前进。花费大量时间来支持一小部分潜在受众几乎没有任何意义。 （除非花费在可访问性上的时间不同，并且非常重要，无论您的网站上有多少人适合此群组。）
The important thing to remember, is touch the DOM as little as possible to get the job done. This often means building up an HTML string and using a single append action to add it to the page vs looping through a large table and adding one row at a time.
需要记住的重要一点是尽可能少地触摸DOM以完成工作。这通常意味着构建一个HTML字符串并使用单个追加操作将其添加到页面中，然后循环遍历一个大表并一次添加一行。
#6
2
I do a great deal of AJAX app development and I can tell you this from my experience. a good balance between the two is key.
我做了大量的AJAX应用程序开发，我可以根据自己的经验告诉你。两者之间的良好平衡是关键。
do the raw data server-side but use javascript to make any modifications that you would need to it. such as paging, column sorting, row striping, etc.
做原始数据服务器端，但使用javascript进行您需要的任何修改。例如分页，列排序，行条带化等。
I absolutely love doing everything in AJAX heh.. but there are some short falls to doing it using AJAX, and that's SEO. search engines do not read javascript, so for the sake of your website's page rank, I would say have all data served up server side and then formatted and made look cool client-side.
我非常喜欢在AJAX中做所有事情......但是使用AJAX做这件事有一些短暂的下降，那就是搜索引擎优化。搜索引擎不读取javascript，所以为了你的网站的页面排名，我会说所有数据服务器服务器端，然后格式化，使客户端看起来很酷。
The reason I love AJAX so much is because it drastically speeds up your APP usage by the user as it only loads the data you need to load where you need to load it, versus load the entire page every time you do something... you can do a whole bunch of stuff, such as hide/show rows/columns (we are talking about table manipulation here because you mentioned a table) and even with these show/hide actions add delete actions where when you click a delete row or button it deletes that row not only visually but in the database all done via AJAX calls to server-side code.
我非常喜欢AJAX的原因是因为它大大加快了用户对APP的使用速度，因为它只加载你需要加载它所需的数据，而不是每次你做某事时加载整个页面......你可以做一大堆的东西，比如隐藏/显示行/列（我们在这里谈论表操作，因为你提到了一个表），甚至用这些显示/隐藏操作添加删除操作，当你点击删除行或按钮它不仅可以直观地删除该行，而且还可以通过对服务器端代码的AJAX调用在数据库中删除该行。
in short.
简而言之。
raw data: server-side sending to the client the raw data in html layout (tables for table structured data, however I do everything else in divs and other flexible html tags, only do tables for column/row style data)
原始数据：服务器端向客户端发送html布局中的原始数据（表结构化数据的表，但是我在div和其他灵活的html标签中执行其他所有操作，只为列/行样式数据执行表）
data formatting: client-side which also includes any means of interacting with the data. adding to it, deleting from it, sorting it differently etc. This achieves two things. SEO, and User Experience (UX).
数据格式化：客户端，它还包括与数据交互的任何方式。添加到它，从中删除，以不同的方式排序等。这实现了两件事。 SEO和用户体验（UX）。
#1
9
Congratulations for moving to dynamic sites! I would say the following conditions have to be met for you to do client-side layout (it goes without saying that you should always be doing things like filtering DB queries and controlling access rights server side):
恭喜您搬到动态网站！我会说你必须满足以下条件才能进行客户端布局（不用说你应该总是做过滤数据库查询和控制访问权限服务器端）：
- Client browser and connection capabilities are up to snuff for the vast majority of use cases
- 客户端浏览器和连接功能可以满足绝大多数用例的要求
- SEO and mobile/legacy browser degradation are not a big concern (much easier when you synthesize HTML server side)
- 搜索引擎优化和移动/遗留浏览器退化不是一个大问题（合成HTML服务器端时更容易）
Even then, doing client-side layout makes testing a lot harder. It also produces rather troublesome synchronization issues. With an AJAX site that loads partials, if part of the page screws up, you might never know, but with regular server-side composition, the entire page is reloaded on every request. It also adds additional challenges to error/timeout handling, session/cookie handling, caching, and navigation (browser back/forward).
即使这样，做客户端布局也会使测试变得更加困难。它还会产生相当麻烦的同步问题。使用加载部分内容的AJAX站点，如果页面的一部分搞砸了，您可能永远不会知道，但是通过常规的服务器端组合，每个请求都会重新加载整个页面。它还为错误/超时处理，会话/ cookie处理，缓存和导航（浏览器后退/前进）添加了额外的挑战。
Finally, it's a bit harder to produce perma-URLs in case someone wants to share a link with their friends or bookmark a link for themselves. I go over a workaround in my blog post here, or you can have a prominent "permalink" button that displays a dynamically rendered permalink.
最后，如果有人想与朋友分享链接或为自己添加链接，那么制作perma-URL有点困难。我在这里的博客文章中查看了一个解决方法，或者您可以使用一个突出的“固定链接”按钮来显示动态呈现的永久链接。
Overall, especially when starting out, I would say go with the more kosher, better supported, more tutorialed, traditional approach of putting together the HTML server side. Then dip in some AJAX here and there (maybe start out with form validation or auto-completion), and then move on up.
总的来说，特别是在开始的时候，我会说更合适的kosher，更好的支持，更多的tutorialed，传统的方法来整合HTML服务器端。然后在这里和那里浸入一些AJAX（可能从表单验证或自动完成开始），然后继续前进。
Good luck!
祝你好运！
#2
4
It is much better to do the heavy lifting on the server side.
在服务器端进行繁重的工作要好得多。
In CodeIgniter you create a view, looping through all the rows in the table adding in the classes or whatever else you would need. There is no reason at all to do this in Javascript.
在CodeIgniter中，您可以创建一个视图，循环遍历表中的所有行，添加类或您需要的任何其他内容。在Javascript中完全没有理由这样做。
Javascript is a sickly abused language with unfortunate syntax. Why on earth would you want to load a page, and then issue a AJAX call to load up some JSON objects to push into a table is beyond me. There is little reason to do that.
Javascript是一种病态滥用的语言，具有不幸的语法。为什么你想要加载一个页面，然后发出一个AJAX调用来加载一些JSON对象以推入一个表格超出我的范围。没有理由这样做。
Javascript (and jQuery) is for end user enhancement. Make things slide, flash, disappear! It is not for data processing in even the mildest of loads. The end user experience would be crap because you're relying on their machine to process all the data when you have a server that is infinitely more capable and even designed for this specifically.
Javascript（和jQuery）用于最终用户增强。使事物滑动，闪烁，消失！即使是最轻微的负载也不适用于数据处理。最终用户体验将是废话，因为当您拥有一台功能无限且甚至专门为此设计的服务器时，您依靠他们的机器来处理所有数据。
#3
3
It's better to do as much as possible on the server-side because 1) you don't know if the client will even have JavaScript enabled and 2) you don't know how fast the client-side processing will be. If they have a slow computer and you make them process the entire site, they're going to get pretty ticked off. JavaScript/jQuery is only supposed to be used to enhance your site, not process it.
最好尽可能在服务器端做，因为1）你不知道客户端是否会启用JavaScript，2）你不知道客户端处理的速度有多快。如果他们的计算机速度很慢而你让他们处理整个网站，那么他们就会被淘汰。 JavaScript / jQuery仅用于增强您的网站，而不是用于处理它。
#4
2
You got the trade-off correctly. However, keep in mind that you can activate compression in the server side, which will probably make adding repetitive markup to format the table a small bandwidth cost.
你得到了正确的权衡。但是，请记住，您可以在服务器端激活压缩，这可能会增加重复标记，从而以较小的带宽成本格式化表。
Keep also in mind that writing Javascript that works in all browsers (including hand-helds) is more complicated than doing the same server side in PHP. And don't forget that the "new JavaScript optimizations" do not apply to the same extent to browsers of handheld devices.
还要记住，编写适用于所有浏览器（包括手持设备）的Javascript比在PHP中使用相同的服务器端更复杂。并且不要忘记“新的JavaScript优化”不适用于手持设备的浏览器。
#5
2
It depends on your target market and the goal of your site.
这取决于您的目标市场和您网站的目标。
I strongly believe in using the client side where ever you can to offload work from the server. Obviously its important you do it correctly so it remains fast for the end user.
我坚信使用客户端可以从服务器卸载工作。显然，重要的是你正确地做到这一点，因此它对最终用户来说仍然很快。
On sites where no-js support is important (public websites, etc), you can have fallbacks to the server. You end up doubling code in these situations but the gains are very beneficial.
在no-js支持很重要的站点（公共网站等）上，您可以回退到服务器。在这些情况下，您最终会将代码加倍，但收益非常有益。
For advanced web applications, you can decided if making JS a requirement is worth the trade of losing a (very) few users. For me, if I have some control over the target market, I make it a requirement and move on. It almost never makes sense to spend a ton of time to support a small percentage of potential audience. (Unless the time is spent on accessibility which is different, and VERY important regardless of how many people fit into this group on your site.)
对于高级Web应用程序，您可以决定将JS作为一项要求是否值得失去（非常）少数用户的交易。对我来说，如果我对目标市场有一定的控制权，我就会把它作为一项要求并继续前进。花费大量时间来支持一小部分潜在受众几乎没有任何意义。 （除非花费在可访问性上的时间不同，并且非常重要，无论您的网站上有多少人适合此群组。）
The important thing to remember, is touch the DOM as little as possible to get the job done. This often means building up an HTML string and using a single append action to add it to the page vs looping through a large table and adding one row at a time.
需要记住的重要一点是尽可能少地触摸DOM以完成工作。这通常意味着构建一个HTML字符串并使用单个追加操作将其添加到页面中，然后循环遍历一个大表并一次添加一行。
#6
2
I do a great deal of AJAX app development and I can tell you this from my experience. a good balance between the two is key.
我做了大量的AJAX应用程序开发，我可以根据自己的经验告诉你。两者之间的良好平衡是关键。
do the raw data server-side but use javascript to make any modifications that you would need to it. such as paging, column sorting, row striping, etc.
做原始数据服务器端，但使用javascript进行您需要的任何修改。例如分页，列排序，行条带化等。
I absolutely love doing everything in AJAX heh.. but there are some short falls to doing it using AJAX, and that's SEO. search engines do not read javascript, so for the sake of your website's page rank, I would say have all data served up server side and then formatted and made look cool client-side.
我非常喜欢在AJAX中做所有事情......但是使用AJAX做这件事有一些短暂的下降，那就是搜索引擎优化。搜索引擎不读取javascript，所以为了你的网站的页面排名，我会说所有数据服务器服务器端，然后格式化，使客户端看起来很酷。
The reason I love AJAX so much is because it drastically speeds up your APP usage by the user as it only loads the data you need to load where you need to load it, versus load the entire page every time you do something... you can do a whole bunch of stuff, such as hide/show rows/columns (we are talking about table manipulation here because you mentioned a table) and even with these show/hide actions add delete actions where when you click a delete row or button it deletes that row not only visually but in the database all done via AJAX calls to server-side code.
我非常喜欢AJAX的原因是因为它大大加快了用户对APP的使用速度，因为它只加载你需要加载它所需的数据，而不是每次你做某事时加载整个页面......你可以做一大堆的东西，比如隐藏/显示行/列（我们在这里谈论表操作，因为你提到了一个表），甚至用这些显示/隐藏操作添加删除操作，当你点击删除行或按钮它不仅可以直观地删除该行，而且还可以通过对服务器端代码的AJAX调用在数据库中删除该行。
in short.
简而言之。
raw data: server-side sending to the client the raw data in html layout (tables for table structured data, however I do everything else in divs and other flexible html tags, only do tables for column/row style data)
原始数据：服务器端向客户端发送html布局中的原始数据（表结构化数据的表，但是我在div和其他灵活的html标签中执行其他所有操作，只为列/行样式数据执行表）
data formatting: client-side which also includes any means of interacting with the data. adding to it, deleting from it, sorting it differently etc. This achieves two things. SEO, and User Experience (UX).
数据格式化：客户端，它还包括与数据交互的任何方式。添加到它，从中删除，以不同的方式排序等。这实现了两件事。 SEO和用户体验（UX）。