I've got an issue similar to this one:
iPad/iPhone browser crashing when loading images in Javascript
... but I'd like to clarify that my issue is caused by the same memory issue, and if so, what I can do about it.
I understand the proposed workaround of loading "tiny.gif" images for img elements that aren't in view, but the thing is, I'm not using loads of img elements. I'm using four. Three in a sliding div that slides in the next/prev image, and one that displays the current image while the sliding div is doing its sliding thing. It's a little hard to explain the mechanism, but the point is, there's only four image elements and I'm just continually swapping their src.
So what I don't get is.. if there's only four img elements in memory, how am I running up against the memory issue? If slide_one is an image with a src of one.jpg, and I change its src to two.jpg, surely one.jpg is cleaned out of memory, right?
Just a little background: I'm running a HTML page through a UIWebView as an iPad app. The behaviour I'm seeing is that I can load about 25 of these roughly-250kb-per-image JPEGs, and then it stops loading them (the src attribute is updated but the image stays blatantly unchanged). This sounds suspiciously similar to the 6MB limit I've heard mentioned, but I'm not seeing any warning or crash (at least, not in the iPhone Simulator where I'm debugging this).
Any advice gratefully received... :)
FWIW, I solved this by swapping bg image on the containing div rather than using an img element and swapping its src.
So either it's a bug that memory management doesn't allow more than x MB of images loaded, or it's a bug that bg images don't count towards that total.
Ho-hum.
Related
I'm building an app using Vue 2. There's a page that contains a simple image gallery that contains about 20 images and one large page background image.
The background image of the page itself is actually contained in a fixed div element that is position: fixed;, has 100% width and height and uses background-size: cover; to display the image.
All of the ~20 items in the gallery as well are using div elements with background-size: cover; displayed in a 3-column grid and the images are displayed using the dynamically generated background-url CSS property using a Vue computed property. The image paths are never being changed so they aren't being recomputed constantly AFAIK.
The performance of this page in Chrome is abysmal, loading takes forever (those are some high resolution images, though, 4K in width) and once the images are loaded I can somewhat interact with the page but everything is extremely laggy and sometimes the page stops responding completely.
On the other hand, in Firefox and Edge everything is basically buttery smooth, both during the loading of the images and during the scrolling/rendering. The interaction with the app is never blocked.
What I remember trying to fix this is replacing the div elements with regular img tags and loading up images using those. Also, I've tried caching the images, I've tried using static image URLs for testing purposes - the same thing happens every time - other browsers handle it well, Chrome is choking on it.
Here's a screenshot of the performance summary in ~30 seconds, from the moment I click the page URL to the moment that basically everything is loaded and the browser is still struggling to render anything and process any interaction with the page. Obviously the painting phase is an issue here:
Any advice? Thanks!
This question is hard to answer as it is a very specific problem.
You can analyze what is causing this behaviour in chrome by using the developer tools:
Open the developer tools in chrome by pressing "Ctrl+Shift+I".
Go to the tab "Performance".
Hit the record button and do the action which has low performance.
Hit stop and you get a breakdown what happened in the background.
If you don't find the issue with above suggestion, you can post a detailed screenshot of the performance breakdown here, I might be able to help you with it.
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've developed HTML5 game with canvas and DOM elements. And I have problem with flickering DOM elements while playing. The problem occurs in mobile browsers, especially in Chrome.
My apps consists of full screen canvas and DOM elements as GUI (ie. popups). There is many objects rendered on canvas in loop. While playing suddenly DOM elements start flickering (not integrally but regular fragments). DOM elements are positioned absolutely and scaled on window resize by CSS3 (transform:scale).
I cannot publish the code because it's commercial project, but I attach screens below.
http://mywebpage.ovh.org/1.jpg
http://mywebpage.ovh.org/2.jpg
http://mywebpage.ovh.org/3.jpg
Does anyone know the reason and the solution?
Thanks in advance!
I don't think you posted any screenshots, but most likely because it is redrawing it without a buffer. I would take a look at double buffering, I know when I coded flash and java games back in the day buffers really solved a lot of the flickering.
Heres a previous question which may be helpful:
Does HTML5/Canvas Support Double Buffering?
edit: okay I see the screenies now, It's probably not double buffering, but CSS. I would double check your CSS for any thing like background-attachment: fixed or position: fixed, I know that sometimes gives flickering in Chrome.
I am drawing many frames on a canvas using KineticJs library.
I am creating a new javascript Image object with the relevant image source for every frame and setting the new image on the canvas after the image loaded.
I see that it takes about 22ms on chrome and about 600ms on ipad safari ... that's a big difference, has anyone experienced such a behavior and does anyone have any insight on how we can overcome this issue? For example maybe I can force the ipad to use its gpu.
Any response will be highly appreciated.
This page says that iPad cuts off loading images at 6.5mb. I'm not sure if this is still true but I've definitely noticed throttling before 6.5 mb.
Since I'm using a photo scroller, what I've done is load the image names in a hidden html field and then load the next image in a hidden image tag 2.5 seconds before the scroller displays the next image. Of course, you could also load the image names in a JavaScript array. I can provide code snippet if still interested...
Not sure if this exists as I have been googling all around and can't find anything great. Thought I would post this question prior to redesigning the page I am working on.
Is there anyway to fix the transparency problems with .png's in IE6 for both image tags and background images?
Please tell me there is a magical javascript that just does it!!! I am assuming that I will have to apply two different fixes to address img tags and then background images. If this is the case, what have you found is best?
This may fix the problem
Go to
http://www.twinhelix.com/css/iepngfix/
Download the file iepngfix.zip
To download permanently: iepngfix.zip (40kb). Open "iepngfix.html" in a browser; step by step instructions are within.
After downloading in css
img, div { behavior: url(iepngfix.htc)}
Take a look at
jquery.pngFix.js - PNG-Transparency for Windows IE 5.5 & 6 (IE PNG Fix)