相当重要第一条。根Yahoo的研究,减少一个网站的HTTP请求数目会增进相当大的效能与速度。以下有几种方法可以有效的减少HTTP Request ∶
- 合并档案文件∶如把多个css或js档案并成一个。
- CSS Sprites∶什麽是CSS Sprites?简单的说,就是把网页上用到的多个小图片全部统一放到一张图片上,如此就只需要一次HTTP Request啦!而後在排版时再利用CSS的background-position属性来调整背景图片(background-image)的绝对位置。
- 影像地图(Image maps)∶与CSS Sprites相同理由,但此法只 合用在连续的图片上,故CSS Sprites较优。
- Inline images∶使用data:URL scheme内嵌图片到你的HTML里,但此法会加大你的HTML大小,比较好的方式是将Inline images放在你可暂存的样式表中。不过不是所有浏览器都支援Inline images!
2. 减少DNS解析 (Reduce DNS Lookups)
就是去DNS伺服器询问将网址解析为IP的过程,一次DNS Lookups大约会花掉20-120 milliseconds的时间,而在这段期间浏览器只能边发呆边等DNS回应。建议一个网页最好保持Hostname在2~4个之间,太多会花太多时间在DNS解析,太少则会不利於档案的平行下载(parallel downloads,後面会谈到)。
3. 避免重新导向 (Avoid Redirects)
尽量避免301与302重新导向。一个值得住意的是要记得帮你的子目录URL加上slash「/」,试试看没加的话连往http: //yourdomain/123的request是不是会被重新定向到http://yourdomain/123/呢。而如果你是使用Apache你可以透过Alias、mod_rewrite或DirectorySlash这些指令来解决这个问题。
4. 暂存你的AJAX (Make Ajax Cacheable)
为你的Ajax加上Expires。
5. 延迟载入元件 (Post-load Components)
有些你不会立即用到的档案图片你可以稍後再载入,像是用来drag and drop还有空置依些动画的Javascript等。
6. 预先载入元件 (Preload Components)
你可以预先利用在浏览器空档时,载入一些使用者接下来可能会用到的档案图片等。
7. 减少DOM元素数量 (Reduce the Number of DOM Elements)
太多的DOM Element会降低Javascript执行效能。
8. 将元件放到不同的网域 (Split Components Across Domains)
这是为了提高页面同时间能下载愈多的元件(平行下载),因为一个Hostname正常同一时间只能下载两个请求档案。实践方法例如你可以将HTML或动态内容放在www.example.org,而静态元件像是图片、JS档则分别放在static1.example.org和 static2.example.org。但需注意一个网页最好保持Hostname在2~4个之间(第2点)。
9. 最小化iframe数量 (Minimize the Number of iframes)
iframe的好坏是大家长久以来争论的话题之一,使用iframe有好有坏端看个人用途吧。
10. 不要有404错误 (No 404s)
除了会破坏使用者体验外,还会停止平行下载,此外,有些浏览器还会花时间去解析传回来的404文件。
参考资料∶http://developer.yahoo.com/performance/
- 关键字 : example, Components, 档案图, 时间, 平行下载, 保持Hostname, yourdomain, images, background, Sprites, Reduce, Number, 连续, 过程, 较好, 话题, 话连往http, 试试看没加, 要记得帮, 而静态元件