Optimization of front-end development performance and development performance

Optimization of front-end development performance and development performance
Golden rule for Web Application Performance Optimization: First optimize the front-end performance, because this is the cost of 80% or more of the end user response time.

The following is my summary of the frontend development performance optimization solution. Refer to Yahoo's 14 performance optimization principles.

1. Reduce the number of http requests, CSS Sprites, JS, CSS source code compression, and image size control; webpage Gzip, CDN hosting, data cache, image server, cache Ajax

80% of the end user response time is spent on front-end programs, and most of the time is spent on downloads of various page elements, such as style sheets, scripts, and Flash. Reducing page elements reduces the number of HTTP requests. This is the key to quickly display pages.
One way to reduce the number of page elements is to simplify the page design. But is there any other way to achieve both rich content and quick response time? The following are some technologies:
Image maps combines multiple images into one Image. The total file size does not change much, But it reduces the number of HTTP requests and accelerates the page display speed. This method is only applicable to consecutive images. At the same time, the definition of coordinates is annoying and error-prone.
CSS Sprites is a better method. It can combine images on the page to a single file, and use the background-image and background-position attributes of CSS to realistic part of the image.
Inline images uses data: URL scheme to embed images in the page. This will increase the size of the HTML file. Combining inline images to your (cache) style sheet can not only reduce HTTP requests, but also avoid increasing the size of HTML files.
Combined files combines multiple script files to a single file to reduce the number of HTTP requests. Style Sheets can also be processed in a similar way. This method is simple but not widely used. On average, 10 U.S. websites have 7 script files and 2 style sheets on each page. When the scripts and style sheets between pages change greatly, this method will face great challenges, but if it is done, it will speed up the response time.

Reducing the number of HTTP requests is the starting point for performance optimization. This improves the efficiency of the first visit. According to Tenni Theurer's article Browser Cache Usage-Exposed! Description: 40-60% of daily access is the first visit. Therefore, speeding up page access for the first visitor is the key to user experience.

2. The front-end template JS + Data reduces the bandwidth waste caused by HTML tags. The front-end uses variables to save the AJAX request results. Each time a local variable is operated, no request is required, reduce the number of requests 3. Use innerHTML instead of DOM operations to reduce DOM operations and optimize javascript performance. 4. When many styles need to be set, set className instead of directly operating the style. 5. Use less global variables and cache DOM node search results. Reduce IO read operations. 6. Avoid using CSS expressions, also known as Dynamic properties ).

CSS expressions are powerful (and dangerous) Expressions used to dynamically set CSS attributes. IE, which supports CSS expressions starting from version 5, such as backgourd-color: expression (new Date (). getHours () % 2 ?" # B8D4FF ":" # F08A00 "), that is, the background color is switched every hour.
The problem with CSS expressions is that they are executed more frequently than most people expect. Not only is the expression calculated when the page is displayed and resize, but also when the page is rolled, or even when the mouse moves on the page, the expression is recalculated.
One way to reduce the number of CSS expressions executed is a one-time expression, that is, when the first execution is performed, it replaces the expression with a clear value. If dynamic settings are required, use the event handler function instead. If you must use CSS expressions, remember that they may be executed thousands of times, thus affecting page performance.

7. Pre-load the image. Place the style sheet on the top and add a timestamp to the bottom of the script.

We found that moving the style sheet to the HEAD can increase the loading speed of the interface, so that the page elements can be displayed in sequence.
In many browsers, such as IE, the problem that the style sheet is placed at the bottom of the document is that it prohibits the sequential display of webpage content. The browser blocks the display to avoid re-painting the page elements. The user can only see the blank page. Firefox does not block display, but this means that after the style sheet is downloaded, some page elements may need to be re-painted, which leads to flickering issues.
The HTML specification clearly requires that the style sheet be defined in the HEAD. Therefore, to avoid blank screen or flickering issues, the best way is to follow the HTML specification and put the style sheet in the HEAD.
Like style files, we need to pay attention to the location of the script files. We need to try to put them at the bottom of the page, so that they can be displayed in sequence, and the maximum parallel download can be achieved.
The browser will block the display until the style sheet is downloaded, so we need to put the style sheet in the HEAD section. For a script, the subsequent content display is blocked. Therefore, placing the script at the bottom means that more content can be quickly displayed.
The second problem caused by the script is that it blocks the number of parallel downloads. The HTTP/1.1 Specification suggests that the number of concurrent downloads per host of the browser should not exceed 2. Therefore, if you distribute image files to multiple machines, you can download more than two images concurrently. However, when a script file is downloaded, the browser does not start parallel downloads or even downloads from other hosts.
In some cases, it is not easy to move the script to the bottom. For example, the script uses the document. write method to insert the page content. Domain issues may also exist. However, in many cases, there are still some methods.
One alternative is to use a latency script ). The DEFER attribute indicates that the script does not contain document. write, indicating that the browser will continue to display the script. Unfortunately, Firefox does not support the DEFER attribute. In IE, the script may be delayed, but it may not be a long delay. However, from another perspective, if the script can be delayed, it can be placed at the bottom.

8. Avoid using the table in the main layout of the page. The table will not be displayed until the content is completely downloaded. It is slower than the div + css layout. 9. Compress page elements

By compressing the HTTP Response content, you can reduce the page response time. Starting from HTTP/1.1, the web Client uses the Accept-Encoding header in the HTTP request to indicate the supported compression types, for example:
Accept-Encoding: gzip, deflate.
If the Web server detects the Accept-Encoding header, it uses the methods supported by the client to compress the HTTP Response and sets the Content-Encoding header, for example, Content-Encoding: gzip.
Gzip is currently the most popular and effective compression method. Other methods, such as deflate, are ineffective and not popular. By using Gzip, the content can be reduced by 70%. For Apache, The mod_gzip module must be used in version 1.3 and mod_deflate must be used in version 2. x.
The Web server determines whether to compress Based on the file type. Most websites compress HTML files. However, it is worthwhile to compress the script file and style sheet. In fact, it is worthwhile to compress the task text information, including XML and JSON. Image files and PDF files should not be compressed because they are stored in compression format. Compressing them not only wastes the CPU, but may also increase the file size.
Therefore, compressing as many file types as possible is a simple way to reduce the page size and improve user experience.

10. Place JavaScript and CSS in an external file.

Many of the above performance optimization rules are optimized based on external files. Now, we must ask the following question: should JavaScript and CSS be included in an external file or in a page file?
In the real world, using external files will speed up page display, because external files will be cached by the browser. If the built-in JavaScript and CSS reduce the number of HTTP requests on the page, the page size increases. On the other hand, when an external file is used, it will be cached by the browser, and the page size will be reduced without increasing the number of HTTP requests.
Therefore, in general, external files are more feasible. The only exception is that the embedded method is more effective for the home page, such as Yahoo! And My Yahoo! Both use the embedded method. In general, in a session, the home page is rarely accessed at this time, so the embedded method can get faster user response time.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.