性能一直是网站成功的关键。越来越多的研究已经证明，不管是小型电商，还是像沃尔玛那样的连锁店，即使是页面加载时间方面的细微改善，都可以带来更多的业务，更多的广告收入，更多的用户粘性和更多的客户满意度。 在过去几年，Web开发者都是基于改善硬件或者提高带宽速度来优化用户体验。但是最近几年，爆炸式的移动Web浏览器的使用打破了这个途径。低带宽，高延迟，小内存，低处理器性能的移动设备环境，迫使开发者不得不想办法通过优化前端页面的性能来满足用户的性能预期。 在强调如何解决移动端性能问题上，这篇文章总结了一些前端优化的案例，并且概括了一些加速页面的方法和策略。
为什么性能会影响这么多不论你的页面设计地多么有趣、漂亮、交互性好，不管是在桌面还是移动设备上，如果页面需要花2到3秒时间去渲染展示，那么用户都会很快变得不耐烦的。可以预期的是，在页面还在加载的时候，用户很有可能从浏览购买的行为转变为点击回退键或者是关闭浏览器的行为。 不到1秒钟的延迟甚至也会显著地影响收入。在2006年，当时还在Google工作的Marissa Mayer说，由于用户表示希望在一个搜索页上看到多于10个搜索结果，Google就实验性地修改为30个。但是让人吃惊的是，在这个实验里，流量和投资都减少了20个百分点，显然是由于更多的搜索结果导致多花费了半秒时间来加载页面。^5 用户的期望总是在不断的提升。2009年，Forrester研究所的Akamai的一项研究发现表明，网页响应时间可容忍的阀值是2秒，一旦网页相应时间超过3秒，会有40%的用户放弃浏览页面。一年之后，Akamai的另一项研究表明，超过3秒放弃浏览页面的用户比例上升到了57%。^1,7 此外，移动端的用户希望移动设备上的页面性能不亚于桌面PC。由Tealeaf科技（现在已经并入IBM）委托的“Harris的互动2011移动交互调查”显示，在前一年有过移动消费经历的成年人中，有85%希望移动设备上的体验能与手提电脑或者PC上的体验相当，甚至于更好。并且有63%的人表示，一旦他在移动设备上的交易遇到了一个问题，他们就不会再想通过其他渠道去购买这个公司的其他产品了。^10换句话说，差劲的移动页面性能会影响到公司其他各种平台的销售，这其中当然也包括线下的实体店。 移动流量正在迅速增长。对许多消费者而言，他们的手机或者平板设备已经成为他们浏览网络的主要入口了，但是其性能表现却差强人意。2011年2月，Compuware公司委托Equation 研究所做的一项研究表明，几乎一半的移动用户（46%）表示他们手机上的网站加载速度过慢。60%的用户希望页面能在3秒或者更少的时间内加载完成，74%的用户表示，当单个页面加载时间花费5秒或者更多的时候，他们会选择离开这个页面。在2012年，由Strangeloop网络（现已并入Redware）发起的一项针对200家领先的电子商务网站研究表明，3G网络环境下，平均加载时间为11.8秒（图1），而在LTE（4G）环境下，加载时间只有轻微的改善，为8.5秒。^8
移动设备表现性能的三种影响因素正如上文所说的，移动设备天生有下面三种性能限制：带宽低，内存小，处理器性能低。这些性能挑战又加上一些其他的问题，例如： 网页比以前更大。根据HTTP Archive网站的分析，现在平均的一个web页面需要加载超过1MB的数据，其中包含有图片，Javascript，CSS（Cascading Style Sheets）等。更大的网页会影响桌面PC的显示性能。对于移动端的性能 — 特别是3G环境下的性能 — 影响更严重。这个影响会在今后的三年更加明显。以现在的页面增长速度来说，到2015年，平均的页面大小会达到2MB。 延迟相差巨大。对LTE来说，延迟大概有34ms，对3G来说，延迟大概有350毫秒甚至更多。移动端的延迟性唯一不变的就是延迟时间永远是不定的，即使是在同一个地点，每次的延迟都是不定的。这是由于大量的数据是通过信息塔进行传输的。因此诸如天气，甚至是持有者所面向的方向都有可能成为影响因素。 下载速度相差巨大。下载速度的范围从3G环境下的1Mbps到LTE环境下的31Mbps。把这个和美国平均的带宽15Mbps相比是一个很有意思的事情，3G环境比平均带宽慢了15倍，而LTE却能达到平均带宽的2倍那么快。
M.SITES并不能完全解决移动端性能的问题。许多网站建设者尝试针对多用户访问，大网页和低流量连接的访问页面，开发出短小，快速，精简的m.sites；但是，这些尝试并没有什么用，当用户有选择权的时候，高达35%的移动用户会选择浏览完整的网站。 这些选择浏览完整网站的用户显然比浏览m.sites的用户更有购买欲望。一个研究表明，移动端每$7.00的消费中，有$5.50是来自于网站的网站浏览，只有$1.00是来自于m.sites，剩下的$0.50则是来自于客户端。^9
解决问题改善网站性能的主要策略并没有因为从PC变成手机或者平板设备而有变化，只是会参杂一些小的策略。 不论在PC还是在移动浏览器上，页面展示需要的时间里，只有20%是用来读取页面的HTML的。剩下的80%是用来加载额外的像样式表、脚本文件、或者图片这样的资源和执行客户端的程序。 三个主要的改善性能的策略是：
由于移动网络通常比桌面机器的网络慢，所以减少请求数和请求加载量是非常重要的。由于移动端的浏览器解析HTML和执行JavaScript的效率比桌面PC低，所以优化客户端程序也是非常关键的。另外，移动端浏览器的缓存大小比桌面PC低，所以需要有方法能重复利用本地的缓存资源。 文章剩余部分总结了能解决这些问题的方法。虽然这些方法大都可以自动化解决，当然也可以由有经验的前端工程师来手动解决。关键就是要知道人工解决这些技术的方法如何控制资源的请求。通常在CMS（内容管理系统）或者其他Web应用中，有些页面包含一些自动生成好的或者离线的HTML片段、CSS或者Javascript文件，这样的页面开发者就不需要去优化它们了。
减少请求最大的性能漏洞就是一个页面需要发起几十个网络请求来获取诸如样式表、脚本或者图片这样的资源。这个在相对低带宽和高延迟的移动设备连接上来说影响更严重。CDNs（内容分发网络）把资源放在离用户地理位置更近的地方对解决这个问题能起到很大作用，但是比起获取请求，大量的请求对页面加载时间的影响更为严重。而且最近的发现表明，CDNs对移动端用户的性能影响越来越低。 下面的章节讨论了简化HTTP请求的几种方法。
整合资源对开发者来说，将Javascript代码和CSS样式放到公共的文件中供多个页面共享是一种标准的优化方法。这个方法能很简单的维护代码，并且提高客户端缓存的使用效率。 在Javascript文件中，要确保在一个页面中相同的脚本不会被加载多次。当大团队或者多个团队合作开发的时候，这种冗余的脚本就很容易出现。你可能会对它的发生频率并不低感到非常吃惊。 Sprites是css中处理图片的一项技术。Sprites就是将多张图片整合到一个线性的网状的大图片中。页面就可以将这个大图片一次性获取回来并且做为css的背景图，然后使用css的背景定位属性展示页面需要的图片部分。这种技术将多个请求整合成一个，能显著地改善性能。 实现小贴士：平稳地改进但是需要对资源有控制权限。根据开发者的网站不同权限，一些资源并不需要被整合起来（例如，一些由CMS生成的资源）。还有，对于一些外部域引用的资源，强行整合可能会导致问题。需要注意的是，整合资源对手机浏览器来说是一把双刃剑。整合资源确实会在首次访问减少请求，但是大的资源文件可能会导致缓存失效，所以，需要小心地使用各种技术整合资源，以达到优化本地存储的目的。 使用浏览器缓存和本地缓存现在所有的浏览器都会使用本地资源去缓存住那些被Cache-Control或者Expires头标记的资源，这些头能标记资源需要缓存的时间。另外，ETag（实体标签）和Last-Modified头来标识当资源过期后是否需要重新请求。浏览器为了减少不必要的服务器请求，尽可能地从本地缓存中获取资源，并且将那些已经过期的、或者当缓存空间减小的时候将那些很久不用的资源进行清理。浏览器缓存通常包括图片，CSS，Javascript代码，这些缓存能合理地提高网站的性能。（比如为了支持后退和前进的按钮，使用一个单独的缓存来保存整个渲染的页面）。 移动浏览器缓存，通常是比桌面PC小的多，这就导致了缓存的数据会很经常被清理。HTML5的缓存基于浏览器缓存提供了一个很好的替换方案。Javascript的localStorage已经在所有主流的桌面和移动端浏览器上都实现了。使用脚本代码能简便地支持HTML5的localStorage操作，可以读写键值数据，每个域名大概有5MB的容量。虽然不同的移动浏览器上读写速度相差很大，但是localStorage大容量的缓存使得它很适合作为客户端的缓存。从localStorage获取资源明显快于从服务器上获取资源，而且在大多数移动设备上也比依靠缓存头或者浏览器的本地缓存更灵活可靠。这是移动浏览器比桌面PC更有优势的一个地方，在桌面PC上，本地缓存仍然优先使用标准的浏览器缓存，导致桌面PC本地缓存的性能落后于移动浏览器。 实现小贴士：需要进一步考虑。虽然localStorage的机制易于实现，但是它的一些控制机制却是非常复杂的。你需要考虑到缓存带给你的所有问题，比如缓存失效（什么时候需要删除缓存？），缓存丢失（当你希望数据在缓存中的时候它并不在怎么办？），还有当缓存满的时候你怎么办？
|
