Taking long time to load selectBox
Below code snippet, "for" loop is taking long time to load the data to select box, could any one help me ? even I am using Jquery 1.3.2 which is new to me.
here names.response.length is 120000 records.
function personNameChangedCallback(names){
if(names.response.length > 0){
var options = ;
for (var i = 0; i< names.response.length; i++) {
options.push('<option>'+ names.response[i] +'</option>');
}
jQuery('[id=personNameSelected]').append(options.join(''));
}
javascript jquery performance
asked Nov 19 '18 at 18:12
Ramesh TatipigariRamesh Tatipigari
62
|
show 3 more comments
Below code snippet, "for" loop is taking long time to load the data to select box, could any one help me ? even I am using Jquery 1.3.2 which is new to me.
here names.response.length is 120000 records.
function personNameChangedCallback(names){
if(names.response.length > 0){
var options = ;
for (var i = 0; i< names.response.length; i++) {
options.push('<option>'+ names.response[i] +'</option>');
}
jQuery('[id=personNameSelected]').append(options.join(''));
}
javascript jquery performance
asked Nov 19 '18 at 18:12
Ramesh TatipigariRamesh Tatipigari
62
Of course it is, 120000 is a crazy number of elements to render
– Taplar
Nov 19 '18 at 18:13
1
I would suggest looking into implementing an autosuggest/autocomplete plugin, and don't show that many results
– Taplar
Nov 19 '18 at 18:14
It is working fine Chrome, but it is taking long time in IE
– Ramesh Tatipigari
Nov 19 '18 at 18:21
That select is useless with that many options.
– epascarello
Nov 19 '18 at 18:30
I agree with @Taplar and epascrello, think about that poor user who is gonna have to select from those options
– Towkir Ahmed
Nov 19 '18 at 18:33
|
show 3 more comments
Below code snippet, "for" loop is taking long time to load the data to select box, could any one help me ? even I am using Jquery 1.3.2 which is new to me.
here names.response.length is 120000 records.
function personNameChangedCallback(names){
if(names.response.length > 0){
var options = ;
for (var i = 0; i< names.response.length; i++) {
options.push('<option>'+ names.response[i] +'</option>');
}
jQuery('[id=personNameSelected]').append(options.join(''));
}
javascript jquery performance
asked Nov 19 '18 at 18:12
Ramesh TatipigariRamesh Tatipigari
62
Below code snippet, "for" loop is taking long time to load the data to select box, could any one help me ? even I am using Jquery 1.3.2 which is new to me.
here names.response.length is 120000 records.
function personNameChangedCallback(names){
if(names.response.length > 0){
var options = ;
for (var i = 0; i< names.response.length; i++) {
options.push('<option>'+ names.response[i] +'</option>');
}
jQuery('[id=personNameSelected]').append(options.join(''));
}
javascript jquery performance
javascript jquery performance
asked Nov 19 '18 at 18:12
Ramesh TatipigariRamesh Tatipigari
62
asked Nov 19 '18 at 18:12
Ramesh TatipigariRamesh Tatipigari
62
asked Nov 19 '18 at 18:12
Ramesh TatipigariRamesh Tatipigari
62
asked Nov 19 '18 at 18:12
Ramesh TatipigariRamesh Tatipigari
62
asked Nov 19 '18 at 18:12
Ramesh TatipigariRamesh Tatipigari
62
62
Of course it is, 120000 is a crazy number of elements to render
– Taplar
Nov 19 '18 at 18:13
1
I would suggest looking into implementing an autosuggest/autocomplete plugin, and don't show that many results
– Taplar
Nov 19 '18 at 18:14
It is working fine Chrome, but it is taking long time in IE
– Ramesh Tatipigari
Nov 19 '18 at 18:21
That select is useless with that many options.
– epascarello
Nov 19 '18 at 18:30
I agree with @Taplar and epascrello, think about that poor user who is gonna have to select from those options
– Towkir Ahmed
Nov 19 '18 at 18:33
|
show 3 more comments
Of course it is, 120000 is a crazy number of elements to render
– Taplar
Nov 19 '18 at 18:13
1
I would suggest looking into implementing an autosuggest/autocomplete plugin, and don't show that many results
– Taplar
Nov 19 '18 at 18:14
It is working fine Chrome, but it is taking long time in IE
– Ramesh Tatipigari
Nov 19 '18 at 18:21
That select is useless with that many options.
– epascarello
Nov 19 '18 at 18:30
I agree with @Taplar and epascrello, think about that poor user who is gonna have to select from those options
– Towkir Ahmed
Nov 19 '18 at 18:33
Of course it is, 120000 is a crazy number of elements to render
– Taplar
Nov 19 '18 at 18:13
Of course it is, 120000 is a crazy number of elements to render
– Taplar
Nov 19 '18 at 18:13
1
1
I would suggest looking into implementing an autosuggest/autocomplete plugin, and don't show that many results
– Taplar
Nov 19 '18 at 18:14
I would suggest looking into implementing an autosuggest/autocomplete plugin, and don't show that many results
– Taplar
Nov 19 '18 at 18:14
It is working fine Chrome, but it is taking long time in IE
– Ramesh Tatipigari
Nov 19 '18 at 18:21
It is working fine Chrome, but it is taking long time in IE
– Ramesh Tatipigari
Nov 19 '18 at 18:21
That select is useless with that many options.
– epascarello
Nov 19 '18 at 18:30
That select is useless with that many options.
– epascarello
Nov 19 '18 at 18:30
I agree with @Taplar and epascrello, think about that poor user who is gonna have to select from those options
– Towkir Ahmed
Nov 19 '18 at 18:33
I agree with @Taplar and epascrello, think about that poor user who is gonna have to select from those options
– Towkir Ahmed
Nov 19 '18 at 18:33
|
show 3 more comments
1 Answer
1
active
oldest
votes
What could help is to avoid using an array to store the options and instead concatenate the strings directly.
Here is a jsperf comparison for this, using array is around 80% slower than directly concatenating a string:
https://jsperf.com/javascript-test-string-concat-vs-array/1
So you can change your function like this:
function personNameChangedCallback(names){
if(names.response.length > 0){
var htmlOptions = '';
for (var i = 0; i< names.response.length; i++) {
htmlOptions += '<option>'+ names.response[i] +'</option>';
}
jQuery('[id=personNameSelected]').html(htmlOptions);
}
The reason why it is slow in Internet Explorer, is because it's Javascript engine is not as advanced as the ones of other browsers.
Internet Explorer will also have issues letting you scroll through all these options.
Using a suggestion box as already mentioned by someone else is a better option, especially when your applciation has to be compatible with Internet Explorer.
answered Nov 30 '18 at 15:01
RetoReto
664
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53380420%2ftaking-long-time-to-load-selectbox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
What could help is to avoid using an array to store the options and instead concatenate the strings directly.
Here is a jsperf comparison for this, using array is around 80% slower than directly concatenating a string:
https://jsperf.com/javascript-test-string-concat-vs-array/1
So you can change your function like this:
function personNameChangedCallback(names){
if(names.response.length > 0){
var htmlOptions = '';
for (var i = 0; i< names.response.length; i++) {
htmlOptions += '<option>'+ names.response[i] +'</option>';
}
jQuery('[id=personNameSelected]').html(htmlOptions);
}
The reason why it is slow in Internet Explorer, is because it's Javascript engine is not as advanced as the ones of other browsers.
Internet Explorer will also have issues letting you scroll through all these options.
Using a suggestion box as already mentioned by someone else is a better option, especially when your applciation has to be compatible with Internet Explorer.
answered Nov 30 '18 at 15:01
RetoReto
664
add a comment |
What could help is to avoid using an array to store the options and instead concatenate the strings directly.
Here is a jsperf comparison for this, using array is around 80% slower than directly concatenating a string:
https://jsperf.com/javascript-test-string-concat-vs-array/1
So you can change your function like this:
function personNameChangedCallback(names){
if(names.response.length > 0){
var htmlOptions = '';
for (var i = 0; i< names.response.length; i++) {
htmlOptions += '<option>'+ names.response[i] +'</option>';
}
jQuery('[id=personNameSelected]').html(htmlOptions);
}
The reason why it is slow in Internet Explorer, is because it's Javascript engine is not as advanced as the ones of other browsers.
Internet Explorer will also have issues letting you scroll through all these options.
Using a suggestion box as already mentioned by someone else is a better option, especially when your applciation has to be compatible with Internet Explorer.
answered Nov 30 '18 at 15:01
RetoReto
664
add a comment |
What could help is to avoid using an array to store the options and instead concatenate the strings directly.
Here is a jsperf comparison for this, using array is around 80% slower than directly concatenating a string:
https://jsperf.com/javascript-test-string-concat-vs-array/1
So you can change your function like this:
function personNameChangedCallback(names){
if(names.response.length > 0){
var htmlOptions = '';
for (var i = 0; i< names.response.length; i++) {
htmlOptions += '<option>'+ names.response[i] +'</option>';
}
jQuery('[id=personNameSelected]').html(htmlOptions);
}
The reason why it is slow in Internet Explorer, is because it's Javascript engine is not as advanced as the ones of other browsers.
Internet Explorer will also have issues letting you scroll through all these options.
Using a suggestion box as already mentioned by someone else is a better option, especially when your applciation has to be compatible with Internet Explorer.
answered Nov 30 '18 at 15:01
RetoReto
664
What could help is to avoid using an array to store the options and instead concatenate the strings directly.
Here is a jsperf comparison for this, using array is around 80% slower than directly concatenating a string:
https://jsperf.com/javascript-test-string-concat-vs-array/1
So you can change your function like this:
function personNameChangedCallback(names){
if(names.response.length > 0){
var htmlOptions = '';
for (var i = 0; i< names.response.length; i++) {
htmlOptions += '<option>'+ names.response[i] +'</option>';
}
jQuery('[id=personNameSelected]').html(htmlOptions);
}
The reason why it is slow in Internet Explorer, is because it's Javascript engine is not as advanced as the ones of other browsers.
Internet Explorer will also have issues letting you scroll through all these options.
Using a suggestion box as already mentioned by someone else is a better option, especially when your applciation has to be compatible with Internet Explorer.
answered Nov 30 '18 at 15:01
RetoReto
664
answered Nov 30 '18 at 15:01
RetoReto
664
answered Nov 30 '18 at 15:01
RetoReto
664
answered Nov 30 '18 at 15:01
RetoReto
664
664
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53380420%2ftaking-long-time-to-load-selectbox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Of course it is, 120000 is a crazy number of elements to render
– Taplar
Nov 19 '18 at 18:13
1
I would suggest looking into implementing an autosuggest/autocomplete plugin, and don't show that many results
– Taplar
Nov 19 '18 at 18:14
It is working fine Chrome, but it is taking long time in IE
– Ramesh Tatipigari
Nov 19 '18 at 18:21
That select is useless with that many options.
– epascarello
Nov 19 '18 at 18:30
I agree with @Taplar and epascrello, think about that poor user who is gonna have to select from those options
– Towkir Ahmed
Nov 19 '18 at 18:33