We are developing application in ExtJS4.
using extjs4, WCF Service, with editor grid, and perfomance is very very very slow. application is running under IE 8. Can someone provide tips on tuning the perfomance.
Reduce number of record by paging. (max 25)
Reduce number of columns displayed. (max10)
Reduce server time to load by optimizing query, should also page by 25.
Use a modern browser (FF,Chrome,etc)
Extjs in general has performance issues with IE .. i guess you are using the 4.0.7 the latest release. You can wait for 4.1.0 which should be a lot faster especially on IE, see their performance preview here
Related
I am wondering if its a good idea (if I want consistency across a multiplatform build) to include a css reset, or perhaps a css normalize library?
My concerns are of course, application speed, load time and memory usage, and the goal is of course UI consistency across platforms...
Overview
CSS reset is a must, Cordova / Phonegap all use the phones native browser so Windows Phone this is an Internet Explorer wrapper, android it's now a Chrome wrapper (old version use their own browsers wrapper), iOS uses what ever version of safari mobile for that version of iOS all of witch have more support for HTML5 so there could be differences. this means you need to reset so you have a base that is the same for all devices / browser the same as a Desktop website. but performance entirely relies on what your doing if you just use a small basic reset it will be less but then even a big one it's would you notice it anymore then not having it.
CSS Reset
So we know browsers have slight differences in CSS Engines Default Font's and stuff so we use a reset to prevent that this is the same for Mobile browsers (thats what cordova/phonegap use) so a reset is always recommended however, even if your building a cordova/phonegap mobile application for both iOS and Android is a royal pain in the arse Android support loads of Device Sizes iOS only has a few. but these sizes can cause massive problems not to mention the DDPI you have to use as the DPI varies so much.
Performance
There is a slight performance drop, not that you would see under any messurement it unless you include a massive CSS Reset system like http://getbootstrap.com/css/ that would add a bit of a performance hit but would you notice it if its 0.5 seconds your javascript takes longer from phonegap to init(), however look at bootstrap first if there is stuff in there that you would be using it would be worth it just to save development times i'm constantly using the alerts from http://getbootstrap.com/components/. there are small ones like http://html5doctor.com/html-5-reset-stylesheet/ if thats all your wanting.
Sources
The Internet it's full of tutorials telling you to implement a reset! https://www.google.co.uk/search?q=Phonegap+use+CSS+Reset&oq=Phonegap+use+CSS+Reset&aqs=chrome..69i57j69i60l3.3494j0j7&sourceid=chrome&es_sm=0&ie=UTF-8
You want facts ok stop using Phonegap/Cordova most of what it does is implements or utilizes HTML5! HTML5 is a work in progress so should not be used! http://www.w3.org/TR/html5/
ME: 5 Years of Mobile Development including developing parts of the Windows Phone 7 Phonegap. while being a developer for one of the Platform Preview applications. so i was building parts of phonegap for WP7 before most users new that WP7 was coming out.
Absolutely. If you're developing the app for multiple platforms then it sounds like a great idea. Though I have no doubt you'll still encounter differences across platforms.
I can't see how it would affect application speed/load times/memory usage.
While developing the app for cross platforms there are lots of issue regarding the css . It will be better to reset the css . But there are still issues regarding the performance .
This article might be helpful to you http://www.informit.com/articles/article.aspx?p=1915792&seqNum=6
Yes, you should!!
I've developed cross platform apps.
and each time I've used CSS reset.
I'm not sure about the exact context of a Phonegap app as I've never actually worked on one, but generally from a performance point of view any CSS reset shouldn't have an impact at all.
However, my opinion is that more often than not you shouldn't even bother with a full-fledged CSS reset targeting a bunch of specific elements and properties - you often end up overwriting them further down the stylesheet anyway.
A simple universal selector margin/padding reset is all I use today, which I supplement with my favourite box model tweak.
* {
margin:0;
padding:0;
box-sizing:border-box;
}
Maybe 10 years ago someone would tell you that the universal selector is slow, and it could've been true then, but using it on its own has been proven to be absolutely harmless today.
The rendering/layout engines of pretty much every recent browser are so quick anyway, not to mention the fact that even low end mobile devices nowadays are equipped with multi-core CPUs.
I wouldn't even call it micro optimisation, that's how negligent the impact is.
Now if you were to use div.header * - that's much more expensive, but probably still not something to lose sleep over if you don't have a few thousand elements on the page.
Have a read and test it for yourself.
I've been getting up to speed with MVC4 and custom display modes. All looks excellent, however, assuming I'm right in thinking the Request.Browser.IsMobileDevice is based upon C:\Windows\Microsoft.NET\Framework\v4.0.30319\Config\Browsers - does anybody know if Microsoft regularly update these (ie each time there is an update for .NET 4.0 from Windows Update) ?
At a high level, Request.Browser.IsMobileDevice is very useful. Alternatives are (other than custom display modes) such things as WURFL - but can be much more resource-intensive, and WURFL certainly add's about 2.5 seconds to the app startup time.
If anybody has any idea of the answer to this, or whether there is any sort of project which has custom / regularly updated browser definitions, I'd really appreciate it. Thanks.
You really should consider responsive webpage design instead.
Relying on MS to update definition files is ludicrous with so many new devices appearing on the market each year. We made this mistake a number of years ago an quickly realized it is unmaintainable.
Have a look at twitter boostrap instead:
http://twitter.github.com/bootstrap/
It's such a fantastic framework for UI and really worth exploring.
Once you get into the responsive design way of thinking you never go back - really is the future of web UI.
We're creating a Qt app which is basically a QtWebKit window for viewing a web application. The web application's frontend is written in ExtJS and it is running very slowly in some parts (e.g. some screens with multiple grids or complex layouts). My question is: is there a way of configuring the Qt app to make increase the performance of its JavaScript/rendering engine?
Thanks!
There is no way to tune webkit, so you can't tune it from Qt, either. But that doesn't mean you can't do anything. Here is a checklist of things you can try:
Make sure the performance is actually lost in the place where you think by measuring it with a profiler. I'm wrong 90% of the time when guessing what causes bad performance problems. Have a look at how many reputation I have and then think hard whether you are really sure you can do better :-)
If a profiler isn't an option, add timing information to the code.
Is it also slow in a normal web browser? If so, try to improve the JavaScript code. There are tools to run/profile that as well. Some are even built into your web browser.
Consider implementing part of the UI without ExtJS (and the overhead it brings along). Do you really need a full-fleshed out grid to display static data that can't be sorted? Maybe a plain HTML table will do.
Try a newer version of Qt. 5 just came out and it contains a more recent version of webkit.
We have a requirements to create a Website (ASP.NET v4.0) which displays a Graph. It should be able to do:
Display nodes (with names and colours)
Display links between the nodes, with text on the link (e.g. '85%')
Interact with nodes/links to drag/move/select
Layouts out the nodes in a clear manner automatically
Can add/remove nodes (asynchronously) and link/unlink easily
Javascript interaction with events (onClick, onDrag)
Events must provide identification of selected nodes/links (Javascript).
Ability to zoom in/out (ideally)
Updates Asynchronously (rather than full postbacks)
Responsive when displaying >100 nodes
Flash is not supported
MUST support IE6 (just don't ask...!)
Development is Visual Studio 2010 on .Net Framework v4.0
We were currently using the Syncfusion Diagram tool (v. 6.1.0.34) running on v2.0, but recently upgraded to v4.0 and a breaking change in System.Web ViewState management means we need to find an alternative. Its possible the latest version (v8.3) is much better, but we're reclutant to fork out a few thousand pounds for the licenses if its just as bad.
We found the Syncfusion tool ok, but it was very difficult to code against (without manual hacks) and it performed quite badly with large graphs when it loads 200 images from the server.
Really looking for some inspiration from your guys. Any suggestions or experiences shared would be most helpful.
Thanks in advance.
mxGraph is designed for this type of functionality (disclaimer - I do work for them). It does support IE 6 and is entirely written in JavaScript. It comes with .NET backend server classes to perform comms with the JavaScript client. In order to get responsive behaviour with over 100 nodes on IE 6, you need to switch to using a server side image over about 50-60 nodes, since IE 6 does perform very badly. We include an example to demonstrate how to do this. Give it a try, if you require evaluation support, there is a forum for that.
My Flex web application is almost ready for launch. I'm currently optimizing as much as I can in order to make sure even low-end clients are able to run it fluently. The problem is, I have no idea where to optimize more than I've already optimized.
My question is, what are the usuals suspects regarding bottlenecks? What tips and experiences do you have when it comes to Optimizing a Flex app?
There are some web tutorials on this, this presentation looks helpful. And of course, the Flex profiler could help you identifying the bottlenecks.
That's a good presentation covering a lot of pitfalls. Another thing I can think of is over-usage of bindings in large applications. They're easy to create and forget, silently generating a lot extra code running in the background, and are especially potent when used carelessly on entire classes.
These are some of the things I've seen that cause slow downs. I've only worked with one or two Flex developers, so I don't know if this is obvious, or helpful. Either way:
Transparency: Whenever views have a lot of components with non-opaque transparency (i.e. alpha less than 1.0), these views tend to be extremely slow, especially on older machines.
Object Creation: It seems that whenever there is a lot of object creation happening, the app slows to a crawl, even on newer machines. I worked on an app that created at least a few hundred objects when the application started.
Data Fetching: Whenever data is loaded asynchronously, the app will take a performance hit depending on how much is loaded
Lots of objects: When views have lots of objects in them, they tend to lag and generally drag ass.
Those are the ones I remember the best, having not worked on a major Flex app in over a year.
Other than performance improvements you can optimize the file size of flex applications.That will definately improve user experience.I hope this article helps:
http://askmeflash.com/article/9/optimize-flex-swf-filesize-performance-loading