羊皮纸论坛目录 / 黑族联盟 / 公告 / 互动网页设计 /

优化网站内容提升效能

发表新主题
随机主题
上个主题
下个主题
|
优化网站内容提升效能

1. 减少HTTP请求 (Make Fewer HTTP Requests)

相当重要第一条。根Yahoo的研究,减少一个网站的HTTP请求数目会增进相当大的效能与速度。以下有几种方法可以有效的减少HTTP Request ∶

  1. 合并档案文件∶如把多个css或js档案并成一个。
  2. CSS Sprites∶什麽是CSS Sprites?简单的说,就是把网页上用到的多个小图片全部统一放到一张图片上,如此就只需要一次HTTP Request啦!而後在排版时再利用CSS的background-position属性来调整背景图片(background-image)的绝对位置。
  3. 影像地图(Image maps)∶与CSS Sprites相同理由,但此法只 合用在连续的图片上,故CSS Sprites较优。
  4. 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, 试试看没加, 要记得帮, 而静态元件
0 0
2009-12-14T09:36:00+0000


  • 当您未登入羊皮纸时,可以利用脸书 Facebook 登入来发表回响。若使用羊皮纸会员身份发表回响则可获得经验值及虚拟金币,用来参加羊皮纸推出的活动。
发表回响
 
验证字串