11 ms·

Is there a place I can go to find out more information like this?

bgrins 16y ago
For an introduction, read the section on limiting DOM manipulation here: http://www.artzstudio.com/2009/04/jquery-performance-rules/#limit-dom-manipulation http://www.artzstudio.com/2009/04/jquery-performance-rules/#... Here is the Gecko DOM reference: https://developer.mozilla.org/en/DOM/element https://developer.mozilla.org/en/DOM/element (listing common manipulation methods) https://developer.mozilla.org/en/Gecko_DOM_Reference https://developer.mozilla.org/en/Gecko_DOM_Reference Basically, if you catch yourself calling DOM functions in a loop (or in a function that gets called in a loop, like the grid_canvas example here), it should be done in memory and then manipulate the DOM outside of the loop.
- MasterScrat 16y ago
  Do you know if there's a way to do something similar when displaying images? for a game I need to display a tiled background, and at this time I do it by looping on the x and y axis. That's slow. Of course I then translate the resulting canvas instead of redrawing everything when I want to scroll but there's still a lot of invalidations involved.
  - bgrins 16y ago
    For a tiled repeating background, I would recommend looking into createPattern function https://developer.mozilla.org/en/Canvas_tutorial/Applying_styles_and_colors#Patterns https://developer.mozilla.org/en/Canvas_tutorial/Applying_st.... You can use code like this: context.fillStyle = context.createPattern(img, 'repeat'); context.fillRect(0, 0, 100, 100); Where 'img' is an Image object you loaded from an src, or even a canvas object that you may have used to build a composite background. If this doesn't work in your situation, I would at least build this image once in a canvas in memory (using document.createElement), and reference it in the 'drawImage' function instead of building it from scratch each time. Though it sounds like you might already be doing this. Do you have a link to your game?

For an introduction, read the section on limiting DOM manipulation here: http://www.artzstudio.com/2009/04/jquery-performance-rules/#limit-dom-manipulation http://www.artzstudio.com/2009/04/jquery-performance-rules/#... Here is the Gecko DOM reference: https://developer.mozilla.org/en/DOM/element https://developer.mozilla.org/en/DOM/element (listing common manipulation methods) https://developer.mozilla.org/en/Gecko_DOM_Reference https://developer.mozilla.org/en/Gecko_DOM_Reference Basically, if you catch yourself calling DOM functions in a loop (or in a function that gets called in a loop, like the grid_canvas example here), it should be done in memory and then manipulate the DOM outside of the loop.

MasterScrat 16y ago
Do you know if there's a way to do something similar when displaying images? for a game I need to display a tiled background, and at this time I do it by looping on the x and y axis. That's slow. Of course I then translate the resulting canvas instead of redrawing everything when I want to scroll but there's still a lot of invalidations involved.
- bgrins 16y ago
  For a tiled repeating background, I would recommend looking into createPattern function https://developer.mozilla.org/en/Canvas_tutorial/Applying_styles_and_colors#Patterns https://developer.mozilla.org/en/Canvas_tutorial/Applying_st.... You can use code like this: context.fillStyle = context.createPattern(img, 'repeat'); context.fillRect(0, 0, 100, 100); Where 'img' is an Image object you loaded from an src, or even a canvas object that you may have used to build a composite background. If this doesn't work in your situation, I would at least build this image once in a canvas in memory (using document.createElement), and reference it in the 'drawImage' function instead of building it from scratch each time. Though it sounds like you might already be doing this. Do you have a link to your game?