[Front-end development] 25 methods and techniques for improving webpage loading speed

[Front-end development] 25 methods and techniques for improving webpage loading speed

Respect Original: http://blog.csdn.net/wxzking/article/details/4089384

Do you want to accelerate webpage loading? Learn how to improve the browsing experience of dial-up Internet users by shortening the loading time. In some cases, the loading time can be reduced by up to 80%. The following describes the methods and techniques for network speed in June 25.

I. Good Structure
Extensible HTML (XHTML) has many advantages, but its disadvantages are also obvious. XHTML may make your page more compliant with standards, but it uses a lot of markup (mandatory <start> and <end> markup), which means the browser needs to download more code. Therefore, everything has two sides. Try to use less XHTML code in Your webpage to reduce the page size. If you do have to use XHTML, try to optimize it as much as possible.

2. Do not overload the Layout
Adhere to the simple principle: less is more. Pages are filled with various types of images, videos, advertisements, and so on, which is far from being practical.

3. Do not use images to Represent Text
The most common example of using images to represent text is in the navigation bar. Beautiful buttons are more attractive, but their loading speed is slow. In addition, Images cannot be directly indexed by search engines. Therefore, using images for navigation is not conducive to search engine optimization (SEO ). No image is used to represent text when you can create beautiful buttons using a large number of CSS techniques without the need for images.

Iv. Check cookie usage
Setting an earlier expire date or not setting an expire date will shorten the response time. To set the cookie's expire date in PHP, use the following code:

<? Php
$ Expire = 2592000 + time ();
// Add 30 day's to the current time
Setcookie (userid, "123rrw3", $ expire );
?>

This Code sets the cookie userid and sets the expire date to 30 days after the current date.

5. Do not include unnecessary JavaScript code and try to externalize it as much as possible
You should use JavaScript wisely (only when necessary) and optimize the script size and speed. Another way to shorten the JavaScript download time is to use an external file instead of containing the script inline. This method is also applicable to CSS, because the browser will cache externally-encoded text, and CSS or JavaScript encoded in inline mode (in the HTML page itself) will be loaded with HTML each time.

6. Avoid using tables as much as possible
A table is used as the main building block of a webpage, but as a page layout element, using a table is now considered a bad practice. Sometimes you must use tables (and they are considered to be good practices for displaying table data ). In this case, specify the width and height of table cells, rows, and columns. Otherwise, the browser must perform many operations to calculate how to display them, which reduces the page loading speed.

7. delete any unnecessary elements
It may be the most obvious of all tips, but it is also the most easy to forget. If you really need to place a lot of content on the webpage, consider dividing the webpage into two, three or more independent pages.

8. Some web page optimization skills
You can use many methods to optimize your web pages, including compressing JavaScript files, compressing them using Hypertext Transfer protocols (HTTP), and setting the image size.

9. Compress and reduce JavaScript files
You can use GNU zip to complete this task, because many browsers support this compression algorithm. Another alternative is to narrow down the file. This method deletes all unnecessary characters in the Code, such as tabs, new lines, and spaces. It deletes comments and spaces in the code to further reduce the file size. Both the external and internal style sheets can be reduced. The two most popular zoom-In tools are JSMin and YUI Compressor.

10. Use HTTP compression and always use lower-case div and Class Name
HTTP compression can be used to reduce the traffic between the server and the browser. You can configure HTTP compression (. htaccess file) in Apache or include it in the page (for PHP, you can use an HTTP_ACCEPT_ENCODING option ). Note: not all browsers support compression. Even browsers that support compression, compression and decompression will increase the load on the processor. To enable blanket compression (that is, compressing all text and HTML) in Apache, run the following command:
AddOutputFilterByType DEFLATE text/html text/plain text/xml

In addition, consider the content you want to compress. Images, music, and videos are compressed when they are created, so you can restrict them to HTML, CSS, and JavaScript files. Another way to reduce compression is to use lower-case <div> elements and class names. Because of the Case sensitivity and lossless compression,

11. Set the image size
Similar to table cells, rows, and columns, when you do not explicitly set the image size, the browser needs to perform computation to display the image, which reduces the processing speed.

12. Map CSS images for decoration
Using Image ing instead of multiple images is another way to shorten the loading time, because downloading each part of the image at the same time can speed up the download progress of the entire page. Alternatively, you can use a tool named CSS sprites. CSS sprites can help reduce the number of HTTP requests. An image can contain all the image elements required for page decoration or layout. You can use CSS to select (by calling some positions and dimensions) for the ing of specific elements.

13. Try to delay Script Loading
A potential way to increase the page download speed is to place the script at the bottom of the page to make the page load more quickly. Generally, a browser can only download up to two parallel objects (from the same domain). If an object is a piece of JavaScript code, before the script is downloaded, the download of other page components will be paused. If you place the JavaScript code at the bottom of the page (in most cases), it will be downloaded at the end, and all other components have been downloaded.

14. Load JavaScript files as needed
To load JavaScript as needed, 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 );
}

15. Verify function loading
You can also verify whether a function is loaded. If not, load the JavaScript file.
Verify whether the function is loaded:
If (myfunction ){
// The function has been loaded
}
Else {// Function has not been loaded yet, so load the javascript.
$ Import ('HTTP: // www.yourfastsite.com/myfile.js ');
}

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

16. Optimize CSS files
After proper optimization and maintenance, the CSS file is not necessarily large. For example, CSS files with many independent classes may affect the download speed. Like a JavaScript file, you need to optimize the CSS file so that it contains all the required content, while maintaining a reasonable size. In addition, external files are used instead of inline definitions to adapt to the browser cache mechanism.

17. Use the Content Distribution Network
Content-distribution network (CDN) is another good way to shorten the download time. When you place static images on many servers on the Internet, users can download these images from the server closest to them. In addition, most cdns run on fast servers. Therefore, no matter how fast the server is loaded, the response speed is faster than that of small overloaded servers.

18. Use multiple domains to add connections to assets
Another advantage of CDN is that they are independent domains. Because your browser limits 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 other domains, so that any assets loaded from another domain can be loaded with all other assets at the same time.

19. Use Google Gears when appropriate
Using Google Gears (see references) is another good way to prevent users from repeatedly downloading the same content. Gears allows offline access to Web applications, but also allows page elements to be persisted to the user's computer. Therefore, 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 to the same content can be directly loaded from the database rather than the server.

20. Images in PNG format

Graphic Interchange Format (GIF) and Joint Photographic Experts Group (JPEG) image formats are outdated: Portable Network Graphic (PNG) is a popular Format in the future. Of course, you can say that GIF and JPEG are extinct, or PNG has no defects, but everything has its own advantages and disadvantages. PNG provides excellent quality with the best file size. Therefore, if you select, use a PNG image as much as possible.

21. Keep Ajax calls short and accurate
When the technology, collectively referred to as Asynchronous JavaScript + XML (Ajax), emerged two years ago, these technologies provide a revolutionary way to process page requests and responses. However, dial-up users may never have the chance to experience their real advantages, because in many cases, Ajax needs to communicate a lot between the browser and the server. Therefore, if you can keep Ajax calls short and accurate, you can avoid spending the most time waiting for element refresh or response.

22. Perform a large Ajax call and process client data locally

If you cannot make short Ajax calls, or if these calls cannot provide the expected results, you can consider an alternative method: to make a large Ajax call to get everything you need, then let the client process data locally. In this way, the client only needs to wait once (obtain the incoming data), but after that (when there is no need to communicate between the browser and the server), the processing speed will be faster. Of course, there are a lot of Ajax optimization technologies 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 usually test the application before it starts, sometimes the test will make them less focused on maintenance tasks or add new features too quickly, and has not been fully considered or tested. As a result, the remaining script slows down the application. If you add a new function, you can first test it in the sandbox (completely out of the rest of the Application) to view its behavior as a single function. In this way, you can repeat and analyze the performance and response time without considering the rest of the Web application. Then, when the behavior of the new feature is as expected, you can introduce it to the rest of the application and run other tests to ensure that the behavior of the feature is as expected.

24. Analyze site code
In many scenarios, self-reflection is a good suggestion. 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 resources) cannot be measured, even though its site claims that it "may make you frustrated ", because it provides you with all potential code defects, these defects not only make debugging more difficult, but also may lead to a longer response time.

25. Check isolated files and lost images
It is wise to check for isolated files and lost images. Most Web developers check for incorrect file references. Lost files may cause various problems, because they may cause error messages such as "The image/page cannot be displayed. However, in terms of Web Page Speed Optimization, they have a bigger defect: When the browser looks for lost or isolated files, it will consume resources, which will inevitably lead to slow page processing. Therefore, check for isolated or lost files, including misspelled file names.

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