Is it faster to compute values before using them within an event handler
This may be a dumb question, but let's say I'm creating event handlers for a class of elements, and each event handler depends on some specific computations for the particular element to which it's assigned. I'd assume the event handler will respond faster if the computations are done in advance and then placed in the handler, like this for example:
$('.myElements').each(function ()
// Computations
$(this).click(function ()
// Handler using computations
);
);
As opposed to this:
$('.myElements').click(function ()
// Computations
// Handler using computations
);
I'd assume the first approach will result in faster firing because the computation is done in advance of the actual click event. But is that necessarily the case? I ask because I'm comparing the two, and at least anecdotally, the latter approach seems to be as fast as the first, if not faster. And the computations I'm concerned about are some unavoidable regexes.
javascript jquery event-handling
asked Nov 13 '18 at 1:38
amt528amt528
1185
add a comment |
This may be a dumb question, but let's say I'm creating event handlers for a class of elements, and each event handler depends on some specific computations for the particular element to which it's assigned. I'd assume the event handler will respond faster if the computations are done in advance and then placed in the handler, like this for example:
$('.myElements').each(function ()
// Computations
$(this).click(function ()
// Handler using computations
);
);
As opposed to this:
$('.myElements').click(function ()
// Computations
// Handler using computations
);
I'd assume the first approach will result in faster firing because the computation is done in advance of the actual click event. But is that necessarily the case? I ask because I'm comparing the two, and at least anecdotally, the latter approach seems to be as fast as the first, if not faster. And the computations I'm concerned about are some unavoidable regexes.
javascript jquery event-handling
asked Nov 13 '18 at 1:38
amt528amt528
1185
Unless the computations are extremely CPU-intensive, it's not something to worry about, especially in reference to a click handler (users are much slower than computers :) ) First code block will take more resources upfront, but the click handler will perform (very slightly) faster, second code block will be the reverse.
– CertainPerformance
Nov 13 '18 at 1:41
Assume 1000 such elements the first has to do all those computations immediately on page load whereas the second only has to do them on demand for instance specific event occurrence and not until the event occurs. Page load is hectic with lots of script doing different things, IMO better to only do the computations when needed
– charlietfl
Nov 13 '18 at 1:52
A few times I have used Console.time() for performance meassurements, you can do some testing with this method. In your case, the first approach will consume more time at document load. So, unless the computation takes too much time, in the way that you note ir affect the user experience, I will go with the second approach.
– Shidersz
Nov 13 '18 at 2:19
If you really want to get fancy could also do the computations in a webWorker thread which runs separate from code in main thread
– charlietfl
Nov 13 '18 at 2:34
add a comment |
This may be a dumb question, but let's say I'm creating event handlers for a class of elements, and each event handler depends on some specific computations for the particular element to which it's assigned. I'd assume the event handler will respond faster if the computations are done in advance and then placed in the handler, like this for example:
$('.myElements').each(function ()
// Computations
$(this).click(function ()
// Handler using computations
);
);
As opposed to this:
$('.myElements').click(function ()
// Computations
// Handler using computations
);
I'd assume the first approach will result in faster firing because the computation is done in advance of the actual click event. But is that necessarily the case? I ask because I'm comparing the two, and at least anecdotally, the latter approach seems to be as fast as the first, if not faster. And the computations I'm concerned about are some unavoidable regexes.
javascript jquery event-handling
asked Nov 13 '18 at 1:38
amt528amt528
1185
This may be a dumb question, but let's say I'm creating event handlers for a class of elements, and each event handler depends on some specific computations for the particular element to which it's assigned. I'd assume the event handler will respond faster if the computations are done in advance and then placed in the handler, like this for example:
$('.myElements').each(function ()
// Computations
$(this).click(function ()
// Handler using computations
);
);
As opposed to this:
$('.myElements').click(function ()
// Computations
// Handler using computations
);
I'd assume the first approach will result in faster firing because the computation is done in advance of the actual click event. But is that necessarily the case? I ask because I'm comparing the two, and at least anecdotally, the latter approach seems to be as fast as the first, if not faster. And the computations I'm concerned about are some unavoidable regexes.
javascript jquery event-handling
javascript jquery event-handling
asked Nov 13 '18 at 1:38
amt528amt528
1185
asked Nov 13 '18 at 1:38
amt528amt528
1185
edited Nov 13 '18 at 1:48
amt528
asked Nov 13 '18 at 1:38
amt528amt528
1185
asked Nov 13 '18 at 1:38
amt528amt528
1185
asked Nov 13 '18 at 1:38
amt528amt528
1185
1185
Unless the computations are extremely CPU-intensive, it's not something to worry about, especially in reference to a click handler (users are much slower than computers :) ) First code block will take more resources upfront, but the click handler will perform (very slightly) faster, second code block will be the reverse.
– CertainPerformance
Nov 13 '18 at 1:41
Assume 1000 such elements the first has to do all those computations immediately on page load whereas the second only has to do them on demand for instance specific event occurrence and not until the event occurs. Page load is hectic with lots of script doing different things, IMO better to only do the computations when needed
– charlietfl
Nov 13 '18 at 1:52
A few times I have used Console.time() for performance meassurements, you can do some testing with this method. In your case, the first approach will consume more time at document load. So, unless the computation takes too much time, in the way that you note ir affect the user experience, I will go with the second approach.
– Shidersz
Nov 13 '18 at 2:19
If you really want to get fancy could also do the computations in a webWorker thread which runs separate from code in main thread
– charlietfl
Nov 13 '18 at 2:34
add a comment |
Unless the computations are extremely CPU-intensive, it's not something to worry about, especially in reference to a click handler (users are much slower than computers :) ) First code block will take more resources upfront, but the click handler will perform (very slightly) faster, second code block will be the reverse.
– CertainPerformance
Nov 13 '18 at 1:41
Assume 1000 such elements the first has to do all those computations immediately on page load whereas the second only has to do them on demand for instance specific event occurrence and not until the event occurs. Page load is hectic with lots of script doing different things, IMO better to only do the computations when needed
– charlietfl
Nov 13 '18 at 1:52
A few times I have used Console.time() for performance meassurements, you can do some testing with this method. In your case, the first approach will consume more time at document load. So, unless the computation takes too much time, in the way that you note ir affect the user experience, I will go with the second approach.
– Shidersz
Nov 13 '18 at 2:19
If you really want to get fancy could also do the computations in a webWorker thread which runs separate from code in main thread
– charlietfl
Nov 13 '18 at 2:34
Unless the computations are extremely CPU-intensive, it's not something to worry about, especially in reference to a click handler (users are much slower than computers :) ) First code block will take more resources upfront, but the click handler will perform (very slightly) faster, second code block will be the reverse.
– CertainPerformance
Nov 13 '18 at 1:41
Unless the computations are extremely CPU-intensive, it's not something to worry about, especially in reference to a click handler (users are much slower than computers :) ) First code block will take more resources upfront, but the click handler will perform (very slightly) faster, second code block will be the reverse.
– CertainPerformance
Nov 13 '18 at 1:41
Assume 1000 such elements the first has to do all those computations immediately on page load whereas the second only has to do them on demand for instance specific event occurrence and not until the event occurs. Page load is hectic with lots of script doing different things, IMO better to only do the computations when needed
– charlietfl
Nov 13 '18 at 1:52
Assume 1000 such elements the first has to do all those computations immediately on page load whereas the second only has to do them on demand for instance specific event occurrence and not until the event occurs. Page load is hectic with lots of script doing different things, IMO better to only do the computations when needed
– charlietfl
Nov 13 '18 at 1:52
A few times I have used Console.time() for performance meassurements, you can do some testing with this method. In your case, the first approach will consume more time at document load. So, unless the computation takes too much time, in the way that you note ir affect the user experience, I will go with the second approach.
– Shidersz
Nov 13 '18 at 2:19
A few times I have used Console.time() for performance meassurements, you can do some testing with this method. In your case, the first approach will consume more time at document load. So, unless the computation takes too much time, in the way that you note ir affect the user experience, I will go with the second approach.
– Shidersz
Nov 13 '18 at 2:19
If you really want to get fancy could also do the computations in a webWorker thread which runs separate from code in main thread
– charlietfl
Nov 13 '18 at 2:34
If you really want to get fancy could also do the computations in a webWorker thread which runs separate from code in main thread
– charlietfl
Nov 13 '18 at 2:34
add a comment |
0
active
oldest
votes
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%2f53272533%2fis-it-faster-to-compute-values-before-using-them-within-an-event-handler%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53272533%2fis-it-faster-to-compute-values-before-using-them-within-an-event-handler%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
Unless the computations are extremely CPU-intensive, it's not something to worry about, especially in reference to a click handler (users are much slower than computers :) ) First code block will take more resources upfront, but the click handler will perform (very slightly) faster, second code block will be the reverse.
– CertainPerformance
Nov 13 '18 at 1:41
Assume 1000 such elements the first has to do all those computations immediately on page load whereas the second only has to do them on demand for instance specific event occurrence and not until the event occurs. Page load is hectic with lots of script doing different things, IMO better to only do the computations when needed
– charlietfl
Nov 13 '18 at 1:52
A few times I have used Console.time() for performance meassurements, you can do some testing with this method. In your case, the first approach will consume more time at document load. So, unless the computation takes too much time, in the way that you note ir affect the user experience, I will go with the second approach.
– Shidersz
Nov 13 '18 at 2:19
If you really want to get fancy could also do the computations in a webWorker thread which runs separate from code in main thread
– charlietfl
Nov 13 '18 at 2:34