低带宽网站设计

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中使用内联样式(style属性)(使用类或ID +子选择器)来减少HTMLsize.
• 捆绑所有的JavaScript和CSS.
• 尽可能在CSS中扫描图像.
• 通过像http://kraken.io这样的优秀图像优化器运行您的图像
• 确保您正在缓存任何可能的内容,并正确设置缓存持续时间.
• 缩小您的HTML.
• 停止使用WebForms(或观察您的页面状态,并非常密切地控制状态)
• 检查一些SPA体系结构 - 除了调用get/update/create数据之外,您可以使整个应用程序"脱机".

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

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