低带宽网站设计

Question

不久前，我们公司的一位初级开发人员的任务是创建一个网站，供用户在场外输入时间表。大多数情况下，这是用于居住在海外且带宽有限的员工（它的卫星互联网，所以我们已经看到500毫秒 - 600毫秒的响应时间，通常只有10KB / s或更低，包括10％ - 20％间歇性丢包） 所以这是一个充满挑战的情况......

最近，我的任务是帮助大三学生提高网站的速度和功能，主要是为了我自己的利益，因为我通常是桌面开发者。我注意到的一件事是该网站正在使用MultiView，我想知道这是否是最佳方法。我可以看到推理;下载整个网站一次，然后来回查询，根据需要显示/隐藏各种视图。除了它似乎没有那么顺利。

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

所以我的问题如下;
鉴于上述情况，这是预期的行为吗？即一旦服务器完成它的行动，是否应该重新下载整个网页？ 如果是这样，这是最适合这种情况的方法吗？为各种功能（时间表/请假/等）设置较小的单个页面会更好吗？

我知道这可能是基于意见，但任何想法或帮助都非常感谢;为了我们的利益。

Answer 1

从内存开始，Multiview只呈现其中一个视图，而不是所有视图，但是因为你提到了Multiview，它告诉我你正在使用旧的WebForms技术，它经常带来大量的开销保存/恢复状态。您可以尝试对其进行优化，尤其是在使用某种网格控件时。

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

• 确保将服务器设置为使用GZIP压缩动态页面。
• 压缩并缩小您的javascript和CSS。
• 不要在HTML中使用内联样式（样式属性）（使用类或ID +子选择器）来减少HTMLsize。
• 捆绑所有的javascript和CSS。
• 尽可能在CSS中覆盖您的图像。
• 通过http://kraken.io
等优秀的图片优化工具运行您的图片
• 确保您正在缓存任何可能的内容，并正确设置缓存持续时间。
• 缩小HTML。
• 停止使用WebForms（或观察您的页面状态，并非常密切地控制状态）
• 检查一些SPA架构 - 您可以创建整个应用程序＆＃34;离线能够＆＃34;除了调用get / update / create data之外。

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

您可能还希望使用像angular或knockout这样的客户端库来处理渲染视图。这可以减少需要发送的流量（尽管可能会增加一个请求的数量）。

Answer 2

据我了解，ajax将是您的最佳选择。如果您想要95％的时间访问服务器并使用新元素重新加载页面，那么性能会受到阻碍。
因此，不要使用Ajax或Jquery进行部分重新加载。 jquery有很多功能可以使用ajax并重新加载网页的特定部分而不是整页。它会大大提高性能 我想补充的另一件事是来自服务器的响应数据包可能是巨大的块。因此，不是直接从服务器抛出响应，而是在网站中实现GZip功能。它会压缩数据包的大小，页面加载/重新加载的速度会快得多 除此之外，将CSS和JS代码放在一些.css和.js文件中，而不是将其放在页面本身内（并确保在所有页面中使用它的最长时间）。浏览器会制作这些文件的缓存版本，并在每次要连接到服务器时重复使用它而不是下载它。

Answer 3

我相信你已经弄清楚了什么是错的。如果没有调整就实现Multiview并不好。如果您的网站使用了viewstate，并且您已经实现了多视图，那么这将是一件昂贵的事情。

以下是您的选择。 要使用大部分代码，我建议转换你的方法HTTP GET / POST方法，然后可以从html中的所需操作中单独调用它们。

1. 不要重新渲染整个页面，而是渲染在菜单操作上更改的内容。
2. 将页面/网站的不变更部分更改为静态内容，并对静态内容应用压缩。
3. 启用页面缓存。
4. 尽可能使数据脱机。 （请记住它带来了同步数据的开销）。

如果您正在考虑进行改造，请考虑HTML 5离线功能。