尽可能减少对象

发布：2018-07-12 18:57:41 浏览：4800

尽可能减少页面上的对象。所有性能至关重要的Web页面。减少或合并对象，但要与最大同时连接数进行平衡；口测试修改过的页面，确保性能提高了。对象数量会影响下载时间。对象和提供它们的方法之间的平衡是一门学问，需要适时调整。这是客户的可用性、有用性和性能之间的平衡。

web页面是由各种各样的对象(HTML、CSS、图像、Javascript等)构成的，这就使得浏览器能够独立甚至并行地下载它们。提高Web页面的性能，从而提高扩展性(为一个页面提供的对象少，就意味着服务器能够多服务几个页面)的最简单方法之一就是减少页面上的对象。对大多数页面来说，造成性能问题的罪魁祸首都是图形化对象，如照片和图像。作为示例，让我们来看看Google的检索页面(www.google.com)如他们自己所述，该页面本质上就是极简的。在编写本书时，Google的检索页面上只有5个对象:一个HTML文件、两个图像和两个Javascript文件。我做了一个不算很科学的实验，载人该检索页面的时间约为300毫秒。再看一看与我们合作的一个在线杂志业，我们这个客户的主页有200多个对象，其中145个是图像，平均需要花费111秒以上才能载入该页面。这个客户并没有意识到，页面性能低会导致有价值的读者流失。Google于2009年发布过一个白皮书，声称测试表明检索延迟增加400毫秒，就会使每天的检索量减少将近0.6%。

减少页面上的对象是提高性能和可扩展性的好方法，但是在你急于删除所有图像前，还需要考虑几点。首先，显然要考考虑你想传达给客户的重要信息。如果没有图像，你的页面看起来就会像1992W3项目的页面，该页面据说是史上最早的一个Web页面。由于你需要图像、Javascript脚本和CSS文件，那么第二点需要考虑的就是把相似的对象合并到一个文件中。这个主意并不坏，事实上，还有一个专门的技巧，即CSS图片精灵。所谓图片精灵，就是一组小图像的集合，这些小图像被组合成一个较大的图像，使用CSS处理这幅图像就可以只显示其中一幅小图像。这样做的好处就是大大减少了所请求的图像数量。返回Google检索页面，该页面上的两个图像之一，就是一个图片精灵，它是由二十多个能够独立显示的小图像构成的。

至此，我们已经讨论过，虽然减少页面上的对象可以提高性能和可扩展性，但是这种做法必须权衡考虑页面对现代外观的需求(图像、CSS文件和Javascript)。接下来，我们讨论如何把这些对象组合成一个对象，从而减少浏览器生成页面所必需的请求。不过，这就有另外一点需要权衡，即把所有对象都组合到一个又对象中，就不能利用我们在每个服务器的最大同时持续连接数了。简单重述一下，最大同时连接数指浏览器从一个域中同时下载多个对象的数量。如果所有内容都放在一个对象中，那么浏览器这种能同时下载两三个对象的能力就毫无用武之地了。现在，我们需要考虑把这些对象分布到几个小对象中，这样就能够同时下载。

浏览器的同时连接功能是对提供对象的域的限制。如果页面上的所有对象都来自于一个域(www.akfpartners.com)，那么浏览器设置的最大连接数就是最多可以同时下载的对象数。如前所述，这个最大数建议设为2，不过许多浏览器默认设置为6或者更高。因此，最好把你的内容(图像、CSS文件、Javascript文件等)分成足够多的对象，以便充分利用浏览器的这一功能。能够真正利用浏览器这一功能的一个技巧是从不同的子域提供不同的对象(例如，static.akfpartnerscom、static2.akfpartners，com等)。浏览器会分别考虑这些域，能够并发地让每个域都达到最大连接数。前面我们提到过的在线杂志的客户，对载入时间1秒的页面使用了该技术，把对象分布到7个子域中，从而把平均载入时间减少到了5秒以下。

遗憾的是，对于理想的对象大小或应该采用多少个子域，没有绝对的答案。提高性能和可扩展性的关键还是测试页面。在必要的内容和功能、对象大小、显示时间、总下载时间、域等因素之间，都要进行平衡。如果页面上有100个对象，每个大小50KB，那么把它们组合到一个图片精灵中可能不是好方法，因为在没有把4.9MB的对象下载完之前，任何图像都显示不出来。如果把所有js文件都组合到一个文件中，那么在没有把整个文件下载完之前，任何Javascript功能都不能用。究竟哪种选择才是最好的，只有使用各种ISP连接速度在各种浏览器上测试页面之后才能确切知道。

总之，页面上的对象越少，网页性能就越好，但是必须与其他因素平衡。这些因素包括必须显示多少内容，多少对象可以组合起来，如何通过增加域最大限度地利用同时连接，页面总体大小以及限制对象数量是否有帮助等。虽然本原则涉及很多提高Web站点性能的技术。

此外，还有很多优化网站建设性能的技术可以考虑，包括在页面顶部载入CSS文件、在底部载入Javascript文件、减小文件、利用缓存、延迟加载等。