I have a page containing multiple Highcharts graph. For instance: http://baptiste-wicht.com/perfs/index.html
I think that the loading time is a bit slow (I'm on Firefox). The page blocks and then everything display at once, it is not really practical.
I have a div for each graph and each graph is loaded with jquery $ function (once the page is ready).
Is there a way to make the different code blocks run in parallel or simply improve highcharts loading time ?
Even if the page still take long to finish rendering, it would be great if the rendering were done smoothly.
Thanks
Related
I'm making a webcomic reader that loads 5 to 10 images whenever the user navigates to an episode. Each image is 2 to 3 megabytes. The project is in angular.
The problem is that each episode takes a while to load because all the images of an episode are loading at the same time. You can't even begin reading the episode until the entire episode is done loading.
I tried using the (load) function to stop an image from loading until the previous image is done loading. That way, the user can begin reading the episode while the rest of the episode loads. And while this did load the first image much quicker, it took an eternity to load the entire episode. My guess is because javascript can load a certain number of images at the same time through separate channels, and bottlenecking it to one image at a time takes much longer.
So is there an ideal number of images that javascript can load at the same time without sacrificing speed? Or do I just have a flawed understanding of the system.
One of the rule I know from optimizing frontend app is the less the better.
You see, the page with text only will load faster than with full of images, and page with 1 image loads faster than page with 10 images.
Assuming we have a reliable connection, good backend. Let's focus on what we can do on frontend.
So first thing first: we want users to see the first image immediately, so we load it immediately, similar to what you did, it's just that we don't touch other images, we only explicitly load the first image. For others, we lazy load them (more on that on point 2)
What I wanted to add more is there're also other resources such as JS/CSS/Fonts... We want our images to load first, so we need to hint to browsers that this is a high priority resource. You can find more about this by searching for "preload" keyword
Next, while users scroll down the page as they're reading/viewing the first image/episode, we will start loading the rest, one by one.
This is what called "lay-loading", with this keyword you can find pretty much any kind of examples. You can take advantages of modern browsers's lazy attribute, or use IntersectionObserver to have more control over when to load
Small note: This is more of a performance question than any framework. So you could find some books about performance, they provide the background such as what is blocking and non-blocking resources, what is TTFB, LCP.
Angular recently updated with NgOptimizedImage, it looks promising, we don't have to do those manual works anymore (at least for the images)
I am using bokeh as a Server Application. When I make a selection in a plot I do some actions in python and I update some sources (CDS). This changes are reflected in the plot. Is there a way to check when the glyphs are completely rendered (after the update)? I want to call a JavaScript function when all is completely loaded? With that function I want to call other python method to update the CDS again.
If I do not wait for this profiles to be rendered probably the application breaks, and that´s what I want to avoid. Actually I did some tests in the past and I had to create a huge CDS instead of several smaller CDS to make it work properly.
My Use Case. Why do I want to make this?
I have many tabs in my layout, they can be 10 for example. And each tab has some plots (3-6 plots). If I update the entire ColumnDataSource at the same time, it will take a while. Then I want to make it more fluent, so I would like to update only the data of the current visible tab, it will render faster and the user would receive an immediate response. I can disable the rest of the tabs temporarily to prevent malfunctions. At this moment I would need to call the JS or python method in order to update the content of the rest of the tabs.
Here a drawing of what I want to achieve in order to speed up the process:
About the data
Basically I have two DataFrames, one to build the cloud of points (around 5000 row and 130 columns) and I extract from the selected points another DataFrame to know which lines I should draw (360 columns and 5 to 15 rows), making some filters and selections. The algorythm I have used is in the answer of a question I have written time ago. With this amount of data the algorythm takes 6 or 7 seconds to finish.
Any other idea of how to improve the performance or how to split or the computing?
To improve the rendering speed you could try the webgl JavaScript API. This Bokeh documentation page Speeding up with WebGL explains how to do it. webgl supports circles, lines and most of the markers. Application:
p = Plot(output_backend="webgl") # for the glyph API
p = figure(output_backend="webgl") # for the plotting API
Please be aware that users report issues with webgl like plot stuttering, etc... but it may work in your case depend on which type of glyphs your plot contains.
Also make sure your data passed to the plot doesn't include NaN's as it is known to slow down Bokeh performance.
To my knowledge there is no attribute that indicates that rendering is completed or is still ongoing but you may think about some other alternatives to speed things up like combination of Bokeh with Datashader (pre-rendering large datasets into a fixed-size raster image) or Dask (speed up data reading from multiple sources like multiple csv files)
For example you could have one standard Bokeh plot where you make a
selection and let the other plots being generated as Datashader images
and embed them in Bokeh plots.
This example shows how to combine Bokeh + Datashader which significantly improves performance especially when over-plotting takes place. Please note that each time a single point is added to the plot entire canvas area will be re-drawn in the browser. This is how browsers work. Datashader can provide a single image so updating the plot is much quicker while you can still use Toolbar tools like zoom, pan etc....
Also the Python code implementation details counts. Using e.g. gridplot to link many plots can slow down performance so it is better to add them one by one to the document root, etc...
Time ago I made a trick to check if my design would work if I could trigger some function if the plots were rendered:
First I updated the current tab. This worked very well and fast.
Then I set a timeout to update the data of the rest of the tabs. But, in the meantime this second algorythm was being executed I could not work with the plots of the current tab because they were frozen.
So, the approach of triggering a function when everything is rendered is not a good idea, because even with such a callback the app would not work as I was expecting.
There exist a number of CSS and JavaScript packages, such as turn.js, for creating beautiful page flip effects which make it look as if one were leafing through an actual physical book. However, as far as I can see, all of these seem to require that the contents of the complete set of "book pages" be put into a single HTML file.
That way of going about things is, of course, no big deal for small booklets, but for lengthy books with lots of content, it becomes utterly impractical. For one thing, the loading time would simply be too long.
So, my question is: is it possible to engineer a book page flip effect where the flip occurs upon loading a different page than the one presently being shown? I would prefer every new page spread (i.e., every verso-recto pair) to have its own webpage. Also, the flip should, of course, be delayed until the new page has finished loading.
Many thanks for reading and for any suggestions!
I am using pagePiling.js, and have added a couple of extra sections. These are using iFrames to load Highcharts graphs, as can be seen here. However, at the moment, all 12 iFrames respectively the graphs are being loaded, which makes the user wait a few seconds unnecessarily on the first page (and consumes bandwidth).
Is there any way to load the iFrames only the moment they are getting the focus? Or perhaps, a bit smoother, to load the next-upcoming graph while the current graph is being focussed on? I haven't really found something like this.
Thanks for any hints.
After staring at my screen for several days in a row trying to find a solution to this, I couldn't find one. Everything I've seen shows graphs being reloaded with new data, not the same data. If I want to keep the same data and same everything but still reload the graph, how would I do so. This plunker should give an idea of where I want it implemented. I have almost everything done, I just need to know a way to straight up reload only the graphs. Thanks.
The reload would go in here (yes, I do have another piece of JavaScript that allows onresize of divs).
function finalResize(){
}
addResizeListener(frontElement, finalResize);