发布时间：2022-09-27 00:00   您所在的位置： 网站首页 > 新闻资讯 > 经验杂谈

尽可能减少页面上的对象。所有性能至关重要的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文件、减小文件、利用缓存、延迟加载等。

本文章由新概念互动原创，如没特殊注明，转载请注明来自：http://www.jianzhan0.com/jingyand/72163.html

上一篇：横向扩展数据中心

下一篇：拆分不同的东西(Y轴原则)