We implemented graph drawing with html5's element + JavaScript. View it here.
It works in Chrome 12, Firefox 3.6 and 4, and in Opera 11.
The drawing speed is fine in Chrome and Firefox when interacting with the mouse (hover and scroll to zoom) or when switching properties with the graph controls. But in Opera 11.11 it takes ages to redraw. I tried on two different machines, one with Windows and the other with Linux.
Any ideas why this is so? Or how I could find out what the problem is?
Filling each path with context.globalCompositeOperation = "destination-over"; took 35ms for each of the ~200 layers in Opera.
Fortunately there was a way I could use context.globalCompositeOperation = "source-over"; without destroying the visual, making the speed way closer to the one in Firefox and Chrome.
I found out by using the following two lines inspired by the profiler code, James Black posted a link to:
time=new Date().getTime(); //this line before the code block to test
//code block under test
time=new Date().getTime() - time; opera.postError(time +'ms'); //this line after the code block to test
Note that Chrome (Webkit) already has a built in JavaScript profiler, and in Firefox the Firebug Extension also allows easy profiling. But I didn't find anything similar for Opera.
Related
I researched a lot about this problem and I'm going crazy trying to understand why my example is causing a crash on Firefox, and runs VERY SLOWLY con Internet Explorer and mobile devices.
I'm rendering a big (4K) image on a sphere geometry, trying to create a kind of a pano viewer. In the real application, we can go from one place to the next one, clicking on the invisible shapes that are created inside the sphere.
In the real app, we have a big (4K) video rendering so we have some stuff in a certain area that moves in a loop. However, for this demo I commented those lines (addVideoTexture and renderVideo), so I understand this is not the issue here.
Pay attention to our raycaster, I suspect it is causing big performance problems, but I don't know any other way of detecting when our mouse is going over an "action hotspot" (look above) or a "indicator hotspot" (invisible areas that would allow to go to other places when clicking).
raycaster.setFromCamera(mouse, camera);
hits = raycaster.intersectObjects(indicatorHotspotPlane, false);
The problem is that this demo is causing a crash on Firefox, and going very very slow on plenty of devices and Internet Explorer.
Thanks a lot...
Ricardo
Here is an example where you can test it:
https://jsfiddle.net/ggL3uemh/13/
The ThreeJS version is r89
The browsers where it causes problems are Firefox and Internet Explorer, and I see some iOS devices going slow too.
I'm running an animation using Kineticjs using the Animation module. Now I noticed there quite a big performance difference between Chrome and Firefox. Looking at the framerate I found the following results.
Chrome Firefox
avg: 50 50
min: 33 20
max: 56 75
As you can see, the variability of the framerate for FireFox is a lot bigger. The animation in Chrome is smooth (at least smooth enough), but the animation in Firefox is choppy every second or so, this happens when the framerate is very high or low.
Especially the high framerate spikes seem to ruin the appearance of a smooth animation.
Has anybody else experienced this behaviour? And is there a way to smooth the framerate out a bit more in Firefox?
This could be due to browser tab architecture differences, such as the fact that currently Google Chrome uses a separate process for each tab, so slow or bad code in one tab is far less able to affect code in another tab. With Firefox tabs are run in the same process, so slow code on one tab can affect other tabs.
This could also be due to browser performance differences, meaning the implementation of DOM and Javascript APIs that you are using.
is there a way to smooth the framerate out a bit more in Firefox?
You should try to find some causes for the difference in the framerate, process of elimination is probably the best path.
Try using the browsers with only one tab, and go through the list of apis used to see if there are performance differences for those.
I’m having a problem with the use of sprite sheets in mobile browsers (ipad/android), a strange behavior occurs, the stage is multiplied and scaled down multiple times when i click on a sprite animation, everything works fine until the click occurs.
Any hint?
The only browser that it doesn’t occurs is the safari from the ios 6 beta in ipad 2. In the native android browser the error happens but in android chrome everything works fine.
In desktop browsers everything works fine.
UPDATE: the problem is the afterFrame, the error is that the index is not valid. I don't understand... what does the afterFrame? i have 7 frames and it gives error if the after frame is superior to 2...
What version are you using? This sounds like a bug that has been fixed in v4.0.1.
https://github.com/ericdrowell/KineticJS/wiki/Change-Log
I've created a resize handler for a circle shape on a Raphael canvas that used to work fine across browsers, but now fails only on Chrome and produces a strange behavior:
when changing the window's width, at some point the circle gets "squished" and looses its proportions.
you can reproduce it using this demo on jsFiddle, by dragging the resize handle of the Results panel to change its width.
It works fine. Maybe it was a bug in one particular version of chrome. I think you can move past that now.
(Using Chrome 24 on OS X 10.8.2)
The javascript library I have created just translates a single picture and zooms it. Touch events and mouse events are used depending on what device.
I ran this javascript code on Firefox (7.0.1), iPhone 3GS (iOS 5.0) and iPhone 4 (iOS 5.0) all with smooth performance, no problem at all.
Then I ran it on iPad 1 (iOS 5.0) with slow performance though zooming and translating the picture works.
Last test was on iPad 2 (iOS 4.3.3) and here I experienced the same slow performance while zooming as iPad 1 but the translating didnt work at all.
I have no clue what this is about, since iPhone is supposed to be alot weaker than an iPad. I would appreciate any help or comments to get me on the right track.
http://pastebin.com/wZ7e77yq
UPDATE
I just ran it on an iPad 2 (iOS 5.0) and it works flawlessly. I also tried iPhone 3GS (iOS 4.2.1) and it didnt work, same as iOS 4.3.3. This means that my application needs iOS 5.0 to run... is it really true you couldnt translate objects before iOS 5.0?
UPDATE2
I just ran it on three different iPad 1s (iOS 5.0) and it doesnt work very good. What is the big difference in between an iPhone 4 and an iPad 1? Specs are almost identical. Also the translate didnt work because the function event.pageY/X doesnt work prior to iOS 5. This was fixed by using event.touches.pageX/Y instead.
Well I was developing a small game for testing canvas performance without any special game framework so I kept it simple because I was writing it by myself. The program did nothing special, just moving a sprite around the screen with different joystick types, such as keyboard and mouse for desktop click, and touch events for iOS. I discovered the following:
Using taps direct on the canvas results in poor performance compared to touch events.
Touch events worked well with different canvas sizes up to 1024x768.
I didn't try picture zooming, but that should have be fine as well.
event.pageX, event.pageY worked without problems on iPad (iOS5).
I hope that helps.
Seems like perhaps iOS CANVAS support was the issue. iOS5 has full GPU hardware-accelerated CANVAS support, while previous versions supported CANVAS albeit very poorly.
Surprised that it does not work well on iPad 1 even with iOS 5, though. Can you try closing all currently-running apps, close all other browser tabs, and run the test again?