低带宽网站设计

Question

不久前，我们公司的一名初级开发人员被分配任务创建一个用于用户在外部输入时间表的网站。这主要是为那些居住在海外且带宽有限（因为使用卫星互联网，通常只有10KB/s或更少的带宽，并且包括10％至20％的间歇性数据包丢失）的员工使用。

最近，我被指派帮助这位初级开发人员改进网站的速度和功能，大多数是为了自己的利益，因为我通常是桌面应用程序开发人员。我注意到的一件事是网站正在使用MultiView，我想知道这是否是最佳方法。我可以理解这种做法的原因：下载整个网站一次，然后只需进行查询，根据需要显示/隐藏各个视图。但实际情况似乎并不像那样顺畅。

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

所以我的问题是：
给定上述情况，这是预期的行为吗？即一旦服务器完成操作，整个网页都应该重新下载吗？ 如果是这样，这是否是这种情况的最佳方法？为不同的功能（时间表/请假等）使用较小的单独页面会更好吗？

我知道这可能有些基于个人观点，但任何想法或帮助都将非常感激；对我们双方都有益。

- Trent

Answer 1

从记忆中来看，Multiview 只呈现其中一个视图，而不是所有视图，但由于您提到了 Multiview，这告诉我您正在使用旧的 WebForms 技术，该技术通常具有大量开销，用于保存/恢复状态。您可以尝试优化它，特别是如果您正在使用某种网格控件。

更好的方法可能是放弃 WebForms 并切换到像 MVC 这样的新技术。重写应用程序以使用 AJAX 和返回 JSON 的 Web 服务，以减少需要发送到和从服务器的数据量。使用 MVC 还将减少页面加载所需的资源数量（没有 resource.axd 等），这将有助于页面加载时间，特别是在高延迟链接上。

• 确保服务器设置为使用GZIP压缩动态页面。
• 压缩和缩小您的javascript和CSS。
• 不要在HTML中使用内联样式（style属性）（使用类或ID +子选择器）以减少HTML大小。
• 捆绑所有javascript和CSS。
• 在可能的情况下，在CSS中对图像进行精灵处理。
• 通过良好的图像优化器（例如http://kraken.io）运行您的图像。
• 确保尽可能地缓存，并正确设置缓存持续时间。
• 缩小您的HTML。
• 停止使用WebForms（或密切观察您的页面状态和控制状态）
• 查看一些SPA架构--您可以使整个应用程序“离线”，除了获取/更新/创建数据的调用之外。

最终，每个页面只需要1个HTML文件，1个CSS文件，1个Javascript文件和1个精灵表，然后每个页面都只需要一个HTML文件。

你可能还想考虑使用客户端库，如Angular或Knockout来处理视图渲染。这可以减少需要发送的流量（尽管可能会增加一个请求的数量）。

- Robert McKee

Answer 2

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

有一些技巧可以应用来减少应用程序的加载时间：

- 将Javascript文件捆绑成一个压缩的Javascript文件。 - 将CSS文件捆绑成一个CSS文件。 - 利用http缓存。您可以使用文件版本控制结合MaxAge http头，这样浏览器甚至不会询问服务器文件是否已更改。

一些有用的工具：

- Fiddler，查看哪些内容被缓存，哪些没有被缓存。 - Facebooks augmented Traffic Control。

- Jesús López

---

我刚刚写了完全相同的答案 :) - Steve Drake

如果您想编辑它以添加您的想法，我将把它转换为维基。 - Jesús López

此外，使用 Fiddler 查看正在发生的事情，不要在服务器上构建带有数据的表单，使用一个请求获取表单结构和另一个请求获取表单数据。这样可以使更多的部分被缓存。您的目标是导航到网站并在 Fiddler 中只看到 JSON 请求，其他所有内容都将被缓存。您还可以使 JavaScript 代码重试等。 - Steve Drake

我认为你应该通过ajax/angular发送数据，这样你就可以自己处理丢失连接、重新发送数据等问题，而不是通常笨重的浏览器“是否要重新提交表单数据”的方式。 - Ewan

是的，您可以使用 $http 拦截器在 Angular 中实现重试逻辑。https://dev59.com/QmIj5IYBdhLWcg3wnmTA - Jesús López

Answer 3

据我了解，对于您来说，ajax将是最佳选择。如果您想要95%的时间访问服务器并重新加载具有新元素的页面，则性能会受到影响。
因此，不要这样做，使用Ajax或Jquery进行部分重载。 Jquery提供了大量功能，可以使用ajax并重新加载网页的特定部分，而不是整个页面。 这将大大提高性能。
我还想补充的一点是，从服务器返回的响应数据包可能非常庞大。因此，不要直接从服务器抛出响应，而是在网站中实现GZip功能。 它将压缩数据包的大小，使页面加载/重新加载速度更快。
除此之外，将CSS和JS代码放置在.css和.js文件中，而不是将其放置在页面本身中（并确保从所有页面中最大限度地使用它）。 浏览器将创建这些文件的缓存版本，并重复使用它，而不是每次连接到服务器时都下载它。

- Abhinab Kanrar

Answer 4

我相信你已经找出了问题所在。如果没有进一步的优化，Multiview并不好用。如果您的网站使用了viewstate并且实现了multiview，那么这将是一个代价高昂的事情。

以下是您的选择：

为了充分利用代码，建议将方法转换成HTTP GET / POST方法，然后可以从HTML中需要的操作中单独调用。

1. 不要重新渲染整个页面，而是渲染菜单动作产生的变化内容。
2. 将页面/网站的不变部分更改为静态内容，并对静态内容应用压缩。
3. 启用页面缓存。
4. 在可能的情况下脱机缓存数据。（记住它会伴随着数据同步的开销）。

如果您正在考虑升级，请考虑HTML 5离线功能。

- Jebarson Jebamony