This question is answered.


Permlink Replies: 32 - Pages: 3 [ Previous | 1 2 3 | Next ] - Last Post: 29-Aug-2017 23:10 Last Post By: andomare
Laza

Posts: 9,472
Registered: 6-Sep-2005
Re: Tiger: very slow scrolling with many images
Posted: 28-Aug-2017 15:53   in response to: andomare in response to: andomare
 
  Click to reply to this thread Reply
Check out now the improved gallery:
(link later...) :)

There were tons of unnecessary "match row height" calls, which overloaded the CPU. Now I rewrote the whole matchHeight library, to watch only for the visible thumbnails and removed all the unnecessary refresh calls. I have also removed the matching on fixed height thumbnails with "tootltip" type captions.

Edited by: Laza on 28-Aug-2017 16:06
jGromit

Posts: 33,206
Registered: 31-Jan-2006
Re: Tiger: very slow scrolling with many images
Posted: 28-Aug-2017 15:57   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
I think we're going to need a better URL.

BTW, I own the localhost domain. Not many people know that. ;)
Laza

Posts: 9,472
Registered: 6-Sep-2005
Re: Tiger: very slow scrolling with many images
Posted: 28-Aug-2017 16:06   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
jGromit

Posts: 33,206
Registered: 31-Jan-2006
Re: Tiger: very slow scrolling with many images
Posted: 28-Aug-2017 16:12   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
Still not what I would call "snappy," I'm afraid. This little video starts with a CTRL-F5 page refresh, followed by some scrolling down.
jGromit

Posts: 33,206
Registered: 31-Jan-2006
Re: Tiger: very slow scrolling with many images
Posted: 28-Aug-2017 16:24   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
Even on a somewhat simpler page, things are a little pokey.
Laza

Posts: 9,472
Registered: 6-Sep-2005
Re: Tiger: very slow scrolling with many images
Posted: 28-Aug-2017 17:22   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
This slowness is not about CPU overload like it was before. This is because of too many thumbnail loads started in short time. Now I made the code skip thumbnails that are shortly appear during the scrolling, and load only those that visible when you stop scrolling. Check out the video taken after a control-refresh.
Laza

Posts: 9,472
Registered: 6-Sep-2005
Re: Tiger: very slow scrolling with many images
Posted: 28-Aug-2017 17:31   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
Check again with Ctrl-refresh! I see sometimes the old JS is cached.
jGromit

Posts: 33,206
Registered: 31-Jan-2006
Re: Tiger: very slow scrolling with many images
Posted: 28-Aug-2017 18:53   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
Sorry, Laza, but it's not really better. I checked in a couple of different browsers, just to make sure I wasn't seeing some sort of caching.

I think the whole underlying concept of "lazy loading" is faulty. It appears that while you're sitting and staring at part of the page, the rest of the page isn't loading in the background, which is what a regular page of thumbnails would be doing. If it were, then by the time you started scrolling down, the rest of the images would already be there, and the response would be immediate.

If this is being done to save bandwidth, I say the hell with it. A page of thumbnails isn't using all that much bandwidth, anyway - it's no more than a few slide images would use. If you don't expect users to scroll down to the rest of the thumbnails, then why have them at all? Why not just show the user no more than 12 thumbnails, and not show him the other images until he's into the slideshow?
Laza

Posts: 9,472
Registered: 6-Sep-2005
Re: Tiger: very slow scrolling with many images
Posted: 28-Aug-2017 23:48   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
I partly agree, but the real CPU-hog this time was the poorly written height-matching routine. Regarding the CPU use it went down to some 1-2% of the previous version.

The lazyload routine is now fine-tuned a bit more, and loads 2 additional screens ahead. So during normal use you won't notice any hiccup. Loading everything upfront can be good if you have less than 50-100 photos. If you have more, this might delay the execution of the javascript, which leads to a broken album. Instead of the lightbox, you would end up in the slide image alone.

Also, when you want to go to the last picture and start the album there, the worst thing you can do is loading the thumbs in a progressive manner.

My routine follows the visitor, and loads only the visible screen with thumbs. The delay - you perceive as slowness - is necessary because if you don't wait a bit before loading the thumbs, just load everything that comes to the screen even for 1ms, the browser would load hundreds of pictures in a short time, which would temporarily overload the CPU, and would render the page unusable for seconds.
jGromit

Posts: 33,206
Registered: 31-Jan-2006
Re: Tiger: very slow scrolling with many images
Posted: 29-Aug-2017 00:59   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
I guess I just don't understand any of this "modern" stuff, but this all seems to be topsy-turvy to me. You're delaying loading the thumbnails so that they don't intefere with loading your lightbox Javascript, which I gather is at the end of the body instead of being in the head section. This makes no sense to me at all. I realize that asynchronous is "all the rage," but it seems absurd.

Pick any folder at https://jefftucker.org/. The lightbox script is loaded before anything else happens, so you're never in danger of getting a raw slide image - it just can't happen. The script is less than 100KB, so the visitor isn't sitting there forever, waiting for it. Well over 100 thumbnails then load from the top of the page to the bottom. You'd be hard-pressed to scroll fast enough to beat it to the punch.

Lazy loading and asynchronous JS strike me as being a solution in search of a problem.
Laza

Posts: 9,472
Registered: 6-Sep-2005
Re: Tiger: very slow scrolling with many images
Posted: 29-Aug-2017 07:04   in response to: jGromit in response to: jGromit
 
  Click to reply to this thread Reply
I wasn't right about the thumbnails delay loading of the JS. In fact the document.ready event is fired before the browser starts downloading the images, so the skin code starts before that. Naturally, if there are too many thumbnails on the page, the process might slow down the skin initialization, but won't break it.

The asynchronous load of JS files is important they not block each other's execution. You have to make your libraries in a way so they can wait each other. The same applies to the JSON files, which you don't know in advance when they load. So everything in my code is chained: "once available then do this".

If you load everything through the HTML page, it takes much more time to load the page and construct the DOM. If we are talking about 100-200 images the difference is barely noticeable. This skin is based on JSON database however, which already holds all the information, so including the same information through the HTML page would double the traffic. If it wouldn't use JSON, then no "advanced" features would be possible: search, tag cloud, new image search.
karlmistelberger

Posts: 737
Registered: 5-Dec-2013
Re: Tiger: very slow scrolling with many images
Posted: 29-Aug-2017 08:30   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
I checked execution time on my fasted machine (Intel i7 6700K, Samsung SSD 950 Pro NVMe) with a local Apache2.

Apache2 starts up in 0.065 seconds, but pressing PageDown on the keyboard takes a second or two on an index page with 318 thumbnails total and 5 columns times 7 rows displayed.

Algorithms of database applications traditionally are poor performers and there is plenty of room for impovement. Unfortunately I am not aware of an example for JavaScript, but the following gives some hint what can be achieved with real world applications: How to Speed up a Python Program 114,000 times

P.S. When trying do reduce size of data1.json I unchecked Lightbox > Image date. But I can see them:

cameraModel":"DMC-TZ71","focalLength35mm":"172mm","resolution":"2560 x 1920","cameraMake":"Panasonic","isoEquivalent":400,"flash":"Flash did not fire, auto","focalLength":"31mm"

Edited by: karlmistelberger on 29-Aug-2017 08:58
Laza

Posts: 9,472
Registered: 6-Sep-2005
Re: Tiger: very slow scrolling with many images
Posted: 29-Aug-2017 09:07   in response to: karlmistelberger in response to: karlmistelberger
 
  Click to reply to this thread Reply
This metadata is added by jAlbum, not the skin. The skin creates the formatted metadata string, which is usually longer.
karlmistelberger

Posts: 737
Registered: 5-Dec-2013
Re: Tiger: very slow scrolling with many images
Posted: 29-Aug-2017 09:22   in response to: Laza in response to: Laza
 
  Click to reply to this thread Reply
Laza wrote:
This metadata is added by jAlbum, not the skin. The skin creates the formatted metadata string, which is usually longer.

Size of data1.json is now 132 K down from 442K which might help speed of processing. Want to check your modifications locally. Any download available?
Laza

Posts: 9,472
Registered: 6-Sep-2005
Re: Tiger: very slow scrolling with many images
Posted: 29-Aug-2017 09:34   in response to: karlmistelberger in response to: karlmistelberger
 
  Click to reply to this thread Reply
In the travel album (e.g. http://www.lazaworx.com/albums/Travel/2010/Thailand/index.html) if I clear the cache and load the page it takes some 1.6 seconds to be able to use the album the first time. When the main files come from cache (tree.json, common.css, the google font and all.min.js) the page loads almost instantly (690ms) and can scroll down in no time even though the current HTML page and the thumbnails have to be loaded new. In this case the most time is spent on Facebook's sdk.js (104ms) and jalbum's widgets (94ms) - even though no widgets are turned on. With Ctrl-refresh the DOM is ready in 1.6 secs of which common.css is alone 600ms, all.min.js is 580ms, tree.json is 380ms. (Note, this is a large album.)

So, the DOM ready time - when you can scroll down for example - can be reduced by removing Facebook completely, not using Google fonts and opt out of jAlbum widgets. But this is skin is using a large CSS file (partly due to the responsive framework), an icon font and lots of javascript libraries (although the skin selectively packs only the needed ones) - you can't make it as fast as a Minimal skin page.
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums