尽可能减少对象

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

相關文章: