Speed page opening with HTML

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 a lot of techniques for HTML and DHTML that are simple in principle and easy to get started with. Whether it's a skilled veteran or a beginner of programming, it's essential to understand this.

Obvious html, Dark crossing "common script"

The key to reducing your Web page download time is to try to reduce the file size. When multiple pages share some component content, you can consider separating the common parts separately. For example, we can write a script program that is used by multiple HTML pages as a standalone. js file, and then invoke it in the page as follows:

<script src= "Myfile.js" ></script>

This way, the public file only needs to be downloaded once, and then it goes into the buffer. The next time the HTML page containing the common file is called again, the download time is significantly reduced.

Get style sheet content to work underground

CSS is an HTML designer, and a nice web page is impossible without it. There are many ways to refer to CSS in an HTML page, and different methods can lead to less efficiency. Typically, we can extract the style control code defined between <style></style>, save it in a separate. css file, and then refer to it as a <LINK> tag or @import tag in an HTML page:

<style>
@import url("mysheet1.css");
</style>

Please note 2:1, the. css file does not need to include <style> tags; 2, @import and link tags are defined in the Head section of an HTML page.

Two methods for saving valuable memory

Minimizing the amount of memory space occupied by HTML pages is an effective way to speed up page downloads. In this regard, there are 2 issues to be noted:

1. Using the same scripting language

HTML pages are inseparable from scripting programs, and we often embed multiple scripting languages, such as JavaScript and VBScript, in a page. But I don't know if you're aware of it: such blending slows down the page's access speed. The reason: to explain and run a variety of scripting code, you have to load a variety of scripting engines in memory. So try writing your code in the same scripting language on your page.

2, skillfully with the IFRAME

Have you ever used <IFRAME> mark? It's a very nice feature. If you want to include the contents of page 2nd in an HTML document, the usual approach is to use the <FRAMESET> tag. But with the <iframe>, everything becomes simpler. For example, develop a document Preview page where you can place a series of topics on the left and an iframe on the right that contains the document you want to preview; When the mouse hovers over each theme link on the left, a new IFrame is created on the right to preview the document. In doing so, code efficiency is undoubtedly efficient, but at the same time it leads to heavy processing and ultimately slow speed.

It doesn't matter, we have a way: 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. In this way, only one preview document will remain in memory at any time.

Selection of animation positioning attributes

Surfing the web every day, you will see a lot of animation effects. For example, a cute little bunny walking around on the page ... The core technology to achieve this effect is CCS positioning. In general, we use Element.style.left and ELEMENT.STYLE.TOP2 attributes to achieve the goal of graphic positioning. However, doing so can cause problems: the Left property returns a string and contains units of measure (such as 100px). Therefore, to set the new position coordinates, you must first process the string return value before you can assign a value, as follows:

dim stringLeft, intLeft
stringLeft = element.style.left
intLeft = parseInt(stringLeft)
intLeft = intLeft + 10
element.style.left = intLeft;

You're going to feel like doing something like this. Is there a simpler way to write such a complex code? Of course! Look at these 4 properties: Posleft, Postop, Poswidth, and Posheight, which correspond to the number of points in the corresponding string return value. OK, rewrite the code with these properties to implement the code above: