I am developping a Phonegap application using nice UI tools, like ReactJS, with requestAnimationFrame and things like that.
I am trying to have rendering performances of 60fps.
According to this article:
http://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
To have 60 fps, the browser has to be able to do, under 16ms, the following:
JavaScript
Style calculations
Layout
Paint Setup & Paint
Composite
I can see the performance of each in Chrome DevTools by looking at the frames. My Js code is pretty fast thanks to how React optimises the dom manipulations, and the whole fit under 16ms most of the time.
However, these informations are for my computer, my CPU and GPU...
I'm interested to have these informations for different mobile devices, to see how they will behave and to know what is the minimum device level to have 60 fps.
Are there any tools to inspect browser rendering frames for most popular mobile devices?
Is there an easy way to slow down my computer so that it behaves like a mobile phone in term of performances?
What about the impact of other apps running on the phone that could use some of the phone's resources?
You could hook up a remote web inspector with the phone an profile the rendering performance like you would on your computer. This is supported on on iOS 6+ and on Android 4.4, assuming the app is in debug mode. However, hooking up the remote web inspector distorts the results as it imposes a serious performance bump itself.
If you're just interested in measuring raw fps my suggestion is to inject stats.js, a little widget that displays a fps graph:
https://github.com/mrdoob/stats.js/
I used this to benchmark different game engines and got decent results.
Related
I simulate a high FPS camera and was requested for a desktop app that supports screen drawing in 100 Hertz.
Now it's implemented in .Net (winforms) and I want to learn a new technology. Therefore, I need to show that there aren't performance issues using Electron framework with JS UI.
I searched quite a bit and the max FPS where 60.
Is it possible?
Since Electron is using Chromium for rendering, it should be possible.
You could check this by setting the show FPS flag and running a short test:
Show FPS meter Chrome 33
We work on a web application (HTML5 / JS) where performance is critical (physics simulation).
There are a few great options to trace performance on desktops: Chrome Dev Tools timelines, chrome://tracing or the promising Web Tracing Framework. The last option seems like the most powerful one. It also supports remote control of Chrome for Android, but unfortunately Mobile Safari is unsupported.
Do you know any other tool that can be used to precisely measure performance on Mobile Safari?
I know I can debug pages on Mobile Safari with Mac Safari and perhaps access timeline and/or profile tools too. Is this the only option? Do you know other interesting ways of performance tracing a webapp on Mobile Safari?
Have a look into Weinre a fantastic remote debugging tool based on webkit's developer tools:
http://people.apache.org/~pmuellr/weinre/docs/latest/
The timeline tool is still in the early stages but you can create your own timeline events.
For webapp's performance,with enough experience you can tell from the page's debug borders(Compositing Render Layers) and repaint counters,they are not powerful like Web Tracing Framework does,but in many case they help a lot.Web Tracing Framework already works on android chrome,for mobile safari,mac safari's develop tool also can enable to inspect mobile safari's debug borders and repaint counters,also if you dont got a mac,you can just try MIHTool which you can enable debug borders and repaint counters in the app on you iOS device.
Check out Mobile Web Thursday: Dev Tools to learn more about it.
I would like to use interactive 3D models in a web page. The required functionality is:
Import dxf file which defines & displays a room.
Add/move prebuilt objects from javascript
Add/move lamp which cast shadows from javascript
Return room dimensions to javascript
Return object positions to javascript
Can I import dxf files into any WebGL engine?
I have a small repeat user base so a browser installation is no problem at all. Is there any plugin technology I could use? Java applets? Unity? Can I use an OpenGL engine as a plugin? How about a java3d applet?
I will start with desktop but would need to be targeting tablets soon and mobiles in two years or so.
I am becoming convinced I will need to hire an expert to write this but I want to understand the options. Can you recommend a suitable technology?
I think WebGL is an excellent choice for this application; the graphics functions you describe are well within its capabilities. I can't comment on model loading, though, as I'm not familiar with WebGL engines.
However, mobile is a big wrinkle. Regarding the techniques you mention:
WebGL is supported in Chrome and Firefox for Android. On iOS, Mobile Safari does not enable WebGL, but an implementation exists (used strictly for in-app ads), so it is likely that there may be broader WebGL support in the future (possibly requiring a custom web view wrapper to enable it).
Java applets are not supported by any browser on either Android or iOS.
Unity is a viable choice; the Unity Web Player browser plugin allows embedding Unity content in a web page. However, there is no such plugin for mobile-OS devices; Unity content may be compiled into a application for iOS or Android but it cannot be viewed within a web page.
News as of August 2014: Unity has announced that the upcoming Unity 5 will include publishing to JavaScript + WebGL (no plugin required). Assuming this works as promised, you can use Unity if your target platform has a browser with WebGL support.
So, if you absolutely need cross-platform 3D including iOS right now, Unity is where it's at, but WebGL is a good choice for desktop and Android now and likely to improve on mobile in the future, and is the only way to embed 3D in a web page, not an app across desktop and Android.
WebGL is not the only way to embed 3D in a web page - see phoria.js:
http://www.kevs3d.co.uk/dev/phoria/
https://github.com/kevinroast/phoria.js
Also three.js has a canvas rendering for without web-gl.
Phoria.js and others like it will work on iPhone/iPad and Android phones that don't support web-gl. Of course, the performance is MUCH lower but if you don't have complex models and want it to work everywhere...
i am building a new web site using asp.net mvc3 web application ,, and i found some free HTML5 templates in the web which i can add to my _layout view in my mvc3 web application. i read that HTML5 is able to automatically adapt to the screen size of any devices .
So does this mean that incase i use HTML5 inside my layout view , then my web site can be accessed using different mobile devices and the layout of my web site will automatically adapt to the screen size of the mobile devices?
BR
Not so simple. You need to contend with
Big variety of mobile devices. Some support HTML5, some partially support it and some don't support it at all.
Even if a mobile device does support HTML5, a mobile screen is a lot smaller than a desktop so it may not be able to rearrange the view properly.
How a user interacts with a mobile web app is quite different to a desktop web app, so even if it did rearrange the view properly the user experience could be crap.
A mobile user may be connecting over a low bandwidth connection. What size are your web pages, and are they suitable for distribution over 2g, 2.5g or 3g ?
Well, no, not always. HTML 5 is a very broad term and there are many devices. There is no real guarantee that something you write in any version of HTML 5 will show up as you want it in every browser except via testing it and experience from testing.
That said, I think you are referring to CSS media queries, which are not really related to ASP.NET MVC 3 or HTML 5. From the caniuse site here, you can get an idea of which browsers support media queries.
If you use CSS 3 media queries properly, and the browsers which you are targeting support the feature, then the answer to your question will be yes.
Nothing works automatically but I'd give it a guarded "maybe". The MVC3 sites I've developed work well on iPhone, iPad, Android and Windows Phone. For example link
Still needs to be valid HTML5, so I'd suggest using a validator though.
Screen size adaptation isn't a particular feature of HTML5 per se, it's a feature of a competent fluid design with HTML and CSS.
They should work out of the box on mobile devices (in the original iPhone demo, Steve Jobs showed how the iPhone did a good job of rendering existing websites), but there won’t be any automatic adaptation to screen size beyond what HTML already provides.
As far as HTML goes, <meta name="viewport"> can go a long way towards helping your site’s layout on Mobile WebKit-based devices (which is all iPhones, and I believe all Android devices). See e.g.
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html.
I'm looking to target a website specifically for an iPad but we don't have any Macs in house for testing. What's the most accurate way to test the site on a PC? I image I could use the Safari browser and shrink the window down to approximate the iPad screen size but I wonder if there's a better method out there.
If you target a website specifically for a particular device, buy that particular device. This doesn't only apply to iPad.
Two caveats I noticed a lot of websites have for a touch-oriented device like an iPad, iPhone:
The mouse-hover event isn't generated. So, the HTML/CSS/Javascript menu structure which works without clicking on a WebKit browser (like Safari) on a mouse-oriented device might stop working completely.
The scrolling event (coming from a flick of a finger) is not passed to elements inside a page; instead it just scrolls the entire page. A subelement shown with a scroll bar on a non-touch-oriented device might be shown without the scroll bar at all. So, sometimes you lose the ability to scroll inside a subelement.
There might be other caveats. It's really difficult to imagine all the way a device might behave differently from a mouse-oriented device; so, buy an iPad.
By the way, it's of no use to buy a Mac in this situation: Safari on a Mac still behaves (as far as the mouse/touch events are concerned) rather differently from Safari on an iPad/iPhone. An iPad can be paired with a Windows PC.
See this Apple document for a few advices for preparing a web page for the iPad.
I'd just use Safari, as the mobile version uses the same rendering engine (though possibly modified to fit the iPads resources).
It should display the same, if not close.
You can try to use online imitation services.
For example http://app.crossbrowsertesting.com/, or https://saucelabs.com/. They provide lots of imitations environments, for different devices and OS. You can test the site, that is already in the web, or your local files.
I myself am working currently with app.crossbrowsertesting.com for the first time. It really shows the problem, that the client encountered on his iPad. Also have good notices about these services from experienced developer, a friend of mine.