原文:Best Practices for Speeding Up Your Web Site
tag:content
Ajax的好处之一是它能给用户提供瞬间的响应,因为它从服务端异步请求数据。但Ajax不能保证用户在等候那些异步的JavaScript和XML响应返回时什么都不做。在应用程序中,用户是否继续等待取决于Ajax怎样应用。比如,在一个基于Web的Email客户端用户会等候Ajax返回他们所搜索的邮件信息。记住异步并不代表“即刻”。
为了提高性能,优化Ajax响应很重要。提高Ajax性能最重要的方式是使响应缓存,正如“添加一个过期期限和缓存控制头”这一节讨论的。这些原则同样适用于Ajax。
我们看一个例子。一个Web2.0的邮件客户端可能会用Ajax自动下载用户地址簿。如果用户从上次使用邮件网站以来没有修改她的地址簿,那么如果Ajax响应使用了长期失效时间或者缓存控制头部,地址簿就可以从缓存中读取出来。浏览器必须被告知“使用之前的缓存地址簿”而不是“请求一个新的地址簿”。可以在地址簿Ajax的URL中添加一个标识用户最后一次修改地址簿的时间戳,比如,&t=1190241612。如果地址簿从最后一次下载后没有被更改,时间戳将相同而地址簿将会从浏览器的缓存中得到来替代额外的HTTP传输。如果用户更改了她的地址簿,时间戳会保证新的URL不会和缓存中的匹配,而且浏览器会请求会请求更新的地址簿记录。
即使你的Ajax响应时动态创建的,而且只适用于一个用户,它们依然会被缓存。这样做会让你的Web2.0应用程序更快。
tag:server
当用户请求一个页面,服务端会花费200至500毫秒的时间组合HTML页面。在这期间,浏览器会静静等待数据到来。PHP中有flush()函数,它允许你向浏览器发送部分就绪的HTML响应,这样浏览器可以在服务器处理余下的HTML页面时去获取组件。这样的好处主要在忙碌的后台和轻松的前台间可以看到。
在HEAD后面是放置刷新操作的好地方,因为头部的HTML代码更容易产生,而且可以让你放置任何CSS和JavaScript文件,以便浏览器在后台工作依然进行时并行开始获取组件。
例子:
... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content -->
Yahoo! search先行研究并且进行了真人测试证明了使用这项技术的好处。
tag:server
Yahoo! Mail 团队发现进行XMLHttpRequest的时候,POST方法在浏览器中分两步执行:先发送头部,然后发送数据。所以最好使用只发送一个TCP包(除非你有很多的cookie)的GET方法。IE中URL的最大长度是2000,所以如果你发送超过2000的数据就不能使用GET方法。
一个有趣的现象是,POST方法并不像GET那样实际发送数据(而Get则名副其实)。基于HTTP规范,GET方法意味着取回数据,所以当你只是请求数据时使用GET方法更为有意义(从语义上来说),而在发送需要储存在服务器端的数据时则相反使用POST。
tag:content
你可以仔细端详下你的页面然后自问:“什么是在页面初始化时必须的?”那么其余的内容和组件可以放在后面。
JavaScript是理想的用来分割onload事件之前和之后的选择。例如你有执行拖放、下拉和动画的JavaScript代码和菜单,它们可以稍后加载,因为用户在初始呈现之后才会在页面上拖动元素。其他的可以被后加载的地方包括隐藏的内容(当用户做某项操作才会展现的内容)和被折叠的图片。
可以帮助你的工具有: YUI Image Loader能帮助你延缓加载折叠的图片,而且YUI Get utility 能够很简单的包装运行中的JS和CSS。比如,打开Firebug的网络选项卡去查看Yahoo! Home Page。
当性能指标和其它网站开发的好的实践一致时是不错的。渐进增强的观念告诉我们当支持JavaScript时,会提高用户体验,但你必须确保在没有JavaScript时页面也能工作。所以当你确保页面工作正常时,你会通过延后加载的那些更花哨的脚本比如拖放和动画,来增强你的页面。