让HTML加载更快的一些技巧

本文翻译自Mozilla Developer Network

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

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

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

减小页面体积

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

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

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

减少文件数

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

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

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

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

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

flight