跳转到:

这篇翻译不完整。请帮忙从英语翻译这篇文章

以下技巧都是基于通用的知识和经验,如果你有可以帮助他人提高页面加载性能的其它方法,可以在本文讨论区提出。

一个好的页面不仅要给访客提供一个更有效的站点,同时也需要降低你的服务器压力和网络请求。后者对于那些高访问量的站点,或在有爆炸性新闻出现等特殊情况下会出现流量突增的站点来说尤为关键。

页面加载性能的优化不仅仅是针对那些带宽有限的拨号上网用户需要看的内容,对于提供给宽带用户访问的内容同样重要并且可以导致巨大的提升,哪怕对于那些拥有最快网速的访客。

Tips

减小页面的大小

在页面下载中,页面的大小至今扮演着非常重要的因素。

减小页面的大小能够通过排除不必要空格,注释,动态内嵌脚本,和放入外部文件的 CSS 等在页面结构中很小的改变都能够提高下载性能。

诸如HTML Tidy这类的工具可以从有效的HTML源文件中自动截去行首空格和额外的空行,其它工具则可以通过重新格式化源代码来压缩JavaScript或者通过混淆源码将长标识符替换为短标识符来减小文件大小。

最小化文件数量

减少一个页面引用的文件数量可以降低在下载一个页面的过程中需要的HTTP请求数量。

根据其缓存设置,浏览器可能会为每个 CSS/JavaScript/image 文件发送一个 If-Modified-Since 请求给网络服务器,以查询这些文件自上次加载后是否有被修改。

通过减少链接至网页的文件数量,你可以减少发送这些请求以及接收它们回应的时间。

在查询引用文件是否被修改上花费太多时间会延迟网页的初始化显示,因为在渲染页面之前浏览器必须确认每个 CSS 或 JavaScript 文件的修改时间。

减少域名查找

每个独立的域名都会消耗DNS查找的时间,页面加载时间会随着独立域名数量、CSS链接数量、JavaScript还有图片资源的数量增加而增加。

这条可能算不上实用,但总之,在你的页面中尽量少的使用来自不同域名的资源链接。

缓存重用的内容

确保任何内容可以被缓存,并且拥有一个合理的有效期。

特别要注意 Last-Modified header 部分,它会让页面高效的缓存。 自上次修改之后,这部分 header 指示将信息传递给用户代理(要加载这些信息的文件)。大部分网页服务器会自动追加 Last-Modified header 部分到静态页面(如.html,.css),基于上次修改的日期储存在文件系统中。至于动态页面(如.php,.aspx),便无法做到,这部分 header 也就不会被发送出去。

所以,特别是动态产生的页面,花点时间研究一下这个课题会是有益的。或许有些什么关联,无论怎样,这么做在那些不能被缓存的网页中都会节省很多的页面请求。

More information:

  1. HTTP Conditional Get for RSS Hackers
  2. HTTP 304: Not Modified
  3. On HTTP Last-Modified and ETag

高效地排列页面组件

在页面最初显示时,会首先下载页面内容以及所需的CSS和JavaScript,这样在页面加载时用户可以最快获得外观的反馈。由于内容通常都是文本text,有利于在传输过程中压缩,因此给用户以更快的响应。

页面中任何具有动态特性的资源需要在页面被完全加载后才可以使用,所以最好在初始化时关闭动态特性(disable dynamic features ),等页面加载完后再打开它。这样JavaScript就会在网页内容之后才加载,有助于提升页面加载的整体表现。

减少内联脚本的数量

内联脚本在页面加载过程中消耗很多资源,因为解析器认为内联脚本会改变页面结构。通常,尽量少的使用内联脚本和减少用document.write()来输出内容,在一定情况下可以加速整体页面的载入。现在浏览器中一般使用现代的 W3C DOM 方法操作页面内容,优于使用document.write()的传统方法。

使用现代CSS和合法标记

使用现代CSS减少标记(markup)的用量,可以减少对(spacer)图片的需求。在布局方面,图片通常可以用风格化的文本(text)来替代,这样会“节省”许多资源。

使用合法标记还有其它优点。首先,浏览器在解释HTML时无需做错误校正(除了一些哲理性的问题,例如,是允许用户输入格式不一致,而后再用程序“校准”或统一化呢? 还是加强约束规则,限制用户输入的格式?)。

再者,合法标记可以让那些给你的网站做预处理的工具功能最大化。例如,HTML Tidy 可以移除空白(whitespace)和可选的末尾标记(ending tags);然而,在有严重的错误标记的网页中这些工具便无法工作。

给内容分块

<div> 替代基于TABLE的布局或者将TABLE拆分为更小的TABLE,这样不必下载完整的网页内容就可以显示一小部分的TABLE。

<table>
  <table>
    <table>
          ...
    </table>
  </table>
</table>

用下图这样的结构比上图深层嵌套的结构更好一些:

<table>...</table>
<table>...</table>
<table>...</table>

指定图像和表格的大小

如果浏览器可以即时决定你的照片(images)和表格(tables)宽高,它在展示网页时就不必进行内容重新排版。这不仅可以加速网页的显示,还能在网页完成加载的过程中防止恼人的布局改变。因此,图片的 heightwidth 应尽可能确定下来。

表格可以使用 CSS 选择器:综合性能:

table-layout: fixed;

<col><colgroup> 元素来指定列宽。

合理的选择 user-agent

为使页面设计得到极大提升,应确保在工程中指定一个合理的user-agent。不要奢求你的内容在所有浏览器中都完美的展现,特别是在那些低版本的浏览器中。

理想情况下,你的页面运行的最小环境要基于现代浏览器,这个浏览器起码要支持一些相关的标准(如 html5 标准)。可以是最近版本的火狐,IE,谷歌Chrome,Opera还有Safari。

需要注意一下,这篇文章当中的许多tips都是些技术性常识,可以不必担心浏览器的支持需求而应用到任何user-agent和网页中去。

如果可能,使用 async 和 defer

 

确保 JavaScript 脚本兼容 async 和 defer,任何时候都要尽可能使用 async,特别是当你有较多的 script 标签(script tags)时。

这样在加载 JavaScript 的哦过程中页面就不会重新绘制,否则,浏览器在不具有这些特性的 script 标签后就不会重绘任何东西。

注意:这些特性在页面第一次加载时会有所帮助,你可以这样用但不能指靠它在所有的浏览器中起作用。如果你遵循指南(guidelines)写出了非常优秀的 JavaScript 代码,也不必要再去修改它了。

页面结构示例

· HTML

· HEAD
· LINK ...
CSS 文件用来修饰页面外观。在调试维护中把不相关的 CSS 拆分在不同文件中,且尽量减少文件的数量可以提高性能。
· SCRIPT ...
JavaScript 文件用来实现页面加载时的一些功能,但不是所有的 DHTML 在页面加载后才能运行。
在调试维护中把不相关的 JavaScript 拆分在不同文件中,且尽量减少文件的数量可以提高性能。
· BODY
在一块组件(tables / divs)中用户可见的页面内容,不必等页面完全加载也能显出来的。
· SCRIPT ...
被用来支持动态页面(DHTML)展示的脚本。
DHTML 脚本通常在页面完全加载或者所有必要的对象(objects)已初始化完毕之后才能运行。没有必要在页面内容之前加载这些脚本,这只会拖慢页面加载和初始化的体验。
在调试维护中把不相关的 script 拆分在不同文件中,且尽量减少文件的数量可以提高性能。
如有图像用到了反转效果,你应该在页面内容下载完后预加载这些图像。

 

文章原始信息

  • 作者:Bob Clary, Technology Evangelist, Netscape Communications
  • 最后更新:Published 2003年4月4日
  • 版权信息:Copyright © 2001-2003 Netscape. All rights reserved.
  • 注意:This reprinted article was originally part of the DevEdge site.
 

文档标签和贡献者

标签: 
此页面的贡献者: boltyu, TheaAo, wth, Samoay, ziyunfei, Y001, Mgjbot, Carrie zhxj
最后编辑者: boltyu,