CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
bhavya_w
bhavya_w

Reputation: 10087

Large Html Code - page response time very slow

I am working on a web application where I have to display an html table with around 400 rows and 9 columns.

There's lot going on in the application...( large number of events, different views ) It has around 1700 lines of Jquery Code. Although i have optimised Jquery code to the extent i read in various articles using - selectors caching, using proper selectors, using proper event delegation,chaining, referring to jsperf to test almost every method, selectors i have used etc etc. Although the responsiveness of the page has increased some extent but still its far from what is required. ( strict performance requirements )

Question: For every table cell (td ) there's a click event which opens the bootstrap modal. If the no. of rows in the table are 50 Modal opening time is 50.32ms and if the table rows are around 400 the modal opening time is 700ms ( measuring time using console.time ). How the **number of rows in my table ( html code ) affecting modal opening time.??? how can i fix this??

--> this is the code i am using for opening modal

$('#mainTable).on('click','.cell',function(){
       cellzoom(this);
 }); 

function cellzoom(obj,e,date) {
    console.time('cellzoom:')
    cellModal();
    console.timeEnd('cellzoom:')
}


function cellModal(){
//  $(mainloader).show();
    console.time('cellModal:')
    $(cellview).modal('show');
    console.timeEnd('cellModal:')
}

P.S : i Cannot use pagination

Anyone who has dealt with large data set and large amount of jquery code and things(tools) they did to optimise their code...any help would be greatly appreciated!!

Upvotes: 1

Views: 624

Answers (1)

Mikkel Damm
Mikkel Damm

Reputation: 341

It can possible depend on your CSS for the modal. If it has a lot of shadow, gradient etc. then browser can suffer from the large HTML structure and renders the CSS slowly. But if I were you I would also look at the method for showing the modal , like @Kirk wrote

Upvotes: 1

Related Questions