网站前端和后台性能优化18

预先加载组件 (Preload Components)

tag:content

预加载看起来和后加载原则是个矛盾，但它其实是为了另外一个目的。预加载组件让你可以利用浏览器的空闲时间来加载之后需要的组件（比如图片，样式表和脚本）。这样当用户浏览下一个页面的时候，大部分组件都已经在缓存里了而页面会加载的更快。

有几种预加载的类型：

• 无条件预加载-当原本内容加载完成时，立刻开始获取一些额外的组件。比如到google.com看下一个sprite图片怎样被在onload事件后请求的。在google.com的首页里并没有用到sprite图片，但被用在接下来的结果页面里。
• 有条件的预加载-根据用户的行为来猜测用户什么时候到达下个页面然后据此预加载。在search.yahoo.com上，你可以看到额外的组件在你在输入框中输入时是怎样被加载的。
• 有预期的加载-当登录重新设计的网站时进行加载。你通常会在重新设计网站后听到：“新网站很酷，但它比以前的要慢”。这个问题的部分原因是用户访问旧网站时有所有的缓存，而对于新的来说，缓存是空的。你可以通过在登录重新设计的网站前预加载一些组件来缓解这方面的影响。你的旧网站可以用浏览器空闲的时间来请求新网站中用到的脚本和图片。