I am working on a straightforward web app, purely Javascript.
One of the core functionalities is loading and viewing images.
When a lot of big images are loaded, the script execution often slows down or even halts until some of them are done loading, this is especially noticeable with large .gifs (HTML5 video is not as bad for some reason).
The images are loaded by setting the background-image css attribute of divs with jQuerys .css(), there are no sort of blocking events or sleep / wait time until images are loaded.
Weirdly, on OSX, scrolling (with the Macbook trackpad) temporarily relieves the halt / slowdown, even while in fullscreen (OSX browsers leave wiggle room for the trackpad), which makes me think that it's a problem of rendering or resource allocation of some sort. It feels like the browser does not have the need to redraw, and is only forced to do so because of the scrolling.
I'd like to force it to redraw constantly, 60 FPS.
The issue is with the loading of lot of big images and showing them in the application.
You can try for Image lazy loading concept where images are loaded/fetched as soon as you scroll the window.
May be this link would be helpful. This plugin will take care of loading images when user scrolls and its very easy to use.
Someone can try the concept of WebWorker. Its multithreading in javascript.
I would like to add, to not forget image optimization.
Related
I am building a website for me and I care about performance, speed, user experience and a lot more. When I started I didn't know much and I made an initial design using adobe xd. Then using webexport plugin I got a html file that has 2k+ lines of codes for scale to fit any screen and proportional resize of everything. I think I made a 1080p standard artboard but somehow it was way too big like 3554px by 2216px. So the webpage is now that big and scaling is running on it. I don't think it's too big for a browser to handle. Things were good before chrome 97 or 96 update. After that chrome and any browser running on chromium just can't scale my webpage fast enough to fit the screen. I see big divs getting smaller and it takes kinda like 500 ms to settle with decent setup. A lot of variables can affect the performance like if the machine(pc) and network is slow the scaling takes couple of seconds which is too much.
Is there any way to hint the browser to do the scaling first then make the page visible? The older version of chrome was doing it right. I can make the page visible after 600 ms using setTimeout function but doesn't seem what I want.
CSS
will-change: transform;
Tried this but it has bad effect like blurry text on my content. I don't know why it's pushing the browser to it's limit sometimes, maybe I can better optimize my page but these browsers should be more powerful (safari is the worst - can even render the webpage)
This is the home page
https://elomymelo.com/
You should see big page fitting inside the screen and it'll probable take 200 ms pretty fast
proportional resize on window also works
This is a heavy article page
https://elomymelo.com/oneplus%20nord%20review.html
I tried to hide the scaling effect in this page but not satisfied because browsers mess up sometimes. I need the javascript scaling done much faster like visitors will not see that weird transition.
I'm working on a webapp that populates a page with a large number of images.
It is similar in layout to an image search, in that the user chooses some settings at the top of the page and the page is instantly filled with images that correspond to her choice.
Sometimes up to 600+ images are generated in one callback. They are img elements with data uris that contain embedded svg.
My question is about performance. The Javascript itself completes very quickly, but once the 600 or so images have been added to the DOM, the browser can take up to FIFTEEN SECONDS to complete all the reflows. The browser freezes for this time, menus become unresponsive, and no change is shown until the reflows are complete. (Chromium version 66)
Is there a way for me to remove this bottleneck and make all the images reflow quicker? e.g a CSS approach that makes the layout trivial? If I made all the images the same size would that help?
If it can't be sped up, is there a way to make reflows happen without blocking user interaction with the page?
Thanks for your help!
SOLUTION: The reason the browser was freezing during all the reflows was because my code was executing synchronously, and therefore tying up the browser.
Making the code asychronous by doing a setTimeout(function, 0) for each image, where function adds the image to the DOM, solved the problem.
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'm trying to build a homepage that has a lot of moving elements. I've checked other websites that have the same moving animations do the same technique e.g. move stuff on setInterval(). But I don't know if it would be ok, on my computer its running smoothly. But I don't know if it would cause any damage to other users specifically slow computers. I say this because when I opened the site on my phone it got hot real fast.
I made a fiddle where you can see what kind of simple movements are happening but how fast the functions are executing. The fiddle only shows 4 elements but the homepage has about 10 more elements moving.
So what would be good practices to follow when implementing these kinds of website animations?
setInterval would be fine if you target old browsers, but it's not meant for animation. Some browsers cap it to 4ms. Some won't slow down when the window is not focused, so it will eat up CPU cycles, and therefore power - not good when you're on a mobile device.
There's requestAnimationFrame, a timer that's optimized for animation. Animation slows down or halts when the window is not in focus, and it aims to draw at 60fps.
For minor, non-behavioral animation (style, rather than behavior), you can do CSS animations instead. One nice thing about CSS animations is that some of them, especially the ones that deal with 3D, are GPU accelerated, making them faster and smoother than your make-shift JS animations.
I have a lot of images incorporated on one of my pages, Pinterest would be the best thing to compare it to, and I noticed that scrolling especially in Chrome is really jerky and not smooth. Is there a way to achieve smoother scrolling? Would I do this through JavaScript or is it a CSS property?
The reason scrolling on Pinterest is smooth is because of a few things:
Images are lazily loaded. They are also probably cached on the server side for faster serving.
Images are cleared if they are sufficiently far from the viewport (the images at y=0 should be cleared if you're THRESHOLD pixels down). This clears up memory and provides a smoother experience (this is similar to how a UITableViewController works in iOS).
My suggestion?
Cache images on your server.
Clear the images that are THRESHOLD pixels away from the viewing port.
Lazy load images.
Use a good infinite scroll plugin.
P.S. - If you are serving really large files (by size), you're going to get a slow experience (depending on how fast your internet connection is).
id' suggest to use js to load all pictures in the visible area of your browser and a bit further and if the user scrolls down then you load some more pictures. scrolling gets really bad when there are to many pictures from the beginning.