Comments (10)
What's the differences you are seeing, and how many workers are you using and what are the specs of the machine you are testing with? My initial tought is that it could be something related to the datatransfer between worker and the main thread, webkit should be faster since it's just passing a reference. But that could be what is wigging out :)
from gif.js.
On Chrome it rendered the gif for 50 secods. On Firefox for 13 secods .. Big difference. On Chrome it starts good and somewhere half the way it slows down. My PC is Dual Core AMD Athlon 4800+.
I am using 2 workers on both browsers.
from gif.js.
Sounds like a code optimizer issue, somewhere along the line chrome gives up and uses "slow" javascript. We would need to find what code it fails to optimize and fix that
from gif.js.
For reference https://github.com/petkaantonov/bluebird/wiki/Optimization-killers
from gif.js.
I'm seeing this as well, I just built master and it's insanely slow on Chrome now. 0.1.6 was not slow though.
from gif.js.
@esprehn master has dithering support which was merged in, unfortunately that patch uses a much slower color lookup alg. That's why I haven't released a new version yet. I was planning on rewriting parts of that code before releasing a new version
from gif.js.
Fwiw, you can work around the slowdown problem by simply respawning the webworker after 10-ish frames (each) in Chrome. That seems to resolve the problem for me anyways.
from gif.js.
I'm seeing this right now in a bad way -- we're talking a fifteen to twenty seconds on Firefox versus several minutes on Chrome.
Any chance it's related to canTransfer
here?
from gif.js.
Hello friends, I spent the weekend digging into the Chrome performance issue so I figured I'd give you all an update. This is a separate issue from the dithering issue.
I discovered the following:
- Firefox and Safari perform as expected
- Not related to canTransfer or postMessage() transfer efficiency
- Chrome web workers will begin to slow down by about 10X after they have "chugged through" enough code or data. In my tests on my Macbook Pro & Chrome 45, a given worker would pass the threshold after rendering about 5 frames if the frame size was >= 720x1200.
- Profiling a Chrome worker showed that NeuQuant.contest was taking the majority of the time during these slow downs.
I tried overly optimizing contest() in a few ways, and also tried porting the entire thing to pure javascript and compiling together with closure ADVANCED OPTIMIZATIONS, but couldn't fix the slow downs.
The hack fix that I was trying to avoid ended up being a simple re-creation of workers after N frames. Here is the code I have in JavaScript. My project is running on the raw javascript so I don't have it in coffee, but someone could easily patch this into gif.worker.coffee lines 103-109 if it's not too much of a hack.
var worker;
console.log("spawning worker " + i);
worker = new Worker(_this.options.workerScript);
worker.framesProcessed = 0;
var onmessage = function(event) {
_this.activeWorkers.splice(_this.activeWorkers.indexOf(worker), 1);
worker.framesProcessed++;
// Re-create worker every 4 frames for big frames in chrome, since each worker starts to go
// incredibly slow after about 5 frames
if (browser.name === 'chrome' && event.data.width * event.data.height > 400 * 400 && worker.framesProcessed >= 4) {
worker.terminate();
worker = new Worker(_this.options.workerScript);
worker.framesProcessed = 0;
worker.onmessage = onmessage;
}
_this.freeWorkers.push(worker);
return _this.frameFinished(event.data);
};
worker.onmessage = onmessage;
return _this.freeWorkers.push(worker);
from gif.js.
Since this seems to depend on the amount of data processed, with larger images resulting in slowdowns earlier in the render process, it sounds like this is an issue with leaking memory within the workers and/or Chrome's garbage collector not kicking in properly.
Others have reported similar issues with Web Workers and Chrome, albeit back in 2014: http://stackoverflow.com/questions/24708649/why-does-web-worker-performance-sharply-decline-after-30-seconds
from gif.js.
Related Issues (20)
- Could you please include a example on how to use it in react ?? HOT 2
- ._. HOT 2
- Undefined variables in gif.js HOT 3
- Rendered GIF has black frames HOT 1
- How do I use this on Nodejs?
- Part of the generated gif has a black background ,please help me how to deal with it?
- Is there a c version? HOT 1
- Is there a way to convert css animation into gif? HOT 3
- TypeError: Super expression must either be null or a function
- 释放内存 Releasing memory HOT 1
- Using window.postmessage causes gifworker to trigger renderFrame indefinitely.
- how can I prevent the script from blocking the page?
- addFrame makes parts of image flash
- How to debug and why gif.js does not work on mobile? HOT 1
- How to reduce GIF size but keep it look good? HOT 2
- U
- Y HOT 1
- How can Watermark GIF with an animated Watermark....
- Delay issue
- GIF.js flashing and has black background
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gif.js.