Introduction to methods of using HTML optimization to speed up web pages

The key to reducing web page download time is to try to reduce the file size. When multiple pages share some component content, you can consider separating these common parts separately. For example: we can write scripts that are used by multiple HTML pages to exist independently. js file, and then call it in the page as follows:

The following is the quoted fragment:

In this way, the public file only needs to be downloaded once and then enter the buffer. The next time the html page containing the public file is called again, the download time will be significantly reduced.

Let the style sheet content work underground

CSS is an HTML decorator, and a beautiful Web page cannot be without it. There are many ways to reference CSS in HTML pages, and different methods lead to different efficiencies. Usually, we can extract the style control code defined between and save it in a separate file. css file, and then quote it in the HTML page using the tag or the @import tag:

The following is a quote fragment:

@import url（"mysheet1.css"）;

Please note 2 points: 1. There is no need to include the

Two ways to save valuable memory

Minimizing the memory space occupied by HTML pages is an effective way to speed up page downloads. In this regard, there are two issues that need attention:

1. Use the same scripting language

HTML pages are inseparable from the support of script programs. We often embed multiple script languages ​​​​in the page, such as JavaScript and VBScript. However, I wonder if you have noticed: This The mixed usage slows down page access. The reason is: to interpret and run multiple script codes, multiple script engines must be loaded in memory. Therefore, please try to use the same scripting language to write code in the page.

2. Use IFrame skillfully

Have you ever used the

Use only a single IFRAME. When the mouse points to a new theme, you only need to modify the SRC attribute of the IFRAME element. This way, only one preview document remains in memory at any time.

Choose the best to useAnimationPositioning properties

When you browse the Internet every day, you will definitely see many animation effects. For example, a cute little rabbit walks back and forth on the page... The core technology to achieve this effect is CCS positioning. Usually, we use element.style.left and element.style.top two properties to achieve the purpose of graphic positioning. However, doing this will cause some problems: the left attribute returns a string, and it contains the unit of measurement (such as 100px). Therefore, to set a new position coordinate, you must first process the string return value and then assign it, as follows:

The following is a reference fragment:

dim stringLeft, intLeft

stringLeft = element.style.left

intLeft = parseInt(stringLeft)

intLeft = intLeft + 10

element.style.left = intLeft ;

You must feel that it is necessary to write such complicated code to do such a thing. Is there a simpler way? Look at these 4 properties: posLeft, posTop, posWidth and posHeight, which correspond to the point value of the corresponding string return value. Okay, use these properties to rewrite the code to achieve the functions implemented by the above code:

The following is a reference fragment:

element.style.posLeft += 10

The code is short, But faster!

LoopControl multiple animations

When it comes to creating animation effects, of course, the use of timers is inseparable. The usual method is to use window.setTimeout to continuously position elements on the page. However, if there are multiple animations to be displayed on the page, is it necessary to set multiple timers? The answer is No! The reason is simple: the timer function consumes a lot of valuable system resources. But we can still control multiple animations on the page. The trick is to use a loop. In the loop, the position of the corresponding animation is controlled according to different variable values. Only one window.setTimeout() function call is used in the entire loop.

Visibility Faster than Display

Making the picture appear and disappear will create a very interesting effect. There are 2 ways to achieve this purpose: Use CSS visibility property or display property. For absolutely positioned elements, dialog and visibility have the same effect. The difference between the two is that elements set to display:none will no longer occupy space in the document flow, while elements set to visibility:hidden will still retain their original position.

But if you want to deal with absolutely positioned elements, it will be faster to use visibility.

Start Small

An important tip when writing DHTML web pages is: start small. When writing a DHTML page for the first time, be sure not to try to use all the DHTML features you know in the page. You can use a single new feature at a time and carefully observe the resulting changes. If you notice a drop in performance, you can quickly find out why.

DEFER the script

DEFER is an "unsung hero" in the power of scripting programs. You may have never used it, but after reading the introduction here, I believe you can't live without it. It tells the browser that the Script segment contains code that does not need to be executed immediately, and, used in conjunction with the SRC attribute, it can also cause these scripts to be downloaded in the background, and the content in the foreground is displayed to the user normally.

Finally, please note two points:

1. Do not call the document.write command in a defer-type script segment, because document.write will produce direct output effects. .

2. Moreover, do not include any global variables or functions to be used by the immediate execution script in the defer script segment.

Maintain case consistency for the same URL

We all know that UNIX servers are case-sensitive, but did you know: Internet Explorer's buffer also treats uppercase and lowercase strings differently. Therefore, as a web developer, you must remember to keep the capitalization of URL strings for the same link consistent in different locations. Otherwise, different file backups of the same location will be stored in the browser's buffer, which will also increase the number of requests to download content from the same location. These undoubtedly reduce the efficiency of web access. So please remember: for URLs at the same location, please keep the URL string case consistent in different pages.

Let the tags have a beginning and an end

When writing our own or viewing other people's HTML code, we must have all encountered the situation where the tags have a beginning and an end. For example:

The following is a quotation fragment:

Example of header and tail mark

• First

• The second one

• The third one

Obviously, the three closing tags are missing from the above code. But this does not prevent its correct execution. In HTML, there are still some such tags, such as FRAME, IMG and P.

But please don’t be lazy. Please write the end tag completely. This will not only standardize the HTML code format, but also speed up the development of the page. Display speed. Because Internet Explorer won't take the time to figure out where a paragraph or list item ends.

The following is a quotation fragment:

Example of head and tail mark

• No. One
• The second
• The third

< ;/UL>

The above is the detailed content of Introduction to methods of using HTML optimization to speed up web pages. For more information, please follow other related articles on the PHP Chinese website!