对多线程来说尽量使用HTML5的WEB WORKER特性HTML5中的Web Worker是使用多个线程并发执行Javascript程序。另外，这种特别的多线程实现能减少困惑开发者多年的，在其他平台上遇到的问题。例如，当一个线程需要改变一个正在被其他线程使用的资源该如何处理。在Web Worker中，子线程不能修改主用户界面（UI）线程使用的资源。 对提高移动站点的性能来说，Web Worker中的代码很适合用来预处理用户完成进一步操作所需要的资源的，特别是在用户的带宽资源不紧缺的情况下。在低处理器性能的移动设备上，过多的预加载可能会干扰当前页面的UI响应。使用多线程代码，让Web Worker对象（并且尽可能使用localStorage来缓存数据）在另外一个线程中操作预加载资源，这样就能不影响当前的UI表现了。 要特别说明的是，Web Worker只在Android 2.0以上的版本实现，而且iphone上的ios5之前的版本也不支持。在桌面PC上，总是落后的IE只在IE 10才支持Web Worker。 实现小贴士：平稳过渡。虽然这项技术并不是非常难实现，但是对Web Workers来说，有一些限制需要强制遵守。Web Workers不能进入到页面的DOM，也不能改变页面上的任何东西。Web Worker很适合那种需要后台计算和处理的工作。 将CLICK事件替换成TOUCH事件在触摸屏设备上，当一个用户触碰屏幕的时候，onclick事件并没有立即触发。设备会使用大约半秒（大多数设备差不多都是300毫秒）来让用户确定是手势操作还是点击操作。这个延迟会很明显地影响用户期望的响应性能。要使用touchend事件来替换才能解决。当用户触碰屏幕的时候，这个事件会立即触发。 为了要确保不会产生用户不期望的行为，你应该也要使用touchstart和touchmove事件。例如，除非同时有个touchstart事件在button上，否则不要判断touchend事件在button上就意味着点击行为 — 因为用户有可能从其他地方触碰开始，然后拖拽到button上触碰结束的。你也可以在touchstart事件之后使用touchmove事件来避免将touchend事件误判为点击，当然前提是需要假设拖拽的手势并不是预期产生点击行为。 另外，你也需要去处理onclick事件来让浏览器改变button的外观从而标识为已点击的状态，同时你也需要处理那些不支持touch事件的浏览器。为了避免代码在touchend和onclick代码中重复执行，你需要在确保用户触碰事件已经在touchend执行了之后，在click事件中调用preventDefault和stopPropagation方法。^4 实现小贴士：需要进一步考虑。这种技术需要更多工作才能在一个页面中增加和维护链接。touch事件的代码必须考虑其他手势，因为替换click的还有可能是缩放或者敲击动作。 支持SPDY协议应用层HTTP和HTTPS协议导致的一些性能瓶颈，使得不论是桌面还是移动端的网站都非常难受。在2009年，谷歌开始研发一种叫做SPDY（谐意是”speedy”）的协议来替换已有的协议，这种协议宣称能突破这些限制。这个协议的目标是让多种浏览器和多种Web服务都能支持，所以这个协议是开源的，但是初步地，只有Google的Chrome浏览器（在版本10及之后的）和google的站点支持。一旦一个Web服务支持SPDY，那么它上面的所有站点都可以和支持这个协议的浏览器使用SPDY进行交互。将SPDY应用在25个top100的Internet网站上，Google收集到的数据是网站的速度会改善27%到60%不等。^2 SPDY自动使用gzip压缩所有内容，和HTTP不同的是，它连header的数据也使用gzip压缩。SPDY使用多线程技术让多个请求流或者响应流能共用一个TCP连接。另外SPDY允许请求设置优先级，比如，页面中心的视频会比边框的广告拥有更高的优先级。 或许SPDY中最变革性的发明就是流是双向的，并且可以由客户端或者服务端发起，这样能使得信息能推送到客户端，而不用由客户端发起第一次请求。例如，当一个用户第一次浏览一个站点，还没有任何站点的缓存，这个时候服务端就可以在响应中推送所有的请求资源，而不用等候每个资源被再次独立请求了。作为替换协议，服务端可以发送暗示给客户端，提示页面需要哪些资源，同时也允许由客户端来初始化请求。即使是使用后一种这样的方式也比让客户端解析页面然后自己发现有哪些资源需要被请求来得快。 虽然SPDY并没有对移动端有什么特别的设置，但是移动端有限的带宽就使得如果支持SPDY的话，SPDY在减少移动网站的延迟是非常有用的。 实现小贴士：依据网站和服务的环境来进行平稳操作或进一步考虑。Google有一个SPDY模块支持Apache2.2 – mod_spdy – 这个模块是免费的；但是mod_spy有线程上的问题，并且和mod_php协作并不是很好，所以要求你使用这个技术的时候要确保你的网站的正常运行。^6 永远别忘记测试！如果缺少了持续和仔细的测试提醒，性能的优化就只是讨论而已，是无法完成的。如果没有指定基准做比较，你系统上的任何改动都仅仅是理论而已。如果没有真实的测试数据，猜测性能的瓶颈是毫无意义的。 有很多开源和通用的工具能进行集成测试，并且能进行不同地域和带宽/延迟的测试。另外，RUM（real user monitoring）工具能将测试环境从实验室变成不可预测的真实用户行为。 观察移动设备的测试选择和桌面场景一样。如果你在选择一个自动化的解决方案，请确保使用一个能持续测试，并且能区分出应用优化方法前后的变化的解决方案。 如果性能优化如果只是在发展过程中的一个步骤而已，它不会有什么效果的。它必须成为一个持续改善网站的一部分。 参考：1. Bustos, L. 2009. Every second counts; how website performance impacts shopper behavior. GetElastic;http://www.getelastic.com/performance/. 2. Chromium Projects. SPDY: an experimental protocol for a faster Web;https://sites.google.com/a/chromium.org/dev/spdy/spdy-whitepaper. 3. Everts, T. 2013. Case study: how effective are CDNs for mobile visitors. Web Performance Today;http://www.Webperformancetoday.com/2013/05/09/case-study-cdn-content-delivery-network-mobile-3g/. 4. Fioravanti, R. 2011. Creating fast buttons for mobile Web applications. Google Developers;http://code.google.com/mobile/articles/fast_buttons.html. 5. Linden, G. 2006. Marissa Mayer at Web 2.0. Geeking with Greg;http://glinden.blogspot.com/2006/11/marissa-mayer-at-Web-20.html. 6. mod-spdy; http://code.google.com/p/mod-spdy/. 7. PhoCusWright. 2010. PhoCusWright/Akamai study on travel site performance;http://connect.phocuswright.com/2010/06/phocuswrightakamai-study-on-travel-site-performance/;http://www.akamai.com/dl/whitepapers/Akamai_PCW_Travel_Perf_Whitepaper.pdf. 8. Radware. 2011. Case studies from the mobile frontier: the relationship between faster mobile sites and business KPIS; http://www.strangeloopnetworks.com/resources/research/state-of-mobile-ecommerce-performance/. 9. Bixby, J. 2012. 2012 state of mobile e-commerce performance;http://www.strangeloopnetworks.com/resources/videos/case-studies-from-the-mobile-frontier-the-relationship-between-faster-mobile-sites-and-business-kpis-video/. 10. Tealeaf. 2011. Report on the Mobile Customer Experience. Based on the Harris Interactive 2011 Mobile Transactions Survey. 11. W3C. 2012. Network Information API; http://www.w3.org/TR/netinfo-api/. 12. YUI. ImageLoader. Yahoo! User Interface Library; http://yuilibrary.com/yui/docs/imageloader/. 原文链接： Tammy Everts |
