Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Memory intensive due to no delay when waiting for element #47

Open
meventi-stephan opened this issue Apr 18, 2014 · 4 comments
Open

Memory intensive due to no delay when waiting for element #47

meventi-stephan opened this issue Apr 18, 2014 · 4 comments
Labels
needinfo

Comments

@meventi-stephan
Copy link

background-size-polyfill is waiting in a loop, until it finds the element. Perhaps it would be better to have a general delay from 10ms or 100ms for the next try, because if you are using background-size-polyfill several times in one page it is very memory intensive.
@jefferyto
Copy link
Collaborator

Sorry, but which loop are you referring to? init() is called by the browser when the element is ready (oncontentready) or if the document is ready (ondocumentready), or if the element is already ready when the polyfill code is executed (element.readyState === "complete").

@meventi-stephan
Copy link
Author

For example here (file: backgroundsize.htc):

function loop() {
  processSnapshotId = window.setTimeout( function() {
    expando.processing = false;
    processSnapshot( element, expando );
  }, 0 );
}

@jefferyto
Copy link
Collaborator

loop() is called after processSnapshot() is finished, in case takeSnapshot() was called (triggered by a property change on the target element) while processSnapshot() was running. (A "snapshot" is a record of all the relevant properties of the target element, takeSnapshot() makes this record, processSnapshot() adjusts the background div in response to the record.) At this point, the target element has been found.

Though, if the target element is modified rapidly, then processSnapshot() may be called continuously; adding a delay in the process may be beneficial (at the expense of fast updates for animation).

Can you post a test case? It would help to confirm the issue.

@meventi-stephan
Copy link
Author

Hmm ... this must be the hardest test case. I tried this ... but if i execute this code, Internet Explorer hang up due to memory problem.

<!DOCTYPE html>
<html>
  <head>
   <style type="text/css">
      *  {
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
        -ms-behavior: url(backgroundsize.min.htc);
        behavior: url(backgroundsize.min.htc);
      }
      .divClassWithImage {
        background-image: url(test.jpg);
     }
      .divClassWithoutImage {
        background-image: none;
     }
    </style>
  </head>
  <body>
    <div class="divClassWithoutImage"></div>
    <div class="divClassWithImage"></div>
    ...
    <div class="divClassWithoutImage"></div>
  </body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needinfo
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jefferyto @meventi-stephan