低带宽网站设计

Question

不久前，我们公司的一位初级开发人员的任务是创建一个网站，供用户在异地输入时间表。它主要用于居住在海外、带宽有限的员工(这是卫星互联网，所以我们已经看到了500ms - 600ms的响应时间，通常只有10KB/s或更少，包括10% - 20%的间歇性数据包丢失)。

所以这是一个具有挑战性的情况...

最近我的任务是帮助初级开发人员提高网站的速度和功能，这主要是为了我自己的利益，因为我通常是一名桌面开发人员。我注意到的一件事是网站正在使用MultiView，我想知道这是不是最好的方法。我明白其中的道理；下载整个网站一次，然后来回查询，根据需要显示/隐藏各种视图。只是它看起来并不像那样顺利工作。

95%的操作需要由服务器运行；例如，添加新的时间表-需要告知服务器，服务器进而在数据库中创建一个新条目。当服务器完成后，似乎会导致客户端重新下载整个网页，这显然是适得其反的。

因此，我的问题如下：

考虑到上述情况，这是预期的行为吗？也就是说，一旦服务器完成了它的操作，整个网页是否应该被重新下载？如果是这样的话，这是最好的方法吗？对于不同的功能(时间表/休假/等等)，有更小的单独页面是不是更好？

我知道这可能是基于观点，但任何想法或帮助都是非常感谢的；对我们两人都有好处。

Answer 1

在内存中，多视图只渲染其中一个视图，而不是所有视图，但由于您提到了多视图，这告诉我您使用的是较旧的WebForms技术，该技术通常会带来大量的开销来保存/恢复状态。您可以尝试并优化它，特别是当您使用某种网格控件时。

一个更好的方法可能是抛弃WebForms，转而使用更新的技术，比如MVC。重写应用程序，使其尽可能通过返回JSON的the服务使用AJAX，以减少需要向服务器发送和从服务器发送的数据量。使用MVC还将减少页面加载所需的资源数量(No resource.axd等)，这将有助于页面加载时间，特别是在高延迟链接上。

• 确保服务器设置为使用GZIP压缩动态页面。
• 压缩并缩小你的javascript和CSS。
• 不要在你的超文本标记语言(使用类或IDs+children选择器)中使用内联样式( HTMLsize.
• Bundle属性)来减少你所有的javascript和CSS。在CSS中通过一个好的图像优化器(如http://kraken.io
• Make )压缩你的图像的CSS
• 精灵确保你正在缓存任何你能缓存的东西。缓存持续时间是在你的超文本标记语言中设置的。
• 停止使用WebForms (或者观察你的页面状态，并将状态控制到一些SPA架构中--你也许能够让整个应用程序“离线”，除了获取/更新/创建数据的调用。

最终，每个页面应该只需要1个HTML文件，1个CSS文件，1个Javascript文件和1个sprite工作表，然后每一页都应该只需要一个HTML文件。

您可能还希望考虑使用类似angular或knockout这样的客户端库来处理渲染视图。这可以减少需要发送的通信量(尽管它可能会增加一个请求数)。

Answer 2

我认为最好的选择是带有Angularjs的SPA (Single Page App)。如果处理得当，它会大大减少http请求的数量。在任何情况下，导航都不会导致重新加载整个页面。Javascript文件、css文件等在应用程序加载时只加载一次。一旦应用程序加载到浏览器中，流量主要是来回发送JSON。

你应该使用一些技巧来减少应用程序的加载时间：

• 将file.
• Levearage文件捆绑到一个缩小的javascript文件中。
• 将css文件捆绑到一个css javascript
• 缓存中。您可以将文件版本控制与MaxAge http头结合使用，这样浏览器甚至不会询问服务器文件是否已更改。

以下是一些帮助您的工具：

• Fiddler，查看正在缓存的内容和isn't.
• Facebooks augmented Traffic Control

Answer 3

据我所知，ajax将是您的最佳选择。如果您想要访问服务器95%的次数，并使用新元素重新加载页面，那么性能将会受到影响。

因此，与其这样做，不如使用Ajax或Jquery进行部分重载。jquery有很多功能，可以使用ajax重新加载网页的特定部分，而不是整个页面。这将大大提高性能。

还有一件事我想补充的是，来自服务器的响应包可能是很大的块。因此，不是直接从服务器抛出响应，而是在网站中实现GZip功能。它将压缩数据包的大小，页面加载/重新加载将快得多。

除此之外，将您的CSS和JS代码放在某个.css和.js文件中，而不是放在页面本身中(并确保在所有页面中使用它的时间最长)。浏览器会创建这些文件的缓存版本，并在您每次连接到服务器时重新使用它，而不是下载它。