Why Performance Matters, Part 2:Perception Management 为什么性能重要 第2部分：感知管理
Why Performance Matters, Part 2:Perception Management 为什么性能重要 第2部分：感知管理
时间可以从两个方面进行分析：客观时间和心理时间。当我们谈论可以用秒表测量时间的时候，我们是在说客观时间或者时钟时间。但是，当用户在等待网站或者APP响应的时候，感知的时间通常与客观时间不一样。
在第 1 部分，我们谈了客观时间和一些管理时间的技巧，还回顾了几个广泛采用的工业标准背后的原因，比如页面加载时间和系统响应时间。我们也有了设置性能预算的参考，也知道了有竞争对手的时候，该怎样设定性能优化的目标。然而，客观时间是通过技术手段确定的，也就是说，有些局限是不可逾越的，比如资金、技术、开发时间等。
任何技术手段都有其局限性
除了技术上的限制，客观时间的绝对值，虽然是“性能”上不可或缺的一部分，也有一个问题：时间本身不能代表“性能”。为了证明这一点，下面是两个网站的加载时间。（先卖个关子，掩去网站名字）
这两个网站的加载时间一点都不好，你可以去访问一下http://www.webpagetest.org/result/151002_Y6_ER1/1/details/ 和
12.436 秒的加载时间，12.2 秒渲染完？单看这些数字，我们能得出结论：两个网站迫切需要改善性能。但是你能想象么，这两个网站在2014年，分别带来了890亿和190亿美元的收入，怎么可能！
不要担心，只需要在浏览器地址栏中输入amazon.com和ebay.com（是的，上面测量的就是这两个网站）亲自看一下，网站速度比你只看上面的数据，感觉会快不少。下面我们来讨论怎样实现这一点的。
性能不等于数学
性能从来都不是毫秒数、字节数或者请求数，不是数学概念，而是关于感知和心理学。
这一部分，我们将从不同的角度来看性能：
心理时间：感知管理
想象力，是对抗现实的唯一武器。
——爱丽丝梦游仙境
大脑感知时间的方式，与秒表测量的时间通常都不一样。我们对时间的感知受到很多因素的影响，焦虑程度、年龄、一天中的时间段，甚至是文化背景。我们把大脑感知的时间称为心理时间。
要理解我们怎样感知时间，先了解一些基本概念。
1927年，德国哲学家海德格尔（Martin Heidegger）在他的书《存在与时间》中写道，“时间只是发生的事情的结果”。根据海德格尔所说，时间是有限的，有开始和结束，由无数事件的开始和结束组成。我们来想象一个简单的事件：
在人的心理上，事件有明确的开始和结束
将一个事件的开始称为事件开始标记，简称开始标记。相应的，事件结束的时刻，称为事件结束标记，简称结束标记。
对于一个事件来说，时间不但是有限的，还有主动和被动之分。主动状态或者主动等待，是以户主精神活动区分的，可能是身体活动或者纯思维过程，比如解决一个难题，或者在地图上找一个地方。而那些用户没有选择，或者不能控制的等待时间，比如约会时等待迟到的爱人，称为被动状态或者被动等待。同样一段时间，人们倾向于高估被动等待时间，低估主动时间。Jacob Hornik 做的研究，还有Richard Larson的后续研究表明，平均来说，人们感知到的被动等待，比真正的时间要多36%。
同样的时间，在主动和被动状态下的感知不同
这里提到两个新的概念：
除了极少数情况，我们都不喜欢等待。但是，通常说的等待太久，都是说被动等待。大多数情况下，由于心理作用，主动的状态不认为是等待。因此为了管理心理时间，让大脑认为持续的时间更短，可以通过增加主动状态时间，尽可能地减少被动状态。有多种技术可以实现这一点，最终都归结为两种简单的做法：抢先开始和提前完成。下面详细讲解这两种方法。
抢先开始
抢先开始的重点是以主动状态开始事件，并且保持主动状态越长越好。做这些事并没有改变事件本身的时间。就像前面提到的，人们通常不把主动的状态当成等待，所以对人的大脑来说，抢先开始就是虚拟地把开始标记向后移（直到主动状态结束），这样能让用户觉察到的事件的时间更短些。
事件开始时的主动状态可以有多种形式，可以通过一些技巧来实现。用户并不需要了解这些技巧，现在暂时称为魔法。下面举几个例子模拟一下这个过程。
抢先开始，以主动状态开始，让用户保持主动状态越长，被动等待时间就越短
2009年，德州休斯顿机场收到很多投诉。乘客对到达后长时间等待行李很不满。管理人员迅速作出反应，加快了行李处理速度，将等待时间减少到8分钟，与美国其他机场相比已经是很快的速度了。但奇怪的是，投诉量并没有减少。
高管门研究了这个问题，找到了原因所在：到达后，第8分钟，第一件行李出现在传送带上。然而乘客只用了1分钟到达传送带。这样平均每个乘客至少要等待7分钟，才能见到第一件行李。在心理学上，用户的主动状态只有1分钟，被动等待是7分钟。
管理人员用感知管理的知识，提出了一个非常规的解决方案。他们把到达的入口挪到航站楼的最远端，把行李送到最远的传送带，这样把人们行走的时间增加到了6分钟，只留下2分钟的被动等待。尽管需要走更多的路，用户的投诉几乎下降到了0。
机场的行李传送带
休斯顿机场的行李处理（现在基本上所有机场都这样操作）就是典型的抢先开始技巧。从心理学的角度来看，用户在主动状态的时候，尽可能早地进行事件处理，就能把事件标记从真正开始时间（乘客下飞机后，行李开始处理），“移动”到新的时间。这就是所谓的抢先开始：在乘客意识之前就开始处理。
为了解决投诉，休斯顿机场工作团队最后做的就是增加主动状态时间（让乘客多走几步），减少了被动等待时间（站在传送带前）。没有改变行李的处理时间，就解决了问题。
为了解决投诉，休斯顿机场管理人员增加了主动等待时间，减少了被动等待时间
另一个例子是iOS中的Safari 浏览器。当用户输入URL时，浏览器会从搜索引擎中选出几个页面出来。这种技术叫“Top Hits”，很多人不知道，当Safari推荐Top hits的时候，已经开始在后台预加载页面了。所以单击一个链接的时候，页面会更快地展示出来。用户可以在Setting →Safari→PreloadTop Hits（预加载最长点选）启用或者禁用这个设置。
在新标签中打开页面也是同样的原理：移动版的Safari浏览器在做过渡动画的时候已经在预加载页面了，所以页面看起来像是即时打开的。
Mobile Safari 预加载页面，搜索或者打开新Tab
我们可以在网页中使用同样的技巧，比如搜索功能。假设每个页面都有搜索框，但是只有搜索结果页需要复杂的功能，如排序、过滤，可能还有其他更多的模块。这些功能模块不会放到每个页面，也没必要。我们可以把这些功能只放到搜索结果页，但是这样会拖慢结果页的加载速度。
在用户输入的时候，就可以预加载结果页所需要的功能。当用户到达搜索结果页的时候，功能已经准备好了。用户也可以用这个技术，在进入购物车的 Landing 页面就开始预加载下一步需要的资源，这样用户打开下一页的时候几乎是实时的。
为了优化浏览器性能，一大批行业专家，在谷歌网络性能工程师 IlyaGrigorik的领导下，正在为W3C推动资源提示（ResourceHints）方案。该规范将能够让浏览器原生支持抢先启动。在 Ilya 的High-Performance BrowserNetworking书中提到的，我们即将可以“给文档嵌入附加提示，让浏览器代替我们做更多的优化工作”。
一些浏览器已经开始支持这些提示了。http://caniuse.com/#search=resource%20hints
所有这些提示，都应该放到文档的<head>标签中，让预加载尽可能早地开始。下面简单看一下这些提示：
（1）dns-prefetch
当DNS查询拖慢网页速度的时候，这个优化很有用，也可以用来在跳转前提前解析域名。
举例： <linkrel="dns-prefetch" href="//name-to-resolve.com">
（2）preconnect
这个提示不仅仅用来查询域名，还可以用来启动一个完整的连接握手。crossorigin属性可以用来配置跨域请求的属性。
举例： <linkrel="preconnect" href="//cdn.example.com" crossorigin>
（3）prefetch
这个提示优先级最低，用来加载以后可能会被用到的资源。可选的as属性用来指定内容的类型。
举例： <linkrel="prefetch" href="/library.js" as=”script”>
（4）prerender
这个提示能在后台预渲染整个页面，包括页面中的所有内容。当用户在跳转页面时，能立即展示新页面。但是这里会加载整个页面，要谨慎使用。
举例： <linkrel="prerender" href="//example.com/next-page.html">
请参考 W3C 草案了解更多细节。要了解这些草案背后的故事，或者跟多实例，用法，支持情况，请阅读 Ilya Grigorik 的PPT Preconnect, Prefetch, Prerender，也可以参考 RobinRendle在CSS-Tricks上的文章Prefetching, Preloading, Prebrowsing。
还有，Preload标准也加入到了资源提示家族，在W3C的Editor'sDraft.中，定义了 preload 提示，跟前文提到的prefetch差不多：
<link rel="preload"href="/styles/other.css" as="style">
但是两者有个本质的差别：prefetch 优先级最低，是为了用户导航到其他页面准备资源， preload是用来加载页面的关键资源，有最高的优先级。还有相关的subresource提示，感兴趣的朋友也可以去了解一下。
回到抢先开始，总结起来就是：我们以主动状态开始一个事件，在用户转到被动状态之前，让用户在这个状态保持尽可能长的时间。
提前完成
跟抢先开始差不多，提前完成是把结束标记提前，让用户感觉到事情结束得很快。我们用被动状态开始一件事，但是尽可能提早让用户转到主动状态。
提前完成的诀窍在于，以较短的被动状态开始，提早让用户进入主动状态
网上最常见的应用就是视频缓冲。点击开始播放，不用等到整个视频都加载完，第一份可用的数据加载后，就开始播放。这样结束标记就提前到很接近开始标记的时间。后面的视频加载的时候，用户是在主动等待状态（正在看视频）后台加载剩下的内容，非常简单有效。
流视频是提前完成的最佳示范
网页加载时也可以采用这个技术。页面请求加载渲染的时候，用户是在等待，不能控制这个过程，也不能做其他的事，除了关闭标签。这就是被动状态。用户讨厌被动等待状态，所以我们应该以某种方式改进它。
一个可行的方案是页面重要的部分，比如dom加载完就立即开始渲染，不影响页面渲染的内容，不需要等它们下载完。有些不需要立即看见的元素甚至都不加载，或者可以用JavaScript加载，比如页脚等。下面再来看一下亚马逊和eBay的例子。下图是亚马逊页面渲染过程的截图。
亚马逊网站加载过程，用户很快就进入主动等待状态
这里可以看到，不用等到7秒时所有资源都加载完成再显示页面，页面顶部的可见部分加载完成后，在1.1秒时就开始渲染。
谷歌的PageSpeed Insights工具也提出了类似的优化建议，尽可能快地给用户显示一些内容，页面最重要的信息加载后，尽早渲染，让用户切换到主动状态，让用户感到页面比实际上花费的时间更少。WebPageTest工具给出的Start render参数可以看出用户浏览时，网站有多快。
提前完成技巧，尽可能快的展示一些内容，可以让用户的等待进入主动状态
感知管理采用的主动和被动阶段，大多数时候都非常有效，并不需要昂贵的，或者人力密集型的解决方案，它使用了我们能掌握的最有力的工具——大脑。
总结
作为Web开发人员，我们的目标应该是提供快速、可靠的网络服务，让用户感到舒适。我们可以用技术手段控制网站的客观表现。绝对时间是性能的一个重要方面，但不是影响性能的唯一因素。用户的大脑确定一个网站是否能快速访问页面，受很多因素影响，比如他们的心情、他们的想法，甚至一天中的某个时间段。技术和资源总有极限，这时候很难改变客观性能，这时，心理学和神经学能教我们解决问题。
总结一下第1部分和第2部分中的讨论，我们提出了一些让项目运转速度更快的策略。下面是我们目前掌握的理论和工具列表。
你可以把这些技术用到工作中。不过，细心的读者可能发现了，这个系列还不完整，还有问题没有回答，当技术达到极限，而且是纯粹被动等待状态该怎么办？还有一种情况是产品“太快”了怎么办？我们将在第3部分寻找答案。
参考文献：
本文由Smashing Magazine独家授权异步社区发布简体中文版。版权所有 禁止转载或建立镜像。