Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Performance - calling method floatThead() take a long time #101

Closed
Kurtas opened this issue Aug 4, 2014 · 7 comments
Closed

Performance - calling method floatThead() take a long time #101

Kurtas opened this issue Aug 4, 2014 · 7 comments

Comments

@Kurtas
Copy link
Contributor

Kurtas commented Aug 4, 2014

Hello,

I tried to use your plugin and I noticed that calling of floatThead function take a longer time when table have more rows.

For example this

var top = $(".navbar").offset().top
var a = new Date().getTime();
$('.table-fixed-header').floatThead({
    scrollingTop: top - 30,
    useAbsolutePositioning: false        
});    
var b = new Date().getTime();    
console.log(a-b);

table with 50rows - calling takes 485ms
table with 100rows - calling takes 893ms
table with 200rows - calling takes 2179ms

When you use useAbsolutePositioning: true, then times are much bigger.
Is it normal behavior?

PS: My THEAD have 2 rows ... columns name are stored in first row and in second row is allways input text field or select box for filtering.

@mkoryak
Copy link
Owner

mkoryak commented Aug 4, 2014

2 seconds for 200 rows sounds a bit high. Do you see the same numbers on this test page ?
http://mkoryak.github.io/floatThead/tests/big-table/

For me, that table initializes in ~250ms and it has 500 rows. I am on 2.6ghz macbook.

The number of rows does impact the speed of init because the browser needs to re-layout the table.

If you can reproduce your issue in a jsfiddle, I would be happy to take a look at it.

@Kurtas
Copy link
Contributor Author

Kurtas commented Aug 5, 2014

Hi, first thanks for reply.
BigTable test page takes me 1200 ms according to profiler, I have Celeron core duo 2.2Ghz. I know my cpu is poor but ordinary users have similiar. So it's seems that it's common behavior for big tables :(.

My tables always have more then 15 columns and user can select 1K rows per page.

I also noticed that when I use other css files which format table then times are higher, especially when it set width of some columns. I will try to find more.

It's a shame, it's really great plugin that works like I need.

@mkoryak
Copy link
Owner

mkoryak commented Aug 5, 2014

Sorry man. There isnt much more I can do to optimize the speed. The code that changes the width is very simple. see: https://github.com/mkoryak/floatThead/blob/master/dist/jquery.floatThead.js#L418

If you have any ideas, let me know.

Though it might be a stretch to say that ordinary users have CPUs that are ~6 years old.

Kurtas pushed a commit to Kurtas/floatThead that referenced this issue Aug 6, 2014
This is fix for issue described here mkoryak#101
Performance is much better.
See this video for an explanation http://www.paulirish.com/2011/dom-html5-css3-performance/

I'm not javascript expert, but you can also try another tips from this video how to avoid "reflows"
mkoryak added a commit that referenced this issue Aug 6, 2014
@mkoryak
Copy link
Owner

mkoryak commented Aug 6, 2014

Your changes are now on master. If you really need it, I can cut a new version of the plugin, otherwise, just use what is in /dist/ on master

@mkoryak mkoryak closed this as completed Aug 6, 2014
@mkoryak
Copy link
Owner

mkoryak commented Oct 1, 2014

Hey, I finally got enough fixes to warrant a release. Your pull request is now part of v1.2.9 - Thanks!

@Kurtas
Copy link
Contributor Author

Kurtas commented Oct 1, 2014

Thanks for info

@lock
Copy link

lock bot commented Dec 11, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked as resolved and limited conversation to collaborators Dec 11, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants