Optimize html code to speed up web page loading

Do web developers have to master complex component technologies to speed up access to HTML pages? The answer is: not necessarily! In fact, there are many techniques for HTML and DHTML that are simple and easy to use. Whether you are a highly skilled veteran or a newbie to programming, understanding these is essential.

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

07e8890b109f087a56f323d63eee2cbb2cacc6d41bbb37262a98f745aa00fbf0

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 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927, save it to a separate .css file, and then use the 3e76e57fc5dd9b761bdd2082385f4936 tag or @import tag in the HTML page To quote:

        c9ccee2e6ea535a969eb3f532ad9fe89 

     @import url("mysheet1.css"); 

                                                                                                               Please note two points: 1. There is no need to include the c9ccee2e6ea535a969eb3f532ad9fe89 tag in the .css file; 2. The @import and LINK tags must be defined in the HEAD section of the HTML page.


Two ways to save precious 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 cannot be separated from the support of script programs. We often embed multiple types of scripts into the page. Scripting languages, 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 36879df9ec853b781d355f37a71b3fa0 tag? It's a very nice feature. If you want to include the content of the second page in an HTML document, the usual method is to use the 16a3272e017844f82176ca6782b05081 tag. But with 36879df9ec853b781d355f37a71b3fa0, everything becomes easier. For example, to develop a document preview page, you can place a series of topics on the left and an IFRAME on the right that contains the document to be previewed; when the mouse passes over each topic link on the left, a new IFRAME is created on the right. Preview the document. In doing so, the code efficiency is undoubtedly efficient, but at the same time it results in heavy processing and ultimately slow speed.

It doesn’t matter, we have a solution: 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 bunny 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:
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? Of course! Please 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 implement the function implemented by the above code:

element.style.posLeft += 10

The code is short 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 Fast than Display

让 will create very interesting effects when you are hidden. There are two methods to achieve this purpose: use CSS's Visibility attributes or display attribute. For absolutely positioned elements, dialog 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 flow, while the element set to visibility:hidden will still retain its 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 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 buffers are also treated differently Uppercase and lowercase strings. 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 all encountered the situation where the tags have a beginning and an end. For example:

  <P>有头无尾标记举例 
     <UL> 
     <LI>第一个
     <LI>第二个
     <LI>第三个
     </UL>

It is obvious that three cbf331b4cac0bfbcf2a714e444b23b14 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 spend time figuring out where a paragraph or list item ends.

 <P>有头有尾标记举例</P> 
     <UL> 
     <LI>第一个</LI> 
     <LI>第二个</LI> 
     <LI>第三个</LI> 
     </UL>

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 Optimize html code to speed up web page loading. For more information, please follow other related articles on the PHP Chinese website!