雅虎的用户界面博客（YUIBlog）

在YUI 3画廊：预置模块

几个星期前，斯托扬STEFANOV（ @ stoyanstefanov ）公布的结果，他不执行有关在提前预压元件的研究。 这种技术可以帮助提高性能，使用缓存的资源连续页面。

利用这些结果，我们决定将它移植到YUI的3 ，所谓的“一个新的模块画廊预紧力“，这是目前可通过YUI装载机。

让我们看到一个预紧例如 ：

  YUI（{
     / /最后画廊构建这个模块
    画廊：画廊2010年5月5日- 19 - 39“
 }）。使用（的“画廊预紧”，函数（y）{
   Y.preload（[
     “http://tool​​s.w3clubs.com/pagr2/1.sleep.expires.png”，
     “http://tool​​s.w3clubs.com/pagr2/1.sleep.expires.js”
     “http://tool​​s.w3clubs.com/pagr2/1.sleep.expires.css”
   ]）;
 }）; 

这个模块是如何改善用户体验 ？

如今，Web应用程序中的JavaScript，CSS和图像方面的一个大的空间。 在这些类别中的每个文件大多是静态的，可以通过一个可缓存的CDN服务。 一旦其中的任何文件被下载并缓存，浏览器并不需要下载相同的文件在同一页的连续请求。 但是，我们还是有一个大的影响在初始页面请求。

最近的研究表明，0.1秒的[100毫秒]让用户感到系统反应瞬间的限制;比这更会令用户不耐烦（雅各布尼尔森） 。 加载过程也是如此。 我们需要使我们的应用程序运行速度快，为了保持领先地位，我们的用户的期望。

像 Facebook 或 Gmail的Web应用程序，用户通常登录第一。 这是一个典型的场景，在其中的“预压”有道理。 我们可以估算，每个用户将花费5至10秒，与表单交互。 在此期间，我们的应用程序是什么都不做。 如果我们可以利用这段时间在后台加载缓存的文件，这些文件将可在高速缓存中，当用户完成登录过程 - 因为我们知道他/她去，我们知道正是他/她将需要。 在一般情况下，任何可预见的用户路径（包括形式的工作流程）的Web应用程序可以利用这种技术。

这项技术是不是一个新的，但，作为斯托扬指出，不执行脚本或注射的CSS或显示图像本身进行;与这些后，负载步骤相关的成本，以及我们应该尽量避免支付该成本。 此外，在某些情况下，这些文件将不能很好地与初始页面。 为了避免冲突和最少的时间落实到位的解决方案，我们就需要，以保证这些文件得到缓存，而在当前页面中使用它们。

这个过程需要完全无害，即使用户导航或停止加载过程中的文件之前得到下载并缓存，始终处于后备到位 - 目标页面将直接尝试加载该文件。

下面的代码显示了如何实现此方法使用的gallery-preload模块：

  YUI（{
     / /最后画廊构建这个模块
    画廊：画廊2010年5月5日- 19 - 39“
 }）。使用（“事件的焦点”的“画廊预紧”，函数（y）{
   / /等待，直到用户输入元素的重点开始加载资产
   Y.on（“焦点访谈”，函数（）{
     Y.preload（[
       “http://tool​​s.w3clubs.com/pagr2/2.sleep.expires.png”，
       “http://tool​​s.w3clubs.com/pagr2/2.sleep.expires.js”
       “http://tool​​s.w3clubs.com/pagr2/2.sleep.expires.css”
     ]）;
   }“。MyForm的input.query”）;
 }）; 

在这个例子中，脚本等待，直到用户开始加载形式的目标网页，将使用的资产的表单输入元素的重点之一。 这将提高页面的加载时间，一旦用户提交表单。

检查直接访问一个页面，并提前预压锐2/YUI 3组件之间的差异 ：

预紧这套组件包括几行代码，使得页面加载快四倍。 无需任何更改在您的应用程序逻辑，并没有改变是需要在目标页面...一个廉价而有效的的性能调整。

还有一个特点：

我们还包括一个更先进的功能，为那些想少侵略性。 该模块包括一个内置集成尼古拉Zakas“空闲定时器模块 ;空闲计时器使我们能够预载的文件，只有当用户是一个特定的时间内处于非活动状态。 下面是一个例子：

  YUI（{
     / /最后画廊构建这个模块
    画廊：画廊2010年5月5日- 19 - 39“
 }）。使用（的“画廊预紧”，函数（y）{
   / / PRELOAD文件，只有当用户是空闲的至少100ms
   Y.preloadOnIdle（[
     “http://tool​​s.w3clubs.com/pagr2/3.sleep.expires.png”，
     “http://tool​​s.w3clubs.com/pagr2/3.sleep.expires.js”
     “http://tool​​s.w3clubs.com/pagr2/3.sleep.expires.css”
   ] 100号）;
 }）; 

结论：

重要的是要领先于我们的用户。 了解我们的Web应用程序的工作流程，并利用这一预压技术将帮助我们提高整体用户体验。 同样重要的是不增加我们的应用程序的复杂性，这个新gallery-preload画廊预紧力）实现这两个目标。

谈话： bloglines | technorati

分享和扩展： 书签del.icio.us Digg它！ | 书签交易！