Speed | web | Optimize Web developers must master complex component technology to speed HTML page access? 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:
Element.style.posLeft + 10
code is short, speed is faster!
Loops Control Multiple animations
When it comes to making animation, of course the use of the timer. The usual approach is to use window.settimeout to constantly position the elements on the page. However, if there are more than one animation on the page to display, is it necessary to set more than one timer? 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, and the trick is to use a loop. Control the position of the animation according to the variable values in the loop, using only one window.settimeout () function call in the entire loop.
Visibility faster than display
There are 2 ways to do this by making the picture come and go: using the CSS visibility attribute or display property. For absolute position elements, diaplay and visibility have the same effect. The difference is that elements that are set to Display:none will no longer occupy the space of the document flow, while elements set to Visibility:hidden remain in place.
However, if you want to handle elements of absolute position, it is quicker to use visibility.
Start Small
One important tip for writing a DHTML Web page is to start small. When you first write a DHTML page, be sure not to try to use all of the DHTML features you've learned in the page. You can use only one single new feature at a time, and carefully observe the resulting changes. If you find that performance has fallen, you can quickly find out why.
the defer of the script
Defer is one of the "unsung heroes" of the Scripting power. You may never have used it, but after reading this introduction, believe you can not live without it. It tells the browser that the script section contains code that does not need to be executed immediately, and that it is used in conjunction with the SRC attribute to enable the scripts to be downloaded in the background, and the contents of the foreground are displayed to the user normally.
Finally, please note two points:
1, do not call the document.write command in the defer script segment, because document.write will produce a direct output effect.
2. Also, do not include any global variables or functions that are to be used for immediate execution of scripts in the defer script segment.
keep the case consistency of the same URL
We all know that UNIX servers are case-sensitive, but do you know that Internet Explorer's buffers also treat case strings differently. Therefore, as a web developer, be sure to remember that the URL string that keeps the same link is case-sensitive in different locations. Otherwise, a different file backup in the same location is stored in the browser's buffer, and the number of requests to download the contents of the same location is increased. These all undoubtedly reduce the efficiency of Web Access. So remember: URLs in the same location, keep the case consistency of the URL strings in different pages.
let the mark finish
When you write or view other people's HTML code, we must all encounter the situation of tagged halves. Like what:
<P> Halves Mark Example
<UL>
<LI> First
<LI> a second
<LI> a third
</UL>
Obviously, there are three </LI> end tags missing from the above code. But that doesn't prevent it from being executed properly. In HTML, there are a few such tags, such as frame, IMG, and P.
But please do not be lazy, please write the closing tag complete, this not only makes the HTML code format specification, but also can speed up the display speed of the page. Because Internet Explorer will not take time to judge and calculate where paragraphs or list items end.
<P> Manage Mark Example </P>
<UL>
<LI> First </LI>
<LI> Second </LI>
<LI> a third </LI>
</UL>
OK, here's a list of 10 techniques for speeding up HTML pages, and it's simple to describe them, but you can write faster, better programs only if you really understand and grasp the nature of it and extrapolate.
