當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2025/3/21 HTML 18 豆豆

生活随笔收集整理的這篇文章主要介紹了如何制作快速加载的HTML页面小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

以下技巧都是基于通用的知識和經驗，如果你有可以幫助他人提高頁面加載性能的其它方法，可以在本文討論區提出。

一個好的頁面不僅要給訪客提供一個更有效的站點，同時也需要降低你的服務器壓力和網絡請求。后者對于那些高訪問量的站點，或在有爆炸性新聞出現等特殊情況下會出現流量突增的站點來說尤為關鍵。

頁面加載性能的優化不僅僅是針對那些帶寬有限的撥號上網用戶需要看的內容，對于提供給寬帶用戶訪問的內容同樣重要并且可以導致巨大的提升，哪怕對于那些擁有最快網速的訪客。

Tips

減小頁面的大小

在頁面下載中，頁面的大小至今扮演著非常重要的因素。

減小頁面的大小能夠通過排除不必要空格，注釋，動態內嵌腳本，和放入外部文件的 CSS 等在頁面結構中很小的改變都能夠提高下載性能。

諸如HTML Tidy這類的工具可以從有效的HTML源文件中自動截去行首空格和額外的空行，其它工具則可以通過重新格式化源代碼來壓縮JavaScript或者通過混淆源碼將長標識符替換為短標識符來減小文件大小。

最小化文件數量

減少一個頁面引用的文件數量可以降低在下載一個頁面的過程中需要的HTTP請求數量。

根據其緩存設置，瀏覽器可能會為每個 CSS/JavaScript/image 文件發送一個 If-Modified-Since 請求給網絡服務器，以查詢這些文件自上次加載后是否有被修改。

通過減少鏈接至網頁的文件數量，你可以減少發送這些請求以及接收它們回應的時間。

在查詢引用文件是否被修改上花費太多時間會延遲網頁的初始化顯示，因為在渲染頁面之前瀏覽器必須確認每個 CSS 或 JavaScript 文件的修改時間。

減少域名查找

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:

HTTP Conditional Get for RSS Hackers

HTTP 304: Not Modified

On HTTP Last-Modified and ETag

高效地排列頁面組件

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:

use unnested tables or divs 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.

頁面結構示例

·?HTML

·?HEAD

·?LINK?...
CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance.

·?SCRIPT?...
JavaScript files for functions?required?during the loading of the page, but not any DHTML that can only run after page loads.

Minimize the number of files for performance while keeping unrelated JavaScript in separate files for maintenance.

·?BODY

· User visible page content in small chunks (tables / divs) that can be displayed without waiting for the full page to download.

·?SCRIPT?...
Any scripts which will be used to perform DHTML. DHTML script typically can only run after the page has completely loaded and all necessary objects have been initialized. There is no need to load these scripts before the page content. That only slows down the initial appearance of the page load.