11

I'd like to be able to find out about a browser's hardware resources from a web page, or at least a rough estimation.

Even when you detect the presence of modern technology (such as csstransforms3d, csstransitions, requestAnimationFrame) in a browser via a tool like Modernizr, you cannot be sure whether to activate some performance-consuming option (such as fancy 3D animation) or to avoid it.

I'm asking because I have (a lot of) experience with situations where the browser is modern (latest Chrome or Firefox supporting all cool technologies) but OS's CPU, GPU, and available memory are just catastrophic (32bit Windows XP with integrated GPU) and thus a decision based purely on detected browser caps is no good.

halfer
  • 19,824
  • 17
  • 99
  • 186
Miloš Đakonović
  • 3,751
  • 5
  • 35
  • 55
  • 7
    You are delving into areas not exposed for obvious security reasons. Might consider giving user option to use whatever fallback you have in mind if you think page will use a lot of resources – charlietfl Aug 02 '15 at 19:37
  • It might be possible to run some benchmarking tests to get a rough idea of the browsers rendering capabilities. This is different from getting actual system capabilities, but would probably give closer results to what you want. I believe some browser games do something like this, but the possibility of bad test results is probably a bit high as the OS and/or browser could also be doing something else when you run the test. – Alexander O'Mara Aug 02 '15 at 19:52
  • I wonder if you could share the specific issues you found with older systems and transitions/animations/rAF. Theoretically browsers should reduce the frame rate of animation when the system cannot keep up. I'd expect the non-CSS content (e.g. the complexity of DOM, the JS code, the image's size) to have larger effect on constrained systems. – Nickolay Aug 08 '15 at 17:50
  • @Nickolay If you find it usable, I could drop you an URL of first example that comes to my mind. It's not even 3d animation - it's scale down transformation involving simultaneous opacity change, done with proven library (velocityJS). Works nice on, lets call it average and good computers but completely fails to animate (just lag and change from start to end values when fired) on XP, 512-1GB, 32bit with integrated GPU **even with latest Chrome & FF** and some mobile phones... – Miloš Đakonović Aug 09 '15 at 08:09
  • Failure to animate is expected. Would the lags decrease noticeably if you just removed the animation? That's what I'm interested in. If we know the specific constructs that don't degrade gracefully on slower systems, perhaps someone can come up with a solution specific to that construct. – Nickolay Aug 09 '15 at 11:36

2 Answers2

3

While Nickolay gave a very good and extensive explanation, I'd like to suggest one very simple, but possibly effective solution - you could try measuring how long it took for the page to load and decide whether to go with the resource-hungry features or not (Gmail does something similar - if the loading goes on for too long, a suggestion to switch to the "basic HTML" version will show up).

The idea is that, for slow computers, loading any page, regardless of content, should be, on average, much slower than on modern computers. Getting the amount of time it took to load your page should be simple, but there are a couple of things to note:

  • You need to experiment a bit to determine where to put the "too slow" threshold.
  • You need to keep in mind that slow connections can cause the page to load slower, but this will probably make a difference in a very small number of cases (using DOM ready instead of the load event can also help here).
  • In addition, the first time a user loads your site will probably be much slower, due to caching. One simple solution for this is to keep your result in a cookie or local storage and only take loading time into account when the user visits for the first time.
  • Don't forget to always, no matter what detection mechanism you used and how accurate it is, allow the user to choose between the regular, resource-hungry and the faster, "uglier" version - some people prefer better looking effects even if it means the website will be slower, while other value speed and snappiness more.
Community
  • 1
  • 1
fstanis
  • 5,234
  • 1
  • 23
  • 42
1

In general, the available (to web pages) information about the user's system is very limited.

I remember a discussion of adding one such API to the web platform (navigator.hardwareConcurrency - the number of available cores), where the opponents of the feature explained the reasons against it, in particular:

  • The number of cores available to your app depends on other workload, not just on the available hardware. It's not constant, and the user might not be willing to let your app use all (or whatever fixed portion you choose) of the available hardware resources;
  • Helps "fingerprinting" the client.
  • Too oriented on the specifics of today. The web is designed to work on many devices, some of which do not even exist today.

These arguments work as well for other APIs for querying the specific hardware resources. What specifically would you like to check to see if the user's system can afford running a "fancy 3D animation"?

As a user I'd rather you didn't use additional resources (such as fancy 3D animation) if it's not necessary for the core function of your site/app. It's sad really that I have to buy a new laptop every few years just to be able to continue with my current workflow without running very slowly due to lack of HW resources.

That said, here's what you can do:

  • Provide a fallback link for the users who are having trouble with the "full" version of the site.
    • If this is important enough to you, you could first run short benchmarks to check the performance and fall back to the less resource-hungry version of the site if you suspect that a system is short on resources.
  • You could target the specific high-end platforms by checking the OS, screen size, etc.
  • WebGL provides some information about the renderer via webgl.getParameter(). See this page for example: http://analyticalgraphicsinc.github.io/webglreport/
Nickolay
  • 31,095
  • 13
  • 107
  • 185