"Front-end development" 25 ways and techniques to improve Web page loading speed

Respect for the original: http://blog.csdn.net/wxzking/article/details/4089384

Do you want to speed up the loading of Web pages? Learn how to improve the browsing experience for dial-up users by reducing load times, and in some cases, up to 80% faster load times. Here are the 25 Internet speed methods and tips.

First, the use of good structure
Extensible HTML (XHTML) has many advantages, but its drawbacks are obvious. XHTML may make your page more compliant, but it uses a lot of tags (mandatory <start> and <end> tags), which means the browser is downloading more code. So, there are two sides to it, try to use less XHTML code in your Web page to reduce the page size. If you really have to use XHTML, try to optimize it as much as possible.

Second, do not overload the layout
Adhere to the principle of simplicity: less is more. The page is flooded with various types of images, videos, ads, etc., which greatly violate the principle of practicality.

Third, do not use images to represent text
The most common example of using an image to represent text is in the navigation bar. Beautiful buttons are more appealing, but they are slow to load. In addition, images are still not indexed directly by search engines, so navigating with images is not conducive to search engine optimization (search engine Optimization,seo). Never use an image to represent text when you can create beautiful buttons with lots of CSS tricks without an image.

Iv. checking the use of cookies
Setting an earlier expire date or not setting the expire date at all will shorten the response time. To set the expire date of the cookie in the PHP language, use the following code:

<?php
$expire = 2592000 + time ();
Add Day's to the current time
Setcookie (userid, "123RRW3", $expire);
?>

This code sets the cookie UserID and sets the expire date to 30 days from the current date.

Do not include unnecessary JavaScript code and, as far as possible, make it externally
You should use JavaScript wisely (only when it's really necessary) and optimize the size and speed of your scripts. Another way to shorten the download time for JavaScript is to use an external file instead of containing the script inline. This approach also applies to CSS because the browser caches the externally formatted text, and the CSS or JavaScript that is encoded inline (in the HTML page itself) is loaded with HTML each time.

Vi. avoiding the use of forms whenever possible
Tables are used as the main building blocks of a Web page, but as a page layout element, using tables is now considered bad practice. Sometimes you have to use tables (and they are considered good practices for displaying tabular data). If so, specify the width and height of table cells, rows, and columns explicitly, otherwise the browser must do a number of things to calculate how they are displayed, which can slow down the page load.

Vii. Remove any unnecessary elements
This may be the most obvious of all techniques, but it is also one of the easiest tricks to forget. If you really need to place a lot of content on a webpage, consider dividing the page into 2, 3, or more separate pages.

Eight, some tips to optimize the Web page
There are many ways to optimize your Web pages, including compressing JavaScript files, compressing with Hypertext Transfer Protocol (hypertext Transfer Protocol,http), and setting the image size.

Nine, compress and shrink JavaScript files
You can use the GNU Zip (gzip) to accomplish this task because many browsers support this compression algorithm. Another alternative is to shrink the file. This method removes all unnecessary characters in the code, such as Tabs (tab), new lines, and spaces. It removes comments and whitespace from the code, further reducing the file size. Both external and internal style sheets can be scaled down. Two of the most popular narrowing tools are jsmin and YUI Compressor.

X. Use HTTP compression, and always use lowercase div and class names
You can use HTTP compression to reduce the amount of traffic between the server and the browser. You can configure HTTP compression (. htaccess file) in Apache, or you can include it in the page (for PHP, you can use a http_accept_encoding option). Note, however, that not all browsers support compression. Compression and decompression can aggravate the load on the processor, even in browsers that support compression. To enable carpet-style (blanket) compression in Apache (that is, compress all text and HTML), use the following command:
Addoutputfilterbytype DEFLATE text/html Text/plain text/xml

Also, consider what you want to compress. Images, music, and videos are already compressed when they are created, so you can restrict compressed objects to HTML, CSS, and JavaScript files. Another technique to reduce compression is to use lowercase <div> elements and class names. Due to case sensitivity, and the use of lossless compression,

Xi. Setting the image size
As with table cells, rows, and columns, when you do not explicitly set the image size, the browser needs to perform a calculation to display the image, which can slow down processing.

12. Using CSS image mapping for decorative functions
Using image maps Instead of multiple images is another way to shorten load times, because downloading individual parts of an image at the same time can speed up the entire page's download progress. Or, you can use some kind of tool called CSS sprites. CSS sprites can help reduce the number of HTTP requests. An image can contain all the image elements needed to decorate or decorate the page. You use CSS to select mappings (by calling certain locations and dimensions) for specific elements.

13. Delay script loading as much as possible
One potential way to improve page download speed is to place the script at the bottom of the page, making the page load more quickly. Typically, the browser can only download (from the same domain) no more than two parallel objects, and if an object is a piece of JavaScript code, the download of the other page components will be paused until the script is downloaded. If you put JavaScript code at the bottom of the page, (in most cases) it will be downloaded at the end, and all other components are downloaded.

14. Load JavaScript files on demand
To load JavaScript on demand, use the import () function.
Import () function:
function $import (SRC) {
var Scriptelem = document.createelement (' script ');
Scriptelem.setattribute (' src ', src);
Scriptelem.setattribute (' type ', ' text/javascript ');
document.getElementsByTagName (' head ') [0].appendchild (Scriptelem);
}

Import with a random query parameter to avoid caching
function $importNoCache (SRC) {
var ms = new Date (). GetTime (). toString ();
var seed = "?" + ms;
$import (src + seed);
}

XV, verify that the function is loaded
You can also verify that a function is loaded, and if not, load the JavaScript file.
Verify that the function is loaded:
if (myfunction) {
The function has been loaded
}
else{//Function has no been loaded yet, so load the JavaScript.
$import (' http://www.yourfastsite.com/myfile.js ');
}

Note: You can use the Defer property, but not all browsers (including Firefox) support it.

16. Optimize CSS Files
CSS files are not necessarily large if properly optimized and maintained. For example, a CSS file with many independent classes can affect download speed. As with JavaScript files, you need to optimize your CSS file to include everything you need while maintaining a reasonable size. In addition, external files are used instead of inline definitions to accommodate the browser's caching mechanism.

17. Use Content distribution network
The Content distribution network (Content-distribution NETWORK,CDN) is another good way to shorten the download time. When you place a static image on many servers on the Internet, users can download the images from the server closest to them. In addition, most CDNs run on fast servers, so they respond faster than smaller, overloaded servers, regardless of the load speed of the server.

18. Use multiple domains for assets to increase connectivity
Another advantage of a CDN is that they are separate domains. Because your browser restricts the number of concurrent connections to a single domain, it is easy to fill all threads whenever a page is loaded. Therefore, the connection to other assets is delayed. However, your browser can open a new thread or connect to another domain so that any asset loaded from another domain can be loaded concurrently with all other assets.

19. Use Google Gears at the right time
Using Google Gears (see Resources) is another good way to avoid users downloading the same content over and over again. Gears allows users to access WEB applications offline, but it also allows page elements to be persisted to the user's computer. As a result, content that is frequently loaded but not updated can be stored in the Gears database, which is a SQLite3 relational database management system. All next requests for the same content can be loaded directly from the database (not the server).

20. Using images in PNG format

Graphic Interchange Format (GIF) and Joint Photographic Experts Group (JPEG) image formats are obsolete: Portable Network Graphic (PNG) is a popular future Format. Of course, you can say that GIF and JPEG are extinct, or PNG has no flaws, but everything has its own pros and cons, and PNG offers excellent quality for the best file size. Therefore, if you make a selection, you should use a PNG image whenever possible.

21. Keep Ajax calls short and accurate
When the technology called Asynchronous JavaScript + XML (Ajax) appeared two years ago, these technologies provide a revolutionary way to handle page requests and responses. However, dial-up users may never have the opportunity to experience their real advantage, because in many cases Ajax requires a lot of communication between the browser and the server. Therefore, if you can keep the Ajax call short and accurate, you can avoid the user spending endless time waiting for the element to refresh or respond.

22. Make a large Ajax call and process the client data locally

If you cannot make short Ajax calls, or if these calls do not provide the desired results, consider an alternative: make a big Ajax call to get everything you need, and then have the client process the data locally. In this way, the client waits only once (getting the incoming data), but after that (when there is no need for communication between the browser and the server), the processing speed will be faster. Of course, there are a lot of Ajax optimization techniques that cannot be listed in this tutorial.

23. Test the code in the sandbox

There is also a common technique that is often forgotten. Although sober WEB developers typically test the application before launching it, sometimes testing makes them less important to maintenance tasks, or new features are added too quickly and are not fully considered or tested. As a result, the rest of the script slows down the application. If you add a new feature, you can first test it in the sandbox (completely out of the rest of the application) to see its behavior as a single function. In this way, you can repeatedly examine and analyze performance and response times without regard to the rest of the WEB application. Then, when the behavior of the new feature meets expectations, it can be introduced into the rest of the application, running other tests to ensure that the functionality itself behaves as expected.

24. Analyze the site code
In many scenarios, self-reflection is a good idea. Fortunately, in the development process, we can use tools to help reflect and practice as objectively as possible. The value of a tool like JSLint (see reference Resource) is immeasurable, although its site claims that it "might frustrate you" because it provides you with all the potential code flaws that make debugging more difficult and can lead to longer response times.

25. Check for orphaned files and lost images
It's a smart idea to check for orphaned files and lost images. Most WEB developers will check for incorrect file references, but there is still a need to explain. Missing files can cause a variety of problems because they cause "the image/page cannot be displayed" error messages. But in terms of Web speed optimization, they have a bigger flaw: when a browser looks for a lost or orphaned file, it consumes resources, which inevitably causes the page to be processed slowly. Therefore, check for orphaned or missing files, including misspelled file names.

Http://www.ibm.com/developerworks/cn/web/wa-speedweb/?S_TACT=105AGX52&S_CMP=tec-csdn