HTML optimization speeds up web pages
|
Obvious HTML, hidden "public script" The key to reducing web page download time is to find ways to reduce file size. When multiple pages share some common content, you can consider separating these common parts. 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: <scriptsrc="myfile.js"></script> This way, common files only need to be downloaded once and then go into the buffer. The next time you call the HTML page containing the public file, the download time will be significantly reduced. Keeping stylesheet content underground CSS is the HTML dresser, and a beautiful web page cannot be without it. There are many ways to reference CSS in HTML pages, and different methods result in different efficiency. Usually, we can extract the style control code defined between <style></style>, save it into a separate .css file, and then reference it in the HTML page using the <LINK> tag or @import tag: <style> @importurl("mysheet1.css"); </style> Please note two points: 1. There is no need to include the <style> 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 valuable memory <br /> 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 do without the support of scripting programs. We often embed multiple scripting languages into the pages, such as JavaScript and VBScript. However, I wonder if you have noticed that this mixed use slows down page access. The reason is: to interpret and run multiple script codes, multiple script engines must be loaded into memory. Therefore, please try to use the same scripting language to write code in the page. 2. Use IFrames Have you ever used the <IFRAME> tag? It's a very wonderful feature. If you want to include the content of a second page in an HTML document, the usual method is to use the <FRAMESET> tag. But with <IFRAME>, everything becomes simple. For example, when developing 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 over each topic link on the left, a new IFRAME is created on the right to preview the document. Doing so makes the code efficient, but also results in heavy processing and ultimately slow speed. Use only a single IFRAME. When the mouse points to a new topic, just modify the SRC attribute of the IFRAME element. This way, only one preview document will be kept in memory at any time. Select the best animation positioning attributes <br /> When you browse the web 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 the element.style.left and element.style.top properties to achieve the purpose of graphic positioning. However, this creates some problems: the left property returns a string that contains the measurement unit (such as 100px). Therefore, to set the 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 properties: posLeft, posTop, posWidth and posHeight, which correspond to the point values of the corresponding string return values. Ok, let's rewrite the code using these properties to achieve the same thing as above: element.style.posLeft =10 Smaller code, faster speed! Loop control of multiple animations <br /> When it comes to creating animation effects, the use of timers is of course indispensable. The usual method is to use window.setTimeout to continuously locate elements on the page. However, if there are multiple animations to be displayed on the page, do we need to set multiple timers? The answer is No! The reason is simple: the timer function will consume a lot of precious 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 according to different variable values, and only one window.setTimeout() function call is used in the entire loop. Visibility is faster than Display Making an image appear and disappear can create interesting effects. There are two ways to achieve this: using the CSS visibility property or the display property. For absolutely positioned elements, display 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 are dealing with absolutely positioned elements, using visibility is faster. Start small <br /> An important tip for writing DHTML web pages is: start small. When you first write a DHTML page, be sure not to try to use all the DHTML features you know in your page. You can use only 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. DEFER script DEFER is an unsung hero among the powerful features of scripting programs. You may have never used it, but after reading the introduction here, I believe you will be unable to 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, while the foreground content is displayed normally to the user. Finally, please note two points: 1. Do not call the document.write command in a defer script segment, because document.write will produce direct output effects. 2. Also, do not include any global variables or functions that are to be used by the immediately executed script in the defer script segment. Keep the case consistency of the same URL <br /> We all know that UNIX servers are case-sensitive, but did you know that Internet Explorer's buffer also treats uppercase and lowercase strings differently. Therefore, as a web developer, you must remember to keep the capitalization of the URL string of the same link consistent in different locations. Otherwise, different file backups at the same location will be stored in the browser's buffer, increasing the number of requests to download content at the same location. These undoubtedly reduce the efficiency of web access. So please remember: for URLs in the same location, please keep the capitalization of the URL string consistent on different pages. Make the tags have a beginning and an end <br /> When writing our own or viewing other people's HTML code, we must have encountered the situation where the tags have a beginning but no end. for example: Example of a tag with a head but no tail <UL> <LI>The first <LI>The second <LI>The third </UL> Obviously, there are three missing </LI> closing tags in the code above. But this does not prevent it from being executed correctly. In HTML, there are some other such tags, such as FRAME, IMG and P. But please don't be lazy, please write the end tag completely. This will not only make the HTML code format standard, but also speed up the display speed of the page. Because Internet Explorer will not spend time determining and calculating where a paragraph or list item ends. <P>Example of a head and tail tag</P> <UL> <LI>First</LI> <LI>The second one</LI> <LI>The third one</LI> </UL> OK, the above lists 10 processing techniques for speeding up HTML pages. It is simple to describe them, but only by truly understanding and mastering the essence of them and applying them to other situations can we write faster and better programs. |
>>: Detailed tutorial on installing Docker and docker-compose suite on Windows
Recommend
Solution to "No such file or directory" in locale after installing glibc-2.14 in CentOS6.5
Table of contents 1. Falling into the pit 2. Stru...
Instructions for recovering data after accidental deletion of MySQL database
In daily operation and maintenance work, backup o...
Why Seconds_Behind_Master is still 0 when MySQL synchronization delay occurs
Table of contents Problem Description Principle A...
Detailed explanation of the basic usage of the img image tag in HTML/XHTML
The image tag is used to display an image in a we...
Mysql sorting to get ranking example code
The code looks like this: SELECT @i:=@i+1 rowNum,...
Understand CSS3 FlexBox elastic layout in 10 minutes
Basic Introduction Features Flexbox is a CSS disp...
How to display small icons in the browser title bar of HTML webpage
Just like this effect, the method is also very si...
Docker and portainer configuration methods under Linux
1. Install and use Docer CE This article takes Ce...
Implementation code for installing vsftpd in Ubuntu 18.04
Install vsftpd $ sudo apt-get install vsftpd -y S...
Mysql splits string into array through stored procedure
To split a string into an array, you need to use ...
How to quickly add columns in MySQL 8.0
Preface: I heard a long time ago that MySQL 8.0 s...
Implement MySQL read-write separation and load balancing based on OneProxy
Introduction Part 1: Written at the beginning One...
The corresponding attributes and usage of XHTML tags in CSS
When I first started designing web pages using XH...
Detailed explanation of the this pointing problem in JavaScript
Summarize Global environment ➡️ window Normal fun...
MYSQL performance analyzer EXPLAIN usage example analysis
This article uses an example to illustrate the us...