High performance JavaScript parsing

The first chapter can be responsive interface

Summarize

JavaScript and interface updates take place in the same process, so only one of them can be executed at a time. This means that when JavaScript is executing, the interface cannot respond to user input and vice versa. Manipulating the UI thread effectively means that JavaScript does not take too long to execute and affects the user experience. From this, keep in mind the following rules:

1. Each JavaScript task should be completed in 100 milliseconds. Long execution can make the interface not even updated, thereby giving users a negative experience.

2. When JavaScript executes, different browsers show different behaviors to the user's interaction. But anyway, when JavaScript takes too long to execute, users feel confused and alienated.

3, use the Timmer object can arrange JavaScript code delay execution, can let you have long time execution of code split into several small tasks separate execution.

4. The Web Worder object is a feature of a new browser that enables JavaScript code to execute outside the UI thread, thereby avoiding UI blocking.

The more complex a Web application is, the more necessary it is to manipulate the UI thread effectively. No matter how important JavaScript code is, it should not adversely affect the user experience.

Seventh Chapter Ajax

Summarize

Achieving high-performance Ajax requires choosing the right data format and transmission method according to the requirements of a particular environment.

XML is widely supported for data formats, but it is too verbose and slow to parse. JSON is lightweight and fast-parsing (when it acts as an internal code rather than a string) and is equivalent to XML on interactive access. For large amounts of data, custom data formats separated by special characters are very lightweight and have the fastest parsing speed; however, there is a need to do more coding work on the server side and the client.

For data requests, XHR gives you the greatest control and freedom when requesting data from the same domain, but the data passed is treated as a string, which may require parsing time. On the other hand, JavaScript and JSON can be executed across domain requests and builtin through dynamic script tag injection, although this method does not have robust interface support and cannot read response headers and response status codes. Integrated XHR (Multipart XHR) can be used to reduce the number of requests and to handle different file types in a single response, although this method cannot cache the requested data. For sending data, picture booting (image beacons) is a simple and effective method. XHR can also be used to send large amounts of data in a post way.

1, in addition to these data formats and transmission technology, there are several instructions to help you ajax faster:

2, reduce the number of requests, by merging JavaScript and CSS files, or using MXHR.

3, after the completion of the page loading and then through the AJAX request is not the most important resources to improve the response speed of the page.

4, to ensure that your code can gracefully handle errors, and on the server to record errors.

5. Know when to switch to Ajax libraries and when to write lightweight Ajax code yourself.

Ajax is a great way to exploit the potential performance of your site, because modern sites use many asynchronous requests, as well as providing solutions to problems that are not relevant to it, such as loading large amounts of resources. The creative use of Ajax determines whether a site is lazy, not responsive, or fast response and efficient, determines whether a site is hated by users or love.

Eighth Chapter Programming Practice

JavaScript embodies the performance challenges associated with the way code is organized. As Web applications become more advanced and contain more and more JavaScript code, there are some programming patterns and antipatterns. Keep in mind some of the following programming practices:

1. Avoid using the Eval () function and function () constructor to avoid repeated parsing of code. In the same way, the function is passed to settimeout () and setinterval () as arguments instead of strings.

2. Create objects and arrays with object literals and array literals, so that the creation and initialization speed is much faster than the literal form.

3, avoid repeating the same code execution. For example, use deferred loading or conditional advance loading techniques when you need to make browser type judgments.

4. When mathematical calculations are required, consider using bitwise operators, which work in the actual storage representation of numbers.

5. Built-in functions are faster than the same logical JavaScript code you write. You should use built-in functions as much as possible.

For frequently executed code, you can see great performance improvements if you can use the various optimization techniques and methods described in this chapter.

Nineth Chapter Building and publishing high-performance JavaScript applications

Summarize

The build and publish process has a huge impact on the performance of JAVASCRIRPT applications. Some of the most general steps in this process are:

1. Merge JavaScript files to reduce the number of HTTP requests.

2, use Yui compressor compressed JavaScript files.

3. Transfer JavaScript files (gzip encoded) in a compressed manner.

4, the JavaScript file can be cached on the browser side by properly setting the HTTP response header. Resolve the update cache problem by adding a timestamp to the file name.

5, through the content distribution network to provide JavaScript files, CDN will not only improve performance, it will also manage the compression and caching for you.

All of these steps should be done in an automated manner. You can use open build tools such as Apache ant or use build tools that are customized for your specific needs. If you can practice these build steps, you can dramatically improve the performance of Web applications or Web sites that require a lot of JavaScript code.

Tenth Chapter Tools

Summarize

As the Web page or application behaves more and more slowly, by analyzing the ins and outs of the page assets and tuning the performance of the Javascsript code, you can put the optimization effort where you need it most.

1. Use network analysis tools to locate bottlenecks in loading JavaScript and other assets. This will help you determine where you need to tune.

2, although the traditional wisdom that should reduce the number of HTTP requests, however, if the JavaScript can delay the loading, the page will be faster rendering, to give users a better overall experience.

3, through the tuning device to locate JavaScript execution slow place, the diagnosis of each function execution time, a function is called the number of times and call the stack itself, you can find the focus of optimization.

4, although the single execution time and the number of calls is the most valuable data, and by careful examination of how the function is invoked, sometimes can also find additional tuning advantages.