如何制作快速加载的HTML页面

整理出来的tip

减小页面的大小

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

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

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

最小化文件数量

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

Depending upon a browser's Cache settings, it may send an If-Modified-Since request to the web server for each CSS, JavaScript or image file, asking if the file has been modified since the last time it was downloaded.

By reducing the number of files referenced in a web page, you reduce the time required for these requests to be sent and their responses to be received.

Too much time spent querying the last modified time for referenced files can delay the initial display of a web page since the browser must check the modification time for each CSS or JavaScript file before rendering the page.

减少域名查找

Since each separate domain costs time in a DNS lookup, reducing the number of separate domains used to reference CSS, JavaScript and images reduces page load times.

This may not always be practical; however, you should always be careful to only use the minimum number of different domains in your pages as possible.

缓存重用的内容

Make sure that any content that can be cached is cached with appropriate expiration times.

In particular pay attention to the Last-Modified header. It allows for efficient caching of pages; by means of this header, information is conveyed to the user agent as to when the file it wants to load has last been modified. For static pages (e.g. .html, .css), most web servers will already automatically append the Last-Modified header, based on the last modified date stored in the file system. For dynamic pages (e.g. .php, .aspx), this of course can't be done, and the header is not sent.

So, in particular for pages which are generated dynamically, a little research on this subject is beneficial. It can be somewhat involved, but it will save a lot of page requests on pages which would normally not be cacheable.

More information:

高效地排列页面组件

Download page content first so the user gets the quickest apparent response for page loading.

The content of the page along with any CSS or JavaScript required for its initial display should be downloaded first. This content is typically text and can benefit from text compression in the modem thus providing a quick response to the user.

Any DHTML features that require the page to complete loading before being used should be initially disabled and only enabled after the page loads. This will allow the DHTML JavaScript to be loaded after the page contents thus improving the overall appearance of the page load.

减少内联脚本的数量

Inline scripts can be expensive for page loading since the parser must assume that an inline script can modify the page structure. Reducing the use of inline scripts in general, and reducing the use of document.write() to output content in particular can improve overall page loading. Use modern W3C DOM methods to manipulate page content for modern browsers rather than the older approaches based on document.write().

使用现代CSS和合法标记

Use of modern CSS reduces the amount of markup, can reduce the need for images in terms of layout, and can in many ways replace images which are actually only images of text and cost much more than the equivalent CSS and text.

Using valid markup has other advantages. Not only do browsers not have to perform "error correction" when parsing the HTML, valid markup allows free use of other tools which canpre-process your web pages. For example, HTML Tidy can remove whitespace and remove optional ending tags, however, it will refuse to run on a page with serious markup errors.

给内容分块

Either replace table-based layout with <div> blocks or break tables into smaller tables that can be displayed without having to download the entire page contents.

Rather than deeply nesting tables as in:

指定图像和表格的大小

If the browser can immediately determine the height and/or width of your images and tables, it will be able to display a web page without having to reflow the content. This not only speeds the display of the page but prevent annoying changes in a page's layout when the page completes loading.

Images should have height and width specified.

Tables should use the CSS rule table-layout: fixed and specify widths of columns using COL and COLGROUP tags.

Choose your user agent requirements wisely

To achieve the greatest improvements in page design make sure that reasonable user agent requirements are specified for projects. Do not require your content to appear pixel-perfect in all browsers, especially not in downlevel browsers.

Ideally, your basic minimum requirements should be based upon modern browsers which support the relevant standards. This can include: Netscape 7/Gecko 1.0.2+ on any platform, Internet Explorer 5.5+ on Windows, Opera 7+ on Windows, and Safari on Mac OS X.

Note however that many of the tips listed in this Technote are common sense techniques which apply to any user agent and can be applied to any web page regardless of browser support requirements.