I am having performance and "jank" issues while scrolling on a Android React Native app. The JS FPS drops from ~60fps down to ~3-10fps while scrolling.
The content being scrolled DOES include images containing transparency and text layered over images. If I remove the images, performance increases significantly.
The above scenario sounds like a perfect case for renderToHardwareTextureAndroid. That said, enabling this property on a View containing the images/text seems to have no effect at all.
How can I confirm this feature is truly turned on and working as expected? Is it possible that something I am doing/not doing is forcing the hardware rendering to not take place?
Related
I am building an application where there would be 3 preview buttons (Desktop, Mobile, Tablet). Users will be able to create their own design (such as card view/accordions) which would inherit bootstrap classes for responsiveness. Once they click on the preview buttons for eg Mobile/Desktop/Tablet, their created components would behave as per the viewport.
The necessary CSS is in place. The scenario can be achieved if we are using an iframe to load the component. When we are using the iframe that time the viewport behaves as a separate element, helping the CSS to render as it's getting the desired width for the breakpoint. But without the iframe it's not able to bring the outer shell, hence the CSS is waiting for the entire browser to resize, and then only it can show the changes.
But I would want to remove the iframe dependency from the project. The project is being built using angular js 11.
For better understanding, it's the same thing that we experience when we do inspect elements and switch on the mobile emulator in chrome.
Any kind of help or another solution way around is highly appreciated.
I am trying to make a website with a minimalist feeling to it, so I put a fullscreen image on the background as background-image of body. I have a transition: background-position 1s set as a CSS rule for body and an easing function, to create a smooth scrolling effect when going to other pages in the same HTML file (I have no actual scrollbar, just navigation elements). The thing I noticed was that once I started scrolling, the memory reserved by the page went from a small 77MB to over 500MB! I tested this in Firefox, but it doesn't seem to happen (either because pages have no separate processes or memory allocation works differently, I imagine). Why does this happen in Google Chrome and not in other browsers? And how can I reduce the enormous amounts of memory reserved by my page?
To give some information on what I am using:
Browser: Google Chrome
RAM: 8GB The page uses javascript with the
following plugins:
jQuery
Bootstrap
Background image dimensions are: 1440 x 540
A few possible causes of the problem:
The image is too big to be rendered with a transition and an easing function.
I should not use background-image for this, but create a new <img/> as a background.
I somehow only checked it with developer tools open in Chrome, increasing the memory allocated.
It's not the image causing the problem, but the web fonts I scroll simultaneously with the background image, also using transition and an easing function.
And I want to add that maybe this is not even a problem after all, it's just that I have never seen a page go over 300MB with memory allocation.
Not sure if this should be posted as a comment instead, however:
Nothing you can do about that. Chrome trades RAM for performance.
For instance each chrome tab runs on its own process for that purpose.
I had cases when a single youtube tab took over 1.5gb memory & virtual memory.
Even a blank tab takes 45mb memory for me.
So there is no issue with your code at all.
I am developing a firefox os app which has a single html page. Different sections of app are created as divisions with 100% width and height with fixed position and with different z-index values(It is created like one division over the other). It is running just fine on browser and of course the firefox os simulator. But in my firefox os device (Spice MIFX1) the app is fine but when we maximize our app after minimizing by pressing the "o" button, may be due to low specification of the device we can see the different divisions getting stacked one over the other which may affect the app perfection and user experience. The app will then run just fine but I don't want the user to see the divisions getting stacked. This problem is not there in the simulator or in the browser may be because it is running faster in my laptop. Is there a way to avoid this weird scene of getting stacked? Maybe something which can hide this stacking process? I think this is happening due to the slow execution of the script which is a part of the Firefox OS (The script to be run when the app window is maximized) because during maximizing I don't have any scripts to be executed in my app. What is the right procedure to avoid this problem due to poor hardware specifications?
Would setting element.style.display = "none"; be useful to set on all "divisions" that weren't currently being shown? That way only the top would be shown? This might leave the screen white as the other divisions are being added then composited. Also, I'm curious if it would be more performant to completely remove unshown divisions from the DOM, and only add the shown division to the DOM, ever. This might not work if you need multiple divisions to be shown at once (but I'm not sure what your UI/UX looks like).
I'm building a CMS based on Zurb Foundation, and one thing I'd really like to do is allow the user to switch between large/medium/small layouts via a button so that they can both preview how the page looks at this size, but also so they can set up columns etc. for different breakpoints.
Media queries are predicated on the window width, and I've been so far able to build something that my users find quite intuitive, and I feel that asking them to resize their browser window to change the mode seems a bit iffy.
An immediate way that I can think of would be to use an iframe for the main edit view, but the problem is that the page interactions I have are quite complex, drag & drop, drag to resize etc. - I have all of these working at present with both mouse and touch, and in order to drag & drop between the parent and an iframe I'd have to rewrite a significant amount of code. So I'd rather avoid this if at all possible.
I'm looking for suggestions/advice on how I could make this work - workarounds and hacks are fine.
This is how it looks at the moment, to give you an idea of the kind of interface I currently have - no live link that I can share atm, sorry:
OK - this is the solution I've come up with so far - the whole page, not just the editor area goes in an iframe.
https://gist.github.com/nrkn/00e1fb7cc4c7b43329a3
https://cdn.rawgit.com/nrkn/00e1fb7cc4c7b43329a3/raw/69a85b12dda7cece2b7ed602503c45d16f898d15/iframe-rawgit.html
I need to display a huge image (at least 2000x2000) on Android with Titanium and let the user scroll around, just like they were using a scroll view on iOS. However, I know Android doesn't support the same kind of scroll view, so I opted to use an ImageView.
I'm unable to display this image properly or at least the way I'd like (without it being blurry when you zoom in) because of memory issues. Has anyone found a way to make large scrollable images work in Titanium on Android without potential memory crashes?
I tried WebView also, but it seemed to resize my image and when you zoomed it was blurry as well. I was hoping Android webview supported SVG, but it looks like they don't on a majority of devices.
This is by far the best answer I've found:
http://www.tenxperts.com/2011/07/13/working-with-large-images-in-android/
I tried it and it works well with Titanium web views.