I have seen a number of Javascript examples to throw on top of an html table to make them sortable. The issue is that everyone I have seen and tried are insanely slow.
Any suggestions or recommendation for a good performance solution.
I've found (just in casual use, not via any intensive analysis) that the jQuery TableSorter plug-in has a decent performance rate, and is quite advanced compared to any of the other solutions out there.
Of course, it relies on jQuery, but if you were picky about footprint you could analyse the method used by the plug-in and create your own lighter implementation.
Have you tried tablesorter (powered by jQuery)?
Check it out at: http://tablesorter.com/docs/
It's pretty easy to use.
If this is for a web app and you have a lot of data, it may make more sense to do the sorting server-side using SQL or whatever ORM you're using.
The fastest way to sort that I found is to actually just sort the rows in the table. If you move a cell in the DOM the entire row will move, and so be sorted.
Here is a sample of doing this, as I don't remember the article I read about doing this originally.
http://www.eggheadcafe.com/community/aspnet/3/10051794/try-this.aspx
I've spent a lot of time evaluating various advanced table libraries, including the jquery one, the dojo one, the YUI datatable, and GWT's paging scroll table. I was unsatisfied with the performance of any of them for tables with thousands of rows (and I think paging is a poor solution as well).
I concluded that flash is the way to go with this kind of scenario.
A site that gives an example of a flash table with 10000, 100000, and a million rows can be found here.
There is also this site, which allows you to compare the performance of a javascript and flash implementation of an advanced table.
Perhaps Javascript isnt the solution here then - you could do server side sorting or consider a flex/actionscript based solution.
I was using W3 School Sort plugin and it was really slow with a table of 250 rows. Unresponsive for a good 5 seconds.
Switched to tablesorter.com as mentionned in the replies. Works like a charm. Much, much faster. No wait at all now.
Related
I'm looking for a way to do spreadsheet type actions with a table on a website that I'm creating. I looked quickly at KendoUI, but that seems to be a little too far out of my budget. Wondering if there was anything cheaper that I could use.
The main features that I'm looking for is to be able to hide columns, filter rows, and row selection via click-drag.
I have very little js experience, but don't mind looking into it to get started. Would need some direction in where to look for that.
The web application is php based, and runs off of the CodeIgniter Framework.
You need to use jQuery plugin, depending on your need, you will find greats frameworks
I've done a bit of searching and found this one:
http://visop-dev.com/Project+jQuery.sheet
We are about to commence a redesign of our site and are exploring all options in improving performance. The site is fairly heavy in javascript loaded adverts, therefore we need to be really lean with the javascript we use.
Do any of you have any experience of lighter frameworks or more efficient frameworks that I could explore? Or any resources that you could point me toward? YUI looks like an interesting concept … has the loader being tested in anger? ANy good?
Any thoughts would be appreciated.
Cheers.
edit: Sorry, I wasn't clear. The sites performance currently is pretty good, we are not redesigning due to performance issues, it is due to a rebrand. We just wanted to take the opportunity to review best practices.
jQuery 1.4.2 is lean and mean. You'll be hard pressed finding something faster or more lightweight.
As an example, here is a framework test called slickspeed from mootools. It tests a framework's ability at finding elements in the DOM. The version of jQuery being tested is 1.2.6. Depending on your browser, jQuery performs exceptionally well. In my Chrome browser, jQuery beat all the others with a total time of 20 milliseconds.
And since version 1.2, jQuery has had astounding improvements in optimization and speed, especially with 1.4.
That said, a framework isn't going to make you code better. You can write some seriously slow scripts using any framework, including jQuery.
If, however, you write optimized code, jQuery can be so fast you don't even notice.
Pointy's comment above is spot on. All these guys do all day is worry about how to perform better. So it's pretty optimized.
addendum
This is from jQuery's blog:
While comprehensive benchmarks like Taskspeed can be interesting if deconstructed into individual sub-tests for further study, as a project we tend to stay away from using them as an accurate measure of true, overall, library performance. Considering how many aspects make up a library, not to mention the different techniques that they offer, cumulative results rarely reflect how an actual user may use a library.
So take that as you will.
I prefer YUI3 for larger apps and just about anywhere that 'load on demand' can offer benefits :)
I agree that slowdowns mostly stem from how you implement your app, which is one of the benefits, imho, of YUI, it lends itself naturally towards more modular implementations.
Using the yui loader to bring in page elements widget style allows for good code reuse (and caching) as well letting the user see 'something' quicker.
It won't really solve your JS ad issues though, for that, the best thing you can do is load it as near the bottom of the page as possible, and perhaps look at what loading options the adservers have.
Re: Stephen's comment
Well, raw speed for tight loops are sometimes meaningful, sometimes not. There is also the issue of the implementations used for the comparison, the YUI3 code posted in Ejohns version looks positively gimped compared to the jQuery code, look fx at the first one. Where jQuery adds almost the complete DOM element from a string while YUI3 is going thru all kinds of hoops, relatively speaking.
For a version that is written by someone who knows YUI3 have a look at http://yuilibrary.com/~msweeney/yui-tests/taskspeed/ the newest jquery isn't represented, but it does have YUI3 as ~4 times faster overall than jquery 1.3.2 in my Chrome.
Update
http://www.yuiblog.com/blog/2010/10/27/jquery-and-yui-3-a-tale-of-two-javascript-libraries/ a jquery users experience of yui3.
Probably the best place to start off is not to ask what frameworks can help but why your current site has bad performance. I would start off with tools like Yahoo's YSlow and also Dynatrace ajax edition. Dynatrace is nice because it will point out javascript/dom manip stuff that make your pages slow. You will want to use more than just two performance tools though since they all pretty much have their own idea's on what makes a page fast. Once you have that down then I would come into a forum and state that your having performance issues with X and what can I do to fix.
vapor.js is the world's smallest and fastest javascript library
http://vaporjs.com/
I think you should have a look at zepto.js
http://zeptojs.com/
this article gives you some advices for porting your jquery code
http://blog.pamelafox.org/2012/03/porting-jquery-plugins-to-zepto-tips.html
jQuery is plenty lightweight if coded properly. It sounds like which framework you are using is not the problem, but either a) why the javascript your writing is performing slowly, or b) why you are using so many slow loading ads to begin with.
But if you really want to look into other frameworks, here's a handy comparison chart: Comparison of JavaScript Frameworks
I just wrote an internal app for our company using jquery and jquery UI (http://jqueryui.com/), mixed in with c#. I found it to be extremely lean and fast - no problems whatsoever.
the jquery ui makes it easy to theme the website...
and by adding other components like blockui, jgrowl, etc you should be able to do anything you want!
Sprint is a tiny, fast alternative.
Check out the repo for benchmarks on a few functions, compared with recent versions of jQuery and Zepto.
i have been looking at jqgrid, telerik.
does anyone have any performance metric comparisons or have any other alternative that they think is faster.
Have you tried the telerik MVC extensions. The grid is very easy to use and support all the various paging mechanisms. You may find that will do what you're after, combined with a bit of behind-the-scenes custom paging.
I am a fan of DataTables.net. I've not had any performance issues with it and it's quite straightforward to use.
Ok - I just built a quick and dirty version of the datatables and the jqgrid - loaded 1000 rows of data from an sql database and performed console.time tests in firebug.
The results where surprisingly similar with datatables barely edging out jqgrid in some situations - not enough to choose one over the other purely on performance (imo).
The question is: Is it bad to learn how to do special effects, table sorting, etc, using jQuery instead of learning the bits of code that bring that alive with pure javascript?
I have previously addressed a similar problem in a question, but I missed adding this extra inquiry!
Yes you can. Doing it in JQuery isn't bad. Everyone uses some sort of Javascript library. I love JQuery. Your odds of making things that work in all browsers go up quite a bit, you get the UI done quicker, etc.
Though having a bit of Javascript knowledge is good, because when things go wrong you want to be able to debug the problem.
JQuery.com has lots of good tutorials.
You really should use jQuery; it will allow you to spend more time adding features instead of trying to make your code work in every browser (Note that even jQuery is not a silver bullet; you'll still have some cross-browser headaches in any non-trivial web app, especially if you need to support IE6).
There's no point in turning your back on new tools and libraries just to "stay close to the metal".
If you're afraid of lowering your value in your boss' eyes, look at it a different way. Would you prefer to hire a programmer who spends all of his time working around browser bugs, or a programmer who uses jQuery and finishes his projects faster because of it? Remember that managers are trying to ship products and make money, not simply hire elite programmers.
Personally I was recommended to learn JS before learning jQuery. But started off with jQuery, and can make pretty much with it without to much JS experience. What you do need to know of JS you can just google it and learn it when needed ;)
jQuery is fantastic for us that doesn't take the time to learn everything about JS
Personally, until the beginning of this year, I used to limit my use of javascript to only helping aid the user with things like web forms.
However, after playing around with jQuery for no more than a few days, I realised how much easier it made achieving javascript effects and functionality. Now I pretty much use jQuery on most web pages, a lot of the time, just to add nicer UI effects.
A background knowledge of raw javascript will never go amiss and you will almost certainly still have to mix it in with your jQuery scripts, but when you run into troubles, nearly every problem I've had, had a solution already posted on Stack Overflow or just on Google.
Not a very technical answer, but as an intermediate programmer, and javascript newbie I've had no problems learning to work with jQuery. The documentation and community are very helpful.
I think you should set yourself a goal of knowing javascript well enough to be able to author a plugin if you need it in your favorite framework. While using a framework is almost always the right way to go, there will be times when you can't find a plugin that does exactly what you need. At that point you need to know javascript well enough to be able to adapt a plugin to your needs or write your own.
I want to create a draggable and resizable window in JavaScript for cross browser use, but I want to try and avoid using a framework if I can.
Has anyone got a link or some code that I can use?
JQuery is more focused on a lot of nice utility functions, and makes DOM manipulation a whole lot easier. Basically, I consider it to be Javascript as it should have been. It's a supremely helpful addition to the Javascript language itself.
ExtJS is a suite of GUI components with specific APIs... Use it if you want to easily create components that look like that, otherwise, go with a more flexible framework.
JQuery would be a good way to go. And with the Jquery UI plugins (such as draggable), it's a breeze.. (there's a demo here).
Not using a framework, to keep it 'pure', seems just a waste of time to me. There's good stuff, that will save you tremendous amounts of time, time better spent in making your application even better.
But you can always check out the source to get some 'inspiration', and adapt it without the overhead of the stuff you won't use. It's well done and easy to read, and you often discover some cross-browser hacks you didn't even think about..
edit: oh, if you REALLY don't wan't no framework EVER, just check out their source then.. sure you can use some of it for your application.
Sometimes you can't choose your environment or architecture, so you're stuck working within constraints like not being able to use frameworks...
Avoiding a framework altogether will leave you with lots of code and a bunch of tedious browser-testing.
If you would consider a framework I'd suggest jQuery with the jqDnR plugin. I think it will solve your problem or perhaps you could combine the functionality of the jQuery draggables with the jQuery resizables
Just trying to avoid large framework downloads to the client for one very small thing, perhaps I am being daft.
I had looked at jQuery but also ExtJS, the documentation and UI 'look' seem far superior and professional in ExtJS ... are there particular reasons for you guys recommending jQuery?