20 client code optimization methods

ArticleDirectory

• CSS Optimization
• Javascr platinum PT Optimization
• File Optimization

Write for yourselfCode, Compiled for use

AnyProgramThe members clearly know that there is a reasonable reason for not delivering the code they use as the final code. When writing code, it is best to write as many comments as possible to maximize the readability of the Code through the orchestration format, while avoiding excessive conciseness and preventing obscure code from causing difficulties for future maintenance. Then we use the compilerSource codeConvertOthersFormat, on the one hand to achieve optimal execution, on the other hand, can prevent decompilation, so as to avoid source code being plagiarized. The above model is also applicable to website development. The specific method is: first prepare the source code of the website and webpage, and then use some simple technologies (such as: reduce the blank areaImageAndScriptOptimization, file rename, etc.) to reduce the source code and then you can use the prepared website and web page delivery.

I hope this concept is not abrupt for you, because at least you are likely to operate on the copy of your site, rather than directly making changes and updates on the running site. If this is not the case, stop reading this article and make a copy of your site! Whether your website's content is static manuals or very complex content management systems to drive (CMS-driven) applications, this is the only correct way to develop your website. If you do not believe it now, I dare say that you will soon believe it when you have damaged some of the website's files but find it hard to recover.

When building a website, you may focus on the biggest culprit that causes low download speeds-images and binary files (such as flash. Reducing the color of GIF image files, compressing the size of JPEG image files, and optimizing SWF files is of great benefit. Other helpful methods cannot be underestimated. Remember the first rule in the website's performance law. We have to constantly try to transmit as little data as possible, whether it is a markup file, image, or script. The effort to reduce the number of bytes in (x) HTML, CSS, and javascr limit PT files seems to be very busy, but this may be the most important thing to pay attention.

In a typical webpage loading process, (x) HTML files are first read by browsers. Since this file determines the relationship between other files, we can call this file host document ). Once the browser receives the main file, it starts to parse various markups. Generally, at the same time, it will also trigger a series of requests for related objects, for example, external scripts, associated style forms, images, or embedded flash. These CSS and javascr javaspt files may continue to trigger requests for related images or scripts. The faster the requests to related files are queued, the faster they reach the browser, and the earlier the page is displayed. After understanding the importance of the main file, we know the importance of passing it to the browser as soon as possible and parsing it, because although the main file itself is relatively small, but it can seriously impede the loading speed of web pages. You need to understand that the user does not care about the number of bytes you use, and the user cares about the time!

How do you prepare for Optimal Transmission? One basic method is to reduce the blank area, streamline CSS and reduce Cr into PT, change the file name, and adopt the same policy for the code to be submitted, make it simpler and better (Google is an example ). these general skills are well-known and can be found on many websites and some books, such as Andy King's speed up your site: website optimisation. This article lists the top 20 tips that we think are the most effective in optimizing markup and code. Of course, you can do some optimization manually, or use a web editor and tools to complete some optimization. Of course, you can also develop your own Streamlined tools. We will introduce you to a tool w3compiler developed by port80. it implements almost all the techniques mentioned below, and also reflects the commercial value of code optimization tasks in the "real" world. Next, let's talk about these skills!

Markup Optimization

Typical markup files are either manually edited and contain comments and white space files based on the compact and standard format. They are also generated by the editor, very obese, with overly formatted orchestration and Editor-specific comments that are usually used to control the structure, there may even be a lot of repetitive and unmodified or code. Both are not Optimal Transmission Conditions. The following tips are safe and easy, and are a good way to reduce the file size:

1. Try to remove blank areas

Generally, characters in the blank area (spaces, tabs, line breaks, etc.) can be safely deleted, but do not modify them.Pre,Textarea, And Under CSS attributesWhite-spaceThe affected tag.

2. Remove comments

In additionDoctypeIn addition to the declared condition annotations, almost all annotations can be safely removed.

3. Color Representation in the shortest format

When using color, do not use hexadecimal or full color name. Try to use the shortest color format as needed. For example# Ff0000You can use the color attributeRed </code to describe, andLightgoldenrodyellowCan be changed to # fafad2# Fafad2.

4. Use characters in the shortest format

Like the shortest color, some names can be represented by shortest characters. We can use short numbers to replace some long letters. For example:& Egrave; Can be changed?. Or, this method can be reversed occasionally, for example:BytesIf it becomes& ETHYou can save one byte. However, this method is not safe and has limited results.

5. Remove useless tags

Some 'spam markup, such as using repeated tags multiple times or some editors for advertisementMetaTags can be safely deleted.

CSS Optimization

CSS also has a set of mature and simple optimization methods. In fact, most of the current CSS is easier to compress than (x) HTML. The skills listed below are safe except the last one. The last web page involving the client may become more complex.

6. Remove the blank area in CSS.

Compared with (x) HTML, CSS is not so sensitive to blank areas, so the CSS file andStyleThe size of the area of the style sheet.

7. Remove CSS comments

Just like removing the comments in the markup code, the comments in CSS should also be removed because they have no practical value for common end users. However, if you consider a low-level browserStyleThe comment shielding information in the tag cannot be removed.

8. Use the shortest format to represent the color value

Like HTML, CSS colors can also be expressed in word or hexadecimal format. Note that the effect in CSS is slightly more obvious. It is mainly because CSS supports three hexadecimal values, such as available for white.# Fff.

9. merge, reduce, or delete CSS rules

CSS rules, such as font size and font weight, can often be expressed using a shorthand comment for a Single-attribute font. If this technique is used properly, you can set the following rules:

P {font-size: 36pt;
Font-family: Arial;
Line-Height: 48pt;
Font-weight: bold ;}

Rewrite it to the following short form:

P {Font: bold 36pt/48pt Arial ;}

If the inheritance method is used properly, you can also find that some rules in the style sheet can be significantly reduced or simply deleted. So far, there is no tool for automatically removing rules, so you can only manually adjust the CSS wizard (wizard) to do this. However, this feature will be available in the upcoming w2compiler 2.0.

10. Rename the class and ID values.

The most dangerous action in CSS optimization is to rename the class or ID value. Take a look at the following rules:

. Superspecial {color: red; font-size: 36pt ;}

You can rename it ss. The same principle can be followed for the ID value, for example:

# Firstparagraph {background-color: yellow ;}

You can rename the original "# firstparagraph" to "# FP" and repeat this action throughout the document. It is true that this may involve the issue of "ID-style-script" dependency: if a "tag" has an ID value, this value may not only be used for style sheets, it may also be used for Script Reference, or even a link destination address. In this case, once you modify this value, you must ensure that all relevant scripts and Link References are modified accordingly, including this value in other files, therefore, be careful.

Changing the class value is less risky than changing the id value. Because experience tells us that, compared with the ID value, most programmers who use the distinct Cr into pT do not often process class values. However, changing the class name to reduce the CSS size also faces the same problem as changing the ID name. Therefore, we must be careful again.

Note: It is best not to change the name attribute, especially the name attribute in the form area. These values are also operated by the server program. Although not impossible, it is difficult for most websites to calculate these dependencies.

Javascr platinum PT Optimization

More and more websites rely on javascr into pt to generate navigation menus, table validation, and a variety of other practical things. Not surprisingly, most of these codes are very cumbersome and need to be optimized. Many optimization technologies for javascr merge PT code are similar to those for markup code and CSS. However, the optimization of ipvcr platinum PT must be more careful, because once the operation is incorrect, the result may not only be display deformation, but may lead to incomplete web page defects. Next, let's take a look at some of the simplest and clearer methods, and then explore the skills that require careful operation.

11. Remove the comment of javascr platinum PT

Besides Note: All other // or/**/Annotations can be safely deleted, because they are meaningless to end users (unless someone wants to know how your script works ).

12. Remove the blank area in the distinct Cr platinum PT.

Interestingly, it is not as useful as you might think to remove the blank areas in the distinct Cr platinum PT. On the one hand, the Code is as follows:

X = x + 1;

It can be written briefly.

X = x + 1;

However, many casual programmers will forget to add a semicolon between the two rows, and the removal of the blank area will cause problems. For example, the following valid atomic Cr protocol PT uses the implied (implied) Semicolon:

X = x + 1
Y = Y + 1

When a blank area is deleted rashly, the following expression is generated:

X = x + 1y = Y + 1

Obviously, errors are generated. However, if you add the required semicolon, as follows:

X = x + 1; y = Y + 1;

The number of bytes is not reduced. However, we still encourage this format change because ofTestIn the feedback, many people are very satisfied with the 'seemingly compressed' script (maybe this is because the visual validation of the format change to the original code ). They also like the effect of this processing method, that is, making the delivered code more difficult to read.

13. code optimization

For a simple method, such as removing the implied semicolon, variable declaration or empty carriage return statements in some cases can further reduce the script code. Some simple expressions also produce good optimization, such:

X = x + 1;

Can be written:

X ++;

But be careful. Otherwise, the code is prone to errors.

14. Rename User-Defined variables and functions

For ease of reading, we all know thatSumTotalInsteadS. However, considering the download speed,SumTotalThis variable is lengthy. This length is meaningless for end users, but it is a burden for browsers to download. This timeSIt becomes a good choice. First, write the code that is easy to read, and then use some tools for processing for delivery. This processing method once again shows its value. Renaming all names with one or two letters will significantly improve.

15. Rewrite the built-in (built-in) object

Long USER variable names can lead to too long coding of javascr into pT. In addition, built-in (built-in) objects (such as Windows, document, Navigator, etc.) are also one of the reasons. For example:

Alert (window. Navigator. appname );
Alert (window. Navigator. appversion );
Alert (window. Navigator. useragent );

You can rewrite the Code as follows:

W = Window; n = W. navigator; A = alert;
A (N. appname );
A (N. appversion );
A (N. useragent );

If these objects are frequently used, the benefits of rewriting are self-evident. In fact, these objects are often called. However, I would like to remind you that if the window or navigator object is used only once, this replacement will make the code longer. Therefore, you should be especially careful when performing this optimization manually. However, this factor has been taken into account by the frequently-used javascr optimization PT code optimization tools in the current market.

This technique brings about the efficiency of script execution after object renaming: In addition to the benefits of code length, this renaming will actually slightly increase the speed of script execution, because these objects will be placed in the top positions of all called objects. Javascr platinum PT game development programmers have been using this technique for many years, and the download and execution speed will be improved, and the memory cost for local browsers will be reduced.

File Optimization

The last optimization technique is related to the organization of files and sites. Some of the techniques mentioned below may involve server adjustment and site reconstruction.

16. Rename independent files and directories inaccessible to users

Some sites often includeSubheaderabout.gifOrRolover. jsFiles that cannot be accessed through URLs. They are usually stored in a standard name directory, such as/images, so we often see such sentences in the markup code:

Or worse.

Since these files are never accessed, it is irrelevant for end users to facilitate reading. Considering the download speed, the above sentence is more meaningful in the following format:

However, manual modification of files and directories is too heavy. We can use some content management systems to complete relevant work, such as renaming the content into a short format. As mentioned above, w3compiler has the ability to automatically copy and check the dependency between them. If used properly, this technique will cause a lot of losses to the (x) HTML files that reference these files, and it also sets a lot of obstacles for those who plagiarize (x) HTML to reuse these files.

17. Use URL rewriter to shorten all webpage URLs

Note that in the technique mentioned earlier, we do not recommend that you use the file name of a webpage (for exampleProducts.html. In that case, the following mark:

<A href = "products.html"> Products </a>

It will become

<A href = "p.html"> Products </a>

The main reason behind this is that the reader will see a URL like this:Http://www.sitename.com/p.htmlComparedHttp://www.sitename.com/products.htmlThe latter is more meaningful and useful than the former.

However, without sacrificing the original meaning of the webpage URL, if we combine the renaming technique and modify the server configuration, we may still get some benefits from shortening the file name. For exampleProducts.htmlUseP.htmlL replace the rule, and then set up a URL rewrite rule, which is used by a filter similar to the rewrite module on the server side for example, then, the URL is extended into a user-friendly value. Note This tip. If this rewrite rule only performs 'external redirection, the new URL will only be written in the address bar of the user's browser, therefore, the browser is forced to request the page again. In this case, the file itself is not renamed, but only uses the renamed short file name in the source code URL.

Because this technique relies on URL rewriting and lacks extensive access channels and understanding of server tools (such as the rewriting module, even advanced tools such as w3compiler do not currently recommend this technique. However, considering Yahoo! Such a large website has benefited significantly by actively using this technique, which cannot be ignored, after all, it provides a significant effect on slimming (x) HTML files for directories and file names that are very descriptive websites.

18. Remove or shorten the file extension

In fact, in some cases, the file extension is not very useful, such. GIF,. jpg,. js. The browser does not rely on these extensions to display pages, but uses the header information (header) of the mime class during processing ). After understanding this, we can:

Simplified:

Or rename the directory name in combination with the file name. We can get:

.

Don't scare me away from reading this result at first glance,.Sa.gifStill yes.Sa.gifFile, but the visitor of the webpage does not know it.

However, to use this relatively advanced technique, you need to modify the server. The main task is to enable content negotiation. It may be provided by the server or an extension (such as the mod_negotation module of Apache or the pagexchanger of port80 in IIS. This will have a negative impact, which may cause a loss of server performance. However, the benefits of the content negotiation function are far greater than paid. A clean URL makes your website secure and lightweight, and even makes adaptive content delivery possible: transmits different types of images orLanguage! For more information, see the article "towards next generation URLs" by the author.

Note: a URL with a missing extension does not rank your website on the search engine. Port80 software and other well-known websites (such as W3C websites) use this technology without any negative effect.

19. refactoring<SCR platinum Pt>And<Style>Call method to optimize the number of requests

We often see the following code in an HTML file header:

<SCR limit PT src = "/scr limit pts/rolovers. js"> </scr limit Pt>
<SCR limit PT src = "/scr limit pts/validation. js"> </scr limit Pt>
<SCR recommend PT src = "/scr recommend pts/tracking. js"> </scr recommend Pt>

In most cases, the above Code should be simplified:

<SCR ready PT src = "/0/G. js"> </scr ready Pt>

WhereG. jsContains all functions for global use. Although it makes sense to divide the script file into three parts for maintenance, it does not make sense for code transmission. The download of a single script is much more efficient than the three separated requests, which also simplifies the length of the markup code. Interestingly, this method imitates the traditionalProgramming LanguageCompiler connection Concept

20. Consider code-level cache capabilities

One of the most important ways to improve website performance is to improve the cache capability ). Webpage developers use<Meta>Tags are used to set buffer control. However, Meta is useless to proxy buffering. The real value of the buffer capability is its application to related objects (such as tablets or scripts. To improve the caching capability, You Need To segment related objects based on the change frequency and put the content that is more suitable for Buffering in a directory (for example:/CacheOr/Images/Cache. Once you organize your website in this way, it is easy to add buffer control rules, so that your website will jump out to regular visitors.

Now you have learned 20 useful optimization techniques to make your website faster. From the perspective of a single entry, they may not be very useful. However, if they are used together, the transmission capability of the website will be significantly improved. In the next article, we will focus on buffer processing. We will explain how buffering is often used incorrectly, and how small changes can be made to significantly improve performance.