HTML optimization speeds up web pages

The key to reducing the download time of web pages is to try to reduce the file size. When multiple pages share some ingredient content, you can consider separating these common parts separately. For example: We can write scripts used by multiple HTML pages into independent .js files, and then call it in the page as follows:

<scriptsrc=myfile.js></script>

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

CSS is an HTML dress-up, and a beautiful web page cannot be without it. There are many ways to reference CSS in HTML pages, and the efficiency of different methods is different. Usually, we can extract the style control code defined between <style></style>, save it to a separate .css file, and then reference it in the HTML page in the <LINK> tag or @import tag:

<style>

@importurl(mysheet1.css);

</style>

Please note 2 points: 1. The <style> tag is not required to be included in the .css file; 2. @import and LINK tags should be defined in the HEAD part of the HTML page.

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

HTML pages cannot be separated from the support of script programs. We often embed multiple scripting languages ​​into the pages, such as JavaScript and VBScript. However, I don’t know if you notice: such a mixture slows down the access speed of pages. The reason is that to interpret and run multiple script codes, multiple script engines must be loaded in memory. So, please try to write code in the same scripting language on the page.

Have you used the <IFRAME> tag? It is a very wonderful feature. If you want to include the content of the second page in an HTML document, the usual way is to use the <FRAMESET> tag. But with <IFRAME>, everything becomes simple. For example, to develop a document preview page, you can place a series of topics on the left and an IFRAME on the right, which contains the document to be previewed; when the mouse passes through each topic link on the left, create a new IFRAME on the right to preview the document. In doing so, the code efficiency is undoubtedly efficient, but at the same time it leads to heavy processing and ultimately slow speed.

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

When you browse the page online every day, you will definitely see many animation effects. For example, a cute little rabbit is walking 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 to achieve the purpose of graphic positioning. However, doing this creates some problems: the left property returns a string and contains the unit of measurement (such as 100px). Therefore, to set a new position coordinate, you must first process the return value of the string before you can assign the value, as follows:

dimstringLeft,intLeft

stringLeft=element.style.left

intLeft=parseInt(stringLeft)

intLeft=intLeft 10

element.style.left=intLeft;

You will definitely feel that you have to write such complex code to do such a little thing. Is there a more concise way? Look at these 4 properties: posLeft, posTop, posWidth and posHeight, which correspond to the number of points of the corresponding string return value. OK, use these properties to rewrite the code to implement the functions implemented by the above code:

element.style.posLeft =10

The code is shorter, but faster!

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

Let the picture appear and appear occasionally create interesting effects. There are two ways to achieve this: use the visibility attribute or display attribute of CSS. For absolute position elements, diplay and visibility have the same effect. The difference between the two is that the element set to display:none will no longer occupy the space of the document stream, while the element set to visibility:hidden will still remain in its original position.

But if you want to deal with elements in absolute position, using visibility will be faster.

An important tip for writing a DHTML web page 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. Only a single new feature can be used at a time and the resulting changes can be carefully observed. If you find that performance has declined, you can quickly find why.

DEFER is an unsung hero among the powerful functions 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, in conjunction with the SRC attribute, it can also enable these scripts to be downloaded in the background, and the content of the foreground is displayed to the user normally.

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

2. Moreover, do not include any global variables or functions to use to execute the script immediately in the defer script block.

We all know that UNIX servers are case sensitive, but did you know that the buffers of Internet Explorer also treat case strings differently. Therefore, as a web developer, you must remember to keep the case consistency of URL strings of the same link in different locations. Otherwise, backups of different files in the same location will be stored in the browser's buffer, which will also increase the number of requests to download content in the same location. All of these undoubtedly reduce web access efficiency. So please remember: URLs in the same location, please keep the case consistency of URL strings in different pages.

When writing or viewing other people's HTML code by ourselves, we must have encountered situations where the marks have no end. for example:

<P>Example with head and no tail marks

<UL>

<LI>The first

<LI>The second

<LI>The third

</UL>

Obviously, there are three </LI> end tags missing in the above code. But this does not prevent it from being properly executed. In HTML, there are some such tags, such as FRAME, IMG, and P.

But please don't be lazy. Please write the end mark intact. This not only makes the HTML code format standard, but also speeds up the display speed of the page. Because Internet Explorer will not spend time judging and calculating where the paragraph or list item ends.

<P>Example with head and tail marks</P>

<UL>

<LI>First</LI>

<LI>Second</LI>

<LI>Third</LI>

</UL>

OK, the above lists 10 processing techniques for speeding up HTML pages. It is simple to describe these, but only by truly understanding and mastering the essence of it and learning from one example or another can you write faster and better programs.