I optimized requestAnimationFrame calls by prebinding the animation function












0














The normal flow is



function animate() {
requestAnimationFrame(animate);
// do render stuff
chicken.position.x++;
}

animate();


However when you encapsulate your code into a class



Normal Animation Step in Class



animate() {
requestAnimationFrame(this.animate.bind(this));
// do render stuff
this.chicken.position.x++;
}

// somewhere else
this.animate.call(this);


I noticed you can get a measurable execution speedup by prebinding the animate function to do this



Optimized Animation Step



animate() {
requestAnimationFrame(this.animate_binded);
// do render stuff
this.chicken.position.x++;
}

// somewhere else
this.animate_binded = this.animate.bind(this);
this.animate();


I don't have heap analysis tools but I observed a measurable and repeatble drop in time spent scripting and rendering.



Can anyone help me confirm? This might be obvious but I don't think it hurts to point out that you can optimze away the bind step.









share







New contributor




david is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

























    0














    The normal flow is



    function animate() {
    requestAnimationFrame(animate);
    // do render stuff
    chicken.position.x++;
    }

    animate();


    However when you encapsulate your code into a class



    Normal Animation Step in Class



    animate() {
    requestAnimationFrame(this.animate.bind(this));
    // do render stuff
    this.chicken.position.x++;
    }

    // somewhere else
    this.animate.call(this);


    I noticed you can get a measurable execution speedup by prebinding the animate function to do this



    Optimized Animation Step



    animate() {
    requestAnimationFrame(this.animate_binded);
    // do render stuff
    this.chicken.position.x++;
    }

    // somewhere else
    this.animate_binded = this.animate.bind(this);
    this.animate();


    I don't have heap analysis tools but I observed a measurable and repeatble drop in time spent scripting and rendering.



    Can anyone help me confirm? This might be obvious but I don't think it hurts to point out that you can optimze away the bind step.









    share







    New contributor




    david is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.























      0












      0








      0







      The normal flow is



      function animate() {
      requestAnimationFrame(animate);
      // do render stuff
      chicken.position.x++;
      }

      animate();


      However when you encapsulate your code into a class



      Normal Animation Step in Class



      animate() {
      requestAnimationFrame(this.animate.bind(this));
      // do render stuff
      this.chicken.position.x++;
      }

      // somewhere else
      this.animate.call(this);


      I noticed you can get a measurable execution speedup by prebinding the animate function to do this



      Optimized Animation Step



      animate() {
      requestAnimationFrame(this.animate_binded);
      // do render stuff
      this.chicken.position.x++;
      }

      // somewhere else
      this.animate_binded = this.animate.bind(this);
      this.animate();


      I don't have heap analysis tools but I observed a measurable and repeatble drop in time spent scripting and rendering.



      Can anyone help me confirm? This might be obvious but I don't think it hurts to point out that you can optimze away the bind step.









      share







      New contributor




      david is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      The normal flow is



      function animate() {
      requestAnimationFrame(animate);
      // do render stuff
      chicken.position.x++;
      }

      animate();


      However when you encapsulate your code into a class



      Normal Animation Step in Class



      animate() {
      requestAnimationFrame(this.animate.bind(this));
      // do render stuff
      this.chicken.position.x++;
      }

      // somewhere else
      this.animate.call(this);


      I noticed you can get a measurable execution speedup by prebinding the animate function to do this



      Optimized Animation Step



      animate() {
      requestAnimationFrame(this.animate_binded);
      // do render stuff
      this.chicken.position.x++;
      }

      // somewhere else
      this.animate_binded = this.animate.bind(this);
      this.animate();


      I don't have heap analysis tools but I observed a measurable and repeatble drop in time spent scripting and rendering.



      Can anyone help me confirm? This might be obvious but I don't think it hurts to point out that you can optimze away the bind step.







      javascript performance animation





      share







      New contributor




      david is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.










      share







      New contributor




      david is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.








      share



      share






      New contributor




      david is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked 3 mins ago









      david

      1




      1




      New contributor




      david is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      david is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      david is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.



























          active

          oldest

          votes











          Your Answer





          StackExchange.ifUsing("editor", function () {
          return StackExchange.using("mathjaxEditing", function () {
          StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
          StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
          });
          });
          }, "mathjax-editing");

          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: "196"
          };
          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: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          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
          });


          }
          });






          david is a new contributor. Be nice, and check out our Code of Conduct.










          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f210336%2fi-optimized-requestanimationframe-calls-by-prebinding-the-animation-function%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown






























          active

          oldest

          votes













          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          david is a new contributor. Be nice, and check out our Code of Conduct.










          draft saved

          draft discarded


















          david is a new contributor. Be nice, and check out our Code of Conduct.













          david is a new contributor. Be nice, and check out our Code of Conduct.












          david is a new contributor. Be nice, and check out our Code of Conduct.
















          Thanks for contributing an answer to Code Review Stack Exchange!


          • 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.


          Use MathJax to format equations. MathJax reference.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • 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.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f210336%2fi-optimized-requestanimationframe-calls-by-prebinding-the-animation-function%23new-answer', 'question_page');
          }
          );

          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







          Popular posts from this blog

          404 Error Contact Form 7 ajax form submitting

          How to know if a Active Directory user can login interactively

          Refactoring coordinates for Minecraft Pi buildings written in Python