Development of MIS system using ExtJS (7): Analysis of ExtJS performance

In the use of ExtJS process, performance has been a headache, from the user's point of view, a word: slow. From a technical point of view, this "slow" word can be divided into two kinds, loading "slow" and rendering "slow". It is easy to discern between these two situations: if the network is slow and the internet is slow, it is slow to load and slow to render if chrome is not slow and IE is slow. There is another situation: the more slowly, the slower the "slow" is usually caused by a memory leak.

Discuss the solution for the following three scenarios:

1, slow loading

1.1 To reduce the load of things

Don't be ext-all.js,extjs to be customizable, and if you don't have a tree, don't include this component. ExtJS's official web site has detailed custom methods and tools.

1.2 Give the appropriate user tips

Put the JS back and then do a load hint before. If the same as Gmail to give progress bar, or like a lot of online games to point pictures or tips what is better, maybe users will feel how to load so fast, I have not seen clearly, hehe.

1.3 Reload when used

Dynamic loading, reference to the use of ExtJS development MIS system (2): JS dynamic loading.

1.4 Load only once

Do not use IFRAME, if your static content expired do not good, the browser will often bother to download the same thing from the server.

1.5 Add an expiration mark to your JS

Ext-base.js, Ext-all.js can set a very long expiration time, even never expire (if you do not change the ExtJS version). This is useful for all static content, how to set the expiration mark please contact Google.

2, slow rendering

2.1 Less load resolution, late loading late resolution

1.1,1.3,1.4 are effective at improving rendering slow-loading less natural rendering faster.

2.2 Don't use IFRAME.

The IFRAME is not only likely to make the browser load two times, but also will make the browser parse two times, give it up, really.

2.3 Carefully design your JS code

For example, the result of caching getElementById (), compiling query expressions, and so on, this pure look JS skill.

2.4 If possible, let the user change a browser.

Chrome faster than IE's JS rendering is the difference in order of magnitude! Construct a 40-column, 50-line complex gridpanel try, and you'll have a deep understanding ... For the enterprise internal MIS system, changing the browser is still possible.

3, Memory leak

For JS with garbage collection characteristics of the language, if there is a memory leak, then there is only one possibility: engine problems! Unfortunately, we have no way to do this, but there are a lot of tricks to avoid ... Or ask Google: "JavaScript memory leaks," which is enough to write a series.

This article supporting source code