Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm working on an Ember app and it shows a lot of real time data, it makes the JS thread really busy.
I'd like to add some nice fluid animation with CSS3 but having JS which works under the hood makes the entire app laggy.
Is there a way to give priority to the CSS animations to make them fluid?
After all I don't care if for half second my data is not updated.
I mostly target Chrome and Firefox
You might want to look into webworkers.
If you let all your ajax and dataprocessing be done by the webworker thread, and the displaying only by the DOM thread you can save a lot of overhead/delays caused by computations.
One word of advice. Don't do worker.postMessage(arg,arg) but do worker.postMessage(arg) with a single argument.
The object itself will be posted then instead of it being converted to json and converted back in the other thread. Saves a lot of cpu time.
Keep in mind that the thread that posted the object will have "lost" the object(to prevent concurrency problems)
Also DOM elements cannot be posted to a webworker, so make sure your data is "clean" if you post to the worker.
Maybe trying to get the CSS animations to be rendered by the GPU would be an possibility.
CPU and GPU would run seperate, You should give it a try and see if it gives you an improvement!
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I have created a JavaScript program that is intended to run on multiple computers at once.
I need to know how to run a function on all of the computers at the same time.
I have tried making a function that uses setTimeout to basically wait until a certain time. I have done multiple checks on both computers and it seems to think that it is making up for setTimeout's delay, but it is still off by around 0.4 seconds.
You can synchronize your applications either using a central server with Websockets, for example. Or, if you want to use something really fancy, you can use WebRTC signalling. It is a bit harder to get into, but it works brilliantly.
Update: I just read that you want to use it for a Rubik's cube competition? With WebRTC, you can even integrate a live video connection between both players so that they can see their opponents cube. Sounds fun!
There is no way to 100% guarantee that the function will run at the same time on both the computers. Even with Websockets there will be a network delay to reach each computer and you cannot guarantee network message will reach to all computers at the same time.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I am trying to show a Bokeh plot in Firefox. There are quite many sub-graphs (approximately 200), each showing 1-4 objects.
I am receiving in Firefox:
"A webpage is slowing down your browser."
Some notes:
After rebooting, it works fine for a couple of times.
I am behind a corporate proxy. I ask myself if it may be the cause. Some JavaScript and CSS is being loaded from cnb.pydata.com.
It sounds like your Firefox version is having issues with said webpage. Although I'd say that the design of such site trying to show 200 JS driven plots seems questionable.
As far as I know, there is little that you can do besides updating Firefox, they have been busy lately improving many elements of performance, or trying another browser with better JS performance like Chrome.
If you're in a corporate network it might be many not possible for you to upgrade or install, then you have to go to you IT department looking for help.
Now, since you're generating the HTML with the graphs, perhaps would it be a better idea for you to make a "dashboard" where you show a few and then use dropdown menus or sliders to control which plots are shown at any given time. I've seen solutions using using bokeh itself to do so, or if you want eventually somethign fancier you can also use flask.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
My web page loads up quickly but takes time on the frontend to render.
I have a lot of JS CSS and images on the page.
I have gone to Google PageSpeed insights and in terms of network connections etc. the page is good.
Yes it does mention to minify static resources (JS/CSS/HTML) on the server. But will that improve page redraw.
I need faster rendering times. How do I make this possible?
csstriggers is a handy reference by Paul Lewis list down all the css/style rules that affects paint, layout & composite.
Google Developers recommendations are:
Use efficient CSS selectors
Avoid CSS expressions
Put CSS in the document head
Specify image dimensions
Specify a character set
Details in Optimize browser rendering
Chrome dev tools can help with profiling and finding bottle necks here is a guide and another one.
If you do have time check Crash course on web performance (Fluent 2013) it's so interesting and worth every second, if you want just the rendering part see:
Delivering 60 FPS in the browser
Critical rendering path
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
This question is pretty simple:
How does one go about detecting and debugging javascript stress on the CPU and/or optimize the code?
As you start building more and more code you reach points where things slow down. How do you figure out if you have unnecessary js running, maybe redundant code, OR if it's getting too much for a computer? My computer is pretty powerful but I can't assume everyone has a monster computer.
Is there a function, program or some tools that can help with this task?
This question seems general but I really don't know how to simplify it otherwise.
Any help or pointing in the right direction is much apprecitated :) Thank you.
Try this app called Spy-JS.
It is a tool which allows you to trace your code, and figure out which executions are taking the longest, allowing you to figure out where you need to optimize.
The tool you are searching for is called a "profiler".
The Firebug extension for Firefox comes with such a profiler and allows you to measure which parts of your Javascript code take how much time to execute.
Keep in mind that it only measures the execution speed in Firefox. Other browsers might implement certain javascript features more or less efficient, which means that the performance bottlenecks could be in other places when your application is executed in another browser. But more often than not your own code is at fault when a program runs slower than it should.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I come from a computer science background and the languages I'm most familiar with are Java, C# and C++. In these languages your memory footprint is always in the back of your mind and I've been taught to destroy objects that are not in use.
I've recently got an internship as a web dev. I'm getting up to speed with various practices and doing a bit of web design which I haven't done in a while, at least not properly. In one of my sites I have a few images that appear on the screen, then move out of the viewport never to be seen again.
Would it be beneficial to .hide() the elements in question? Would it reduce the memory footprint enough to make it worth it? Would it reduce the footprint at all? A co-worker said it wouldn't be worth it as the hit is taken on page load but he wasn't totally sure.
As mentioned in the comments, hiding the element still leaves it in the DOM (Document Object Model). Personally, If I had something moving off screen and then not needed I would use the jQuery .remove() method to physically remove it from the DOM. It may make a difference to performance depending on the size of the image and the amount of images that this is happening to.
Like I've said, I like my DOM to be clean and tidy without any unnecessary clutter, so I would remove them, but that's just me.
EDIT: Looking into it a bit more, it appears that removing the element from the DOM does not free the memory associated with it (source). It seems that it is dependant on the DOM implementation when the memory is freed (source). Physically reusing the nodes looks like the most efficient way to go.
#Pointy gave the correct answer (as a comment). No - it does very little to hide it because it's still in memory because the element (and all of it's children) are still in the DOM. It MAY make painting a little faster in scrollable/transformable areas (but it may not) but it certainly doesn't decrease the memory consumption of your app simply by hiding it.