调整字号

让HTML加载更快的一些技巧

本文翻译自Mozilla Developer Network

以下提示基于常识和一些试验而得。

经过优化的网页不仅响应更快,同时也能降低服务器的压力,减少所需要的网络连接。对于一些高访问量的站点,或是由突发新闻等特殊情况而带来流量高峰的网站,这是非常重要的。

优化页面的加载性能不仅仅针对那些窄带或手机用户,对于网速较高的用户也同样重要。即使对于网速最快的访问者而言,也能带来显著的改善。

减小页面体积

页面体积大小是影响页面加载性能的最重要因素。

通过删除不必要的空格和注释(俗称最小化)来减小体积,并将内联脚本和CSS放置到外部文件中,可以提高性能,而且对页面结构的改动最小。

使用一些工具如HTML Tidy可以自动去除HTML文件中的空格和多余的空行。还有一些工具通过代码重排或者变量名替换来“压缩”JavaScript。

减少文件数

减少引用的文件数可以降低下载页面所需的HTTP连接数。

根据缓存设置,浏览器会针对每个CSS,JavaScript或图像文件向服务器发送一个If-Modified-Since请求,查询该文件自上一次下载以后是否发生过改动。

通过减少在网页中引用的文件数量,可以省去了发送请求以及接收响应的时间。

如果CSS中用到了许多背景图片,可以采用CSS Sprites,把多张背景图合并为一张来减少HTTP连接数。然后用这张图片替换原来的背景图,并设置合适的坐标。这一招用在尺寸大小固定的元素上效果非常好,但并不是所有的背景图都适合合并。HTTP连接数减少了,再利用浏览器的图像缓存,可以减小网页加载时间。

在渲染页面之前,浏览器必须检查每个CSS和脚本文件的修改时间。因此要花费很多时间去查询文件的最后修改时间,这会明显拖慢网页初次加载的速度。

减少DNS查询

如果外链的CSS,JavaScript或图片地址出现了站外域名,需要进行DNS查找,也会消耗一定时间,域名数量越多,查找时间就越长。所以应当尽量减少站外域名出现的数量,虽然有时候可能不太实际。

缓存重用内容

确保任何可缓存的内容都被缓存了,并设置合适的过期时间。

特别是要注意header信息中的 Last-Modified 。通过这个头部信息,浏览器可以知道文件的上一次修改日期,从而更有效地利用页面缓存。大多数Web服务器会根据文件的最后修改日期,为静态页面(.html, .css)自动加上 Last-Modified 信息,而对动态页面(.php .aspx等)则做不到。

所以针对动态生成的页面来研究这个问题会更有好处。少用动态页面,这样可以省去浏览器请求这些页面的时间,因为它们无法被缓存。

优化页面各元素顺序

确保浏览器最先下载页面主体内容以及初次加载所需的CSS或JavaScript,这样网页在加载时会反应更快。主体内容通常是文字,由于文本是压缩传输的,所以会更快地显示出来。

将JavaScript放在主体内容后面,可以提高页面加载性能。

减少内联脚本数量

内联脚本在页面加载时的开销会相当大,因为解析器假设内联脚本会在解析过程中改变页面结构,所以要等待脚本执行完毕再继续解析。少用内联脚本,尤其是少用 document.write() 方法来输出内容,这样可以提高整体的加载性能。针对现代浏览器用AJAX方法来操纵页面内容,而不是使用 document.write() 这样老式的方法。

使用现代CSS和正确的标签

使用现代的CSS可以减少标签数,减少为布局而使用的图片数,还可以抛弃那些用图片来代替的字体样式,因为图片耗费的性能远高于CSS。

正确地使用标签会有很多好处。首先,浏览器解析HTML时,没有必要进行纠错。同时,可以用一些工具来对网页进行预处理。例如,HTML Tidy可以去除空格和可选的结束标签,但是对于有严重错误的页面就无法执行。

用块来组织内容

应该抛弃表格布局,而换做 <div> 块布局,或者在不远的将来使用CSS3多栏布局以及CSS3弹性布局。

表格依然是一个有效的标签,但只应该在显示表格数据的时候用它。为了使浏览器更快地渲染你的页面,尽量避免嵌套表格。

不要像下面这样深嵌套:

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

使用非嵌套的表格,或者用div:

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

为图片和表格指定尺寸

如果浏览器可以立即确定图像和表格的高度、宽度,那就可以更快地显示出来而不会引起内容重排(reflow)。不仅加快了显示,也避免了页面加载以后布局又发生变化。因此,每张图片最好都指定宽高。

对表格应用如下的CSS:

  table-layout: fixed;

然后用 colcolgroup 标签指定列的宽度。

明智地选定UA要求

为了让页面设计有更大程度的进步,应该为项目设定一个合理的最低UA要求。不用要求在所有浏览器上均达到像素级的完美程度,特别是在低版本的浏览器中。

理想情况下,最低要求应该根据现代浏览器对标准的支持来制定。可以包括:FireFox 3.6+(所有平台),Internet Explorer 8.0+(Windows),Opera 10+(Windows),和Safari 4(Mac OS X)。

但是请注意,本文的许多提示都是广泛认可的技术,可以用在任何浏览器中而无需考虑支持情况。

还没有评论,沙发空缺中……
flight