简化网页 优化WEB应用的方法

在最近的项目中，我发现许多过于臃肿的网页。对于内联网中的网站而言，这一般不会造成什么问题。不过，当你通过互联网向外发布网页时，性能可能是我们关心的主要问题——毕竟，多数用户并非通过高速连接访问网站。本周，我来分析一下优化WEB应用的方法。

常见问题与可能的优化方案

加载网页的时间过长，这仅仅是WEB用户的常见投诉之一，但这也是最明显的问题。WEB开发者的主要问题在于：他们认为自己的平台满足一个目标用户群。但用户的计算机配置与互联网连接速度各不相同，所以开发者应能满足用户的最低要求。

页面大小除影响下载速度以外，它还会影响WEB服务器资源，如磁盘空间和带宽资源。有许多方法可以对网页进行简化。经验证明，仅仅保留必要的内容、并尽可能地简化图像与脚本，这些都是很好的方法。

将网页保持在30-40K范围内，这是人们常用的标准。那么，该如何简化网页呢？下面的列表提供了一个可能的选择样本：

• 使用CSS：CSS能够显著简化页面设计，并减少加载时间。因为使用HTML表会增加页面中的字符，所以应使用CSS，并使页面最小。
• 使用CSS和JavaScript外部文件：这样可促进文件在页面间的再利用，并集中维护。另外，初次请求/加载后，文件即被存入缓存。
• 少用过长网页：可以使用多个（更小）页面来加速响应时间，减少文件大小。
• 仅在必要时应用特效：加载Java程序和Flash动画往往需要很长时间，用户无法处理这类内容。
• 避免使用框架：这是经验之谈，因为浏览器必须要求并下载框架，首先要求下载主框架，再要求下载其它框架。
• 考虑图像大小：图像的常用标准大小为12K，但你应把它计算在整个页面大小之内。
• 避免或减少服务器冗余传输：你可以通过AJAX方案来解决这个问题。

找出问题

处理上表中列出的网站/网页问题可能有些乏味，不过有一些免费的WEB工具可帮助你找出这些问题。

这些工具处理网页（通过URL）并确定整个页面的大小，以及网页中所使用的对象和图像等元素。在决定如何改善网页时，这些信息非常有用处。

下面是WebSiteOptimization.com上的网页分析器（Web Page Analyzer）工具所生成报告的一部分。报告很长，所以只列出以下的的分析与建议两部分：

TOTAL_HTML——恭喜！本页面中HTML文件（包括主HTML文件）的总数为1，多数浏览器都可对它进行多线程访问。减少HTTP请求是网站优化的关键。

TOTAL_OBJECTS——警告！本页面中共有16个对象——考虑把它减少到合理的范围。组合、精简并优化外部对象。用CSS翻滚代替图形翻滚来加速显示，减少HTTP请求。

TOTAL_IMAGES——小心！本页面中图片数量适中（10幅）。考虑在网站中少使用图片，或尝试在多个页面中使用同一幅图片以充分利用缓存。

TOTAL_CSS——小心！本页面中有4个外部CSS文件。考虑将其减少到合理的范围。组合、精简并优化外部CSS文件。理想情况下，在网页中应只有一个（或在高流量网页中为一个嵌套CSS）文件。

TOTAL_SIZE——恭喜！整个页面共为20067字节。在56Kbps连接速度下，本页面只要不到8秒——或4.80秒——就能加载。但仍有改善的空间。

TOTAL_SCRIPT——恭喜！本页面的外部脚本文件总数为1。外部脚本不如CSS文件可靠，因此考虑把所有脚本组合到一个脚本中，或把它们嵌套到高流量页面中。

HTML_SIZE——恭喜！这个HTML文件共有9441字节，小于20K。如果指定图片的高和宽，这个大小允许页面在8秒内——用户愿意等待页面显示的平均时间——显示出来。

IMAGES_SIZE——恭喜！图片总大小为3732字节，小于15K。理想情况下，每幅图片应小于1160字节，以满足一个TCP-IP包的要求。

SCRIPT_SIZE——恭喜！所有外部脚本共为2374字节，小于4080字节。它满足三个TCP-IP包的要求。

CSS_SIZE——小心！外部CSS总大小为5520字节，大于4080字节但小于8K。对外部文件而言，努力使其小于1160字节，以适应一个TCP-IP包的要求。考虑优化CSS，去除一些特性，将它减小到合理的大小范围。

MULTIM_SIZE——恭喜！所有外部多媒体文件总大小为0，小于4K。

如你在样本中所见，它提供了网页总大小，以及其中各种元素大小等详细内容。所生成报告中的主要内容为评估信息（恭喜，小心或警告）。样本页面的大多数结果可以接受，页面中图片和对象使用的评语为警告和/或小心。建议减少对象/图片的数量——这将减少页面的整体大小，并缩短下载时间。

结论

如果用户无法接受页面加载时间，他们会立即转向其它网站，因此网页的响应时间对于充分利用应用程序极为重要。页面大小是影响网页加载时间的重要因素。有许多方法可以限制网页的大小，包括（但不限于）使用更小的图片、CSS和外部CSS/JavaScript资源。手工应用工具对网页进行彻底分析可为我们提供简化应用页面的线索。