1. Check your defined time listener
Setting the event listener correctly will significantly affect the performance. For example, when defining a store, set a load event to trigger data reading from the background. If the value of single is set to true, load is triggered only when data is retrieved for the first time.
listeners: { load: onFirstLoadData, single: true}
Give a complete example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Note that ext JS and CSS files need to be downloaded and imported.
Click the load store button. If single: True is added, the load event will not be executed.
Another important event is afterrender, which is triggered when all DOM elements exist. After rendering, modifying the element will return back and slow down the program. Instead, you can use beforerender to adjust classes and set styles before rendering. Some code that must be run after rendering provides a new event in ext JS 4.1-boxready, which runs after the size of a component is determined.
2. Remove dolayout and docomponentlayout calls.
Remove high-cost calls whenever possible. In versions earlier than ext JS 4, dolayout is used to inform the framework that you have completed a component or container, and then calculate its layout. In ext JS 4.0, these calls are sometimes used to handle direct Dom updates or solve some specific defects.
In ext JS 4.1, the layout trigger method has changed. Your code does not need to call dolayout or docomponentlayout. If you still need to call this method to handle defects, submit the defect report to sencha.
3. Reduce container nesting
Every container only needs time for initialization, rendering, and layout. The less nesting, the faster the program will be. For example:
{ id: 'container1', items: [{ id: 'container2', items: [{ id: 'component3' }] }]}You can replace it with the following methods:
{ id: 'container1', items: [{ id: 'component3' }]}4. Use containers instead of panels.
Ext js panels are more powerful than containers, and of course they are more costly. Display the specified xtype: 'Container' to avoid using 'panel 'by default, similar
{ xtype: 'container', // defaultType is 'panel' items: [ ... ]}
5. Reduce border layout nesting
In ext JS 4.1, there are many methods to replace the nested border layout. Removing these nesting reduces the time for initialization, rendering, and layout components. In earlier versions of ext JS, nesting is required in some cases. For example, there are two or more instances in the same block, if two northern regions are required in the central region, the nested border layout is required. Now, you can directly specify two northern regions as part of a border layout.In ext JS 4.1, the region can be dynamically added without defining all the blocks at a time and hiding them at a time. You can also use the weight attribute to set the priority of a region. For example,
Set the priority of the West Side to higher than that of the north side.
6. Reduce Dom read/write
Ext js 4.1 has adjusted the layout and DOM interaction to minimize Dom read/write. Customized code should also follow this rule as much as possible, because Dom read/write will reduce the speed of the program, resulting in high overhead and mixed write.
Reflux. Use beforerender to control styles and classes, and avoid using setstyle, addcls, removecls, or other dom element modification methods.
As a general rule, batch operations during Dom read/write operations will improve the performance.
Use two new methods provided by ext JS 4.1
Ext js page AnalyzerExt.suspendLayoutsAnd DExt.resumeLayoutsTo reduce additional
Layout. These two methods help to coordinate updates to multiple components and containers.
Ext js 4.1 provides a new tool to analyze application performance. It can be used to quickly measure the system and make changes to the relevant code. The page analyzer has many functions that are still experimental, but layout tag optimization is a useful performance optimization function.
You can find this tool in the following path of the Development Kit.
./examples/page-analyzer/page-analyzer.htmlDue to browser security, the page analyzer can only be used on the same server. Therefore, you need to copy the entire page-analyzer folder to the related directory of the application.
In addition, make sure that the page analyzer version matches the ext JS version you have built, otherwise it will not work properly.
Next, let's take a look at how to use the page Analyzer:
1. Open the page analyzer through URL in the browser
2. Enter the page address for analysis.
3. Click "LOAD" to display the result.
4. Click the label of layout and you will see:
5. When multiple la s exist on a single component, reducing unnecessary la s in the code will improve the system performance.
Grid OptimizationUsing ext JS grid has a special performance problem, especially when processing large datasets. When processing small data, the speed is not a problem. However, when the grid handles "Unlimited scrolling" display, it will cause a performance bottleneck. Because infinite scrolling depends on the page cache.
When the user is scrolling, the cached data becomes visible and disappears at the top of the page and is no longer saved in the Dom. The main method to adjust this is to make the Dom as small as possible, and cache data on the client to reduce the round-trip of data on the server.
Rolling term
When the buffered of a Data Store is set to true, a pagingscroller object will be created to monitor the scroll of the view (the grid is configured as data views ), it is also used to provide quick data for the next step.
In the user's scroll view, you can view the dataset downward. pagingscroller maintains records of the previous area and the records of the subsequent area in the scroll direction.
Pagingscroller requires data store to ensure that trailingbufferzone and leadingbufferzone are already in the cache.
When scrolling, if the data is directly displayed in the cache, and you do not need to obtain the data through Ajax, the page will be mask. You can use the infinite grid tuner tool to set the cache size.
Example:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
