Advanced guidelines for high-performance website construction (i)

14 Rules for Web performance improvement:

1. Minimize HTTP requests (using CSS sprites);

2, the use of CDN;

3, add expires head;

4, add gzip compression components;

5, put the style sheet on the top;

6, avoid CSS expressions, use external JS and CSS, and streamline JS, delete duplicate scripts;

7, reduce the DNS query;

8, avoid redirection;

9, configure the ETag;

10, so that Ajax can be cached;

The first chapter understands Ajax performance

1, trade-offs: But in 97% of the situation, premature optimization is the root of all evils, but we should not miss the key 3%. The reality of the Project Triangle (Project management triangle is time, cost and scope): Time, quality, cost three choose two, in the life and work balance everywhere, the choice algorithm to weigh the run time and memory, will be to seize the market and sacrifice code quality. These tradeoffs are for incremental development (a task-high and phased strategy in which the various parts of the system are developed at different times and speeds, and then consolidated after completion. It does not emphasize the use of iterative development and waterfall-type development of the two reprocessing strategies. Another option to replace incremental development is to use the Big Bang integration approach to develop the entire system. ) has a great effect.

2, the principle of optimization: Optimize the system resource overhead of the components or templates, such as optimization cycle, the more loop nesting, the less you can optimize the choice

When testing a Web application, the user's environment should be simulated as much as possible, tested with low-end machines and low-speed networks, and the developer's configuration is high, and testing in the development environment masks performance issues.

3, the jump between pages (Request a replacement page) will bring a lot of overhead, so for the small difference between continuous pages of the application, the use of Ajax technology.

The result of the user operation in the traditional way is to request the replacement page, the page Ajax is implemented by sending the packet (the packet is as small as possible) to the server side (usually encoded as JSON text), and then the server returns another packet (also JSON encoded) to respond, The last JS program uses this data to update the display of the browser. In doing so, the amount of data transferred, the user operation, and the time interval for visual feedback are significantly reduced, and the amount of work that the server and browser needs to do is reduced, but the amount of work the AJAX programmer needs to do is likely to increase the page, which is one of the tradeoffs.

A common mistake in AJAX applications is to send all application data to the browser, which introduces the latency issues that Ajax should have avoided.

4, use the AJAX Library. The biggest cost of running a program is DOM, not JS, and the layout is the biggest overhead of (working with CSS). So understand the mysteries of the DOM and reduce its impact.

5. If the browser is going to show a very large data set, it needs to be paged instead of scrolling.

7, only the evaluation, can have a positive impact on performance.

Chapter II Creating a fast-responding web App

1, when the user interacts with the browser, the operating system first to determine which device in the computer is entered, and then determine which application should receive these inputs, packaging them as separate events and placed in the app's event queue. The browser completes the processing of individual events in its queue in the order in which they are queued. It pulls them out of the queue in FIFO order, and then decides how to handle the event. Usually, the browser will do the following based on these events: Do the event itself (for example: Browse the Web, display set animation) or the execution of the page itself JS.

Such as

The browser uses a single thread to take events out of the queue, then processes the event itself or executes JS, so the browser can handle only one task at a time, and any task can block execution of other tasks.

2, how is fast enough?

The page responds more than 0.2--0.1 seconds (the page is not fast enough, not smooth enough) to be noticed by the user.

Delay of more than 1 seconds (feeling to the user is slow) to prompt the user that the computer is solving the problem, such as changing the shape of the cursor.

Any operation that exceeds 10 seconds (user anxiety, feeling the site is slow) requires a percent completion indicator and a method that is user-friendly and clearly identifiable.

3, testing the performance of the method

Manual code detection (logging) and Automatic Code detection (performance analysis)

Manual code Detection: Add a timer to the function, use var sta=new Date (). getmilliseconds (); In many browsers there is a console that can replace alert () with the Console.log () function. such as Console.log ("Hello!" ");

The Automatic Code detection tool is used to find bottlenecks or to run the slowest blocks of code. Firebug has a performance analyzer.

4, performance optimization: The use of multi-threaded user-expensive code from the user interaction of the thread stripped out, but JS does not support multi-threading, the solution is the Web workers API, the cost of a large number of JS entrusted to workers. If you have a browser that does not support the Web Worker API, you can use the Gears Worker API plug-in. and many operating systems and browsers are already bound to SQLite (also can use Navicat for SQLite, Sqlitespy), you can also use the JS Timer control code execution.

Threading: XHR (XML HttpRequest) has two ways of executing synchronously and asynchronously.

5, another key aspect of rapid response is: memory management, JS has a GC mechanism, however, automatic memory management is a cost, when performing recycling, they will freeze the entire environment (including the main browser JS thread being called), until the completion of the complete object created by the "heap", Because freezing the running environment is short and avoids the user's attention, it is noticed by the user that it takes longer to find all the unused objects as the memory used by the application increases. The entire browser is likely to be frozen on a regular basis.

6. If you determine the impact of memory performance:

Use the Delete keyword to remove the JS object that is no longer needed from memory;

Removing nodes that are no longer necessary from the DOM tree of a Web page;

Chapter III Splitting and initializing loads

DHTML (Dynamic HTML), there are blocking features when downloading JS, but not when downloading CSS

1, compression js, you can divide the JS into two parts, one for the page initialization, the other can delay loading, can shorten the application load time.

Doloto is automatically split JS system, the JS code split into two parts, part of the page initialization, another need to use the time to load or when the initialization of the code load is completed, but usually still need to manually split the JS code.

Doloto installation requires first installation of the. NET Framework 3.5,DOLOTO:HTTP://PAN.BAIDU.COM/S/1PJQO8MJ

More resources for Doloto:http://research.microsoft.com/en-us/projects/doloto/

The difficult point of splitting code:

(1) Avoid undefined identifier error, workaround: Prompt is loading ... to remind the user that the feature has not been loaded yet.

(2) An event handler that binds the interface element in the deferred loading code. IE is implemented through attchevent, and other browsers use Addattchlistener

(3) using the pile function: the same as the original function name, but the function body is empty, or the temporary code instead of the original content of the function, need to load the original function instead of the pile function.

Advanced guidelines for high-performance website construction (i)