15更早的刷新缓冲区(Flush the Buffer Early)
tag:server
当用户请求一个页面,服务端会花费200至500毫秒的时间组合HTML页面。在这期间,浏览器会静静等待数据到来。PHP中有flush()函数,它允许你向浏览器发送部分就绪的HTML响应,这样浏览器可以在服务器处理余下的HTML页面时去获取组件。这样的好处主要在忙碌的后台和轻松的前台间可以看到。
在HEAD后面是放置刷新操作的好地方,因为头部的HTML代码更容易产生,而且可以让你放置任何CSS和JavaScript文件,以便浏览器在后台工作依然进行时并行开始获取组件。
例子:
... <!-- css, js -->
</head>
<?php flush(); ?>
<body>
... <!-- content -->
Yahoo! search先行研究并且进行了真人测试证明了使用这项技术的好处。
16在Ajax请求中使用GET方法(Use GET for AJAX Requests)
tag:server
Yahoo! Mail团队发现进行XMLHttpRequest的时候,POST方法在浏览器中分两步执行:先发送头部,然后发送数据。所以最好使用只发送一个TCP包(除非你有很多的cookie)的GET方法。IE中URL的最大长度是2000,所以如果你发送超过2000的数据就不能使用GET方法。
一个有趣的现象是,POST方法并不像GET那样实际发送数据(而Get则名副其实)。基于HTTP规范,GET方法意味着取回数据,所以当你只是请求数据时使用GET方法更为有意义(从语义上来说),而在发送需要储存在服务器端的数据时则相反使用POST。
17后加载组件(Post-load Components)
tag:content
你可以仔细端详下你的页面然后自问:“什么是在页面初始化时必须的?”那么其余的内容和组件可以放在后面。
JavaScript是理想的用来分割onload事件之前和之后的选择。例如你有执行拖放、下拉和动画的JavaScript代码和菜单,它们可以稍后加载,因为用户在初始呈现之后才会在页面上拖动元素。其他的可以被后加载的地方包括隐藏的内容(当用户做某项操作才会展现的内容)和被折叠的图片。
可以帮助你的工具有:YUI Image Loader能帮助你延缓加载折叠的图片,而且YUI Get utility能够很简单的包装运行中的JS和CSS。比如,打开Firebug的网络选项卡去查看Yahoo! HomePage。
当性能指标和其它网站开发的好的实践一致时是不错的。渐进增强的观念告诉我们当支持JavaScript时,会提高用户体验,但你必须确保在没有JavaScript时页面也能工作。所以当你确保页面工作正常时,你会通过延后加载的那些更花哨的脚本比如拖放和动画,来增强你的页面。
18预先加载组件(Preload Components)
tag:content
预加载看起来和后加载原则是个矛盾,但它其实是为了另外一个目的。预加载组件让你可以利用浏览器的空闲时间来加载之后需要的组件(比如图片,样式表和脚本)。这样当用户浏览下一个页面的时候,大部分组件都已经在缓存里了而页面会加载的更快。
有几种预加载的类型:
· 无条件预加载-当原本内容加载完成时,立刻开始获取一些额外的组件。比如到google.com看下一个sprite图片怎样被在onload事件后请求的。在google.com的首页里并没有用到sprite图片,但被用在接下来的结果页面里。
· 有条件的预加载-根据用户的行为来猜测用户什么时候到达下个页面然后据此预加载。在search.yahoo.com上,你可以看到额外的组件在你在输入框中输入时是怎样被加载的。
· 有预期的加载-当登录重新设计的网站时进行加载。你通常会在重新设计网站后听到:“新网站很酷,但它比以前的要慢”。这个问题的部分原因是用户访问旧网站时有所有的缓存,而对于新的来说,缓存是空的。你可以通过在登录重新设计的网站前预加载一些组件来缓解这方面的影响。你的旧网站可以用浏览器空闲的时间来请求新网站中用到的脚本和图片。
19减小DOM元素的数量(Reduce the Number of DOM Elements)
tag:content
复杂的页面意味着更多的字节需要被下载而且也意味着在JavaScript中遍历DOM更慢。比如你在页面中添加一个事件,让它在500或者5000个DOM元素中循环,它们的效率是不同的。
更多的DOM元素表明有些标签需要被改良而并不一定需要移除实际内容。你是否为了布局而使用繁琐的网一样的表格?你是否只是为了弥补一些布局的问题而使用了更多的div标签?也许还有更好和更符合语义的标签可以使用。
YUI CSS utilities可以很好的帮助进行布局:grid.css可以帮助你进行所有的布局,front.css和reset.css可以帮助你去除浏览器默认的格式。这是你开始重新审视你的标签的机会,比如只在语义符合时使用div标签,而不是用它来另起一行。
DOM元素的数量很好检测,只要在Firebug的控制台里输入:
document.getElementsByTagName('*').length
那么多少DOM元素算多呢?查看下类似的使用较好的标签的页面。比如Yahoo! Home Page是一个很丰富的页面但只有700以下的DOM元素(HTML标签)。
20分域部署部件:Split Components Across Domains
tag:内容
将部件分割能使你获得最大的并行下载效率。但你同时需要注意不使用多于2~4个域名,以避免DNS查询导致的问题。例如,你可以将HTML内容和动态的组建放于www.example.org域名下,将静态组件分别放于static1.example.org和static2.example.org之下。
查看Tenni Theurer和Patty Chi的"Maximizing Parallel Downloads in the Carpool Lane"获取更多关于并行下载的信息。