网站访问优化之-内容篇-组件加载

后加载组件

你可以仔细看看你的页面,并问自己:“为了最初渲染页面,哪些是必须需要的?”。其余的内容和组件可以等待。

JavaScript是onload事件之前和之后分裂的理想选择。例如,如果您有JavaScript代码以及可拖放和动画的库,那么可以等待,因为在初始渲染之后拖动页面上的元素。其他地方寻找候选人后加载包括隐藏的内容(用户行动后出现的内容)和图像下方的图像。

工具可以帮助您完成工作:YUI Image Loader允许您延迟折叠下方的图像,YUI Get实用工具是一种轻松包含JS和CSS的简单方法。在野外的例子看看雅虎!雅虎主页与Firebug’s Net Panel打开。

性能目标与其他Web开发最佳实践保持一致是很好的。在这种情况下,渐进增强的想法告诉我们,JavaScript支持时可以改善用户体验,但是即使没有JavaScript,也必须确保页面能够正常工作。因此,在确定页面正常工作之后,您可以使用一些后期加载的脚本来加强它,从而为您提供更多的细节,如拖放和动画。

预加载组件

预加载可能看起来像后加载的相反,但它实际上有一个不同的目标。通过预加载组件,您可以利用浏览器处于空闲状态的时间,并请求将来需要的组件(如图像,样式和脚本)。这样,当用户访问下一页时,可以使大部分组件已经在缓存中,并且用户的页面加载速度会更快。

实际上有几种类型的预加载:

无条件的预加载 – 一旦onload激发,你继续前进,并获取一些额外的组件。请查阅google.com了解如何请求加载精灵图像的示例。此精灵图片在google.com主页上不是必需的,但是在连续的搜索结果页面上需要此图片。
有条件的预加载 – 根据用户的行为,你可以猜测用户下一步的行为,并相应的预加载。在search.yahoo.com上,您可以看到在开始在输入框中输入内容后,如何请求一些额外的组件。
预期的预加载 – 在启动重新设计之前提前预加载。它经常发生在重新设计之后,您会听到:“新网站很酷,但速度比以前慢”。部分问题可能是用户使用完全缓存访问您的旧网站,但新的缓存总是空的。您甚至在启动重新设计之前,可以通过预载一些组件来减轻这种副作用。您的旧网站可以使用浏览器闲置的时间,并请求将由新网站使用的图像和脚本