How to optimize HTML to speed up web pages

Obviously HTML, secretly crossing "public script" The key to reducing web page download times is to find ways to reduce file size. When multiple pages share some component content, you can consider separating these common parts separately. For example: we can write a script program used by multiple HTML pages into an independent .js file, and then call it in the page as followsObvious HTML, secretly transfer "common script"

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 a script used by multiple HTML pages into an independent .js file, and then call it in the page as follows:

In this way, public files only need 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 , save it to a separate .css file, and then use the tag or @import tag in the HTML page To quote:
​                                                                                                             
Please note 2 points:

1. There is no need to include the

2. The @import and LINK tags must be defined in the HEAD section of the HTML page.

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 2 issues that need attention:

1. Use the same scripting language HTML pages are inseparable from the support of script programs. We often embed multiple scripting languages ​​​​in the page, such as JavaScript and VBScript. However, I wonder if you have noticed: this mixed use slows down the access speed of the page. 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 Only use 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.


Select the animation positioning attributes 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 new position coordinates, you must first process the string return value and then assign it, as follows: ​                                  dimstringLeft,intLeft
stringLeft=element.style.left
intLeft=parseInt(stringLeft)
intLeft=intLeft 10
element.style.left=intLeft;
You must feel that you have to write such complicated code to do such a small thing. Is there a simpler way?

Look at these 4 attributes: posLeft, posTop, posWidth and posHeight, which correspond to the point value of the corresponding string return value. Okay, let’s rewrite the code using these properties to achieve the functions implemented by the above code:
element.style.posLeft =10
The code is shorter and faster!
Loop control of 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 based on different variable values. Only one window.setTimeout() function call is used in the entire loop.
Visibility is faster than Display
Making the picture appear and disappear will create a very interesting effect. There are two ways to achieve this: use the CSS visibility attribute or the display attribute. 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.
DEFERization of scripts
DEFER is an "unsung hero" among the powerful functions of script 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 a direct output effect.
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 we write our own or view other people's HTML code, we must have encountered the situation where the tags have a beginning and an end. for example:
​                    

Examples of header and tail tags

• The first one
  
• The second one
  
• The third one
  UL>
  Obviously, the three
closing tags are missing in the above code. But this does not prevent its correct execution. In HTML, there are other such tags, such as FRAME, IMG and P.
But please don’t be lazy. Please write the closing tag completely. This will not only standardize the HTML code format, but also speed up the display speed of the page. Because Internet Explorer won't take the time to figure out where a paragraph or list item ends.
​                    

##

• The third

OK, the above lists 10 processing techniques for accelerating HTML pages. It is very simple to describe these, but only by truly understanding and mastering the essence and drawing inferences from one example can you write faster and better programs.                                                                                                                              

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