Develop Reference

How can I measure rendering time of huge svg?

I am trying to figure out how I can measure the rendering time of SVG.
When I make changes to the SVG elements (e.g Zoom In or Zoom Out), it takes a few seconds to take effect because SVG is huge.
And I need to measure the time it took to update for performance analysis purposes.
I have tried several DOM events like DOMContentLoaded DOMNodeInserted DOMNodeSubtreeModified but all these events are triggered before changed SVG is rendered on screen.
I have also tried PerformanceTimingAPI and PerformanceElementTimingAPI but no luck.
Thanks in advance!

There’s also MutationObserver but if you’re already experiencing trouble with JS events saying a change happened in the DOM, but you’re not seeing the browser engine re-render, then you might not be able to use JS to measure this and may need to use a more “manual” method.
Try using Chrome DevTools’ Performance recording feature. If you enable screenshots, you should be able to see when the rendering took effect. Combine this with performance.mark() and you should be able to see when you triggered the DOM mutation, and when the screenshot actually updated.

Javascript addEventListener, skip to the latest event (of the same type, 'mousemove') only and handle the latest event only

I was wondering whether it's possible to jump to and handle the latest event, when you have several other events of the same type in the event loop in Javascript. I'm asking this because, I have made a Javascript program, which reports the 'mousemove' event every time the mouse pointer moves. The issue is that, for some reason, the event handling is not as fast as it should be, and my PC or code certainly isn't the problem.
I think that the issue is that web browsers limit the amount of 'mousemove' events that can be handled every frame. So, instead of handling all the events in a queue, I would like to just jump to the latest one and handle it and discard all the older events, instead of executing all of them one-by-one.
I'm not sure whether this is possible with Javascript, so that's why I'm asking for help.
Any help would be much appreciated... :-)
Here is my app. The problem is that if you try to move the window's title bar area up or down too fast, you will then lose the handle on the window itself. Now, that shouldn't happen in a modern GUI.
UPDATE on 'Debouncing' answer:
So, some people suggested that I should use a debouncing function. That wouldn't solve my problem. At its best, it would only delay what needs to be done. So, for example, if I have a pixel at (4,0) and if I then try to move it 3 pixels to the left, to (1,0), it would appear that in the normal fashion, but just a bit delayed. That is, if one assumes that (I'm making this up) a new 'mousemove' event on the queue is handled every 1 ms and the time it takes for the code to run for this example, is 0 ms, and in the code, we set the function with the code to execute 2 ms after the new event has been handled. This will then mean that indeed, only the latest event will be handled and the code will then run 2 ms after the latest event's listener function has started to run. So, to move a pixel 3 pixels to the left, this will still take 5 ms. That is still too slow. I actually need to update my Web app with coordinates of the mouse pointer, from where it actually is.
My solution:
Every time a 'mousemove' event's listener has started to execute, I should take the coordinates from the mouse pointer, but not from the event's .clientX and .clientY properties. I should take them from where they actually are on the page and not from where they were, once the 'mousemove' event has been registered and the event object that has been created at that time (which also doesn't have the up-to-date coordinates of the mouse pointer). I've searched for a solution on how to get the actual mouse pointer's coordinates without the actual event object, but so far, I have only read the responses about it being impossible.
This person has had the exact same problem as me. I'm now recording the global (the document's) position of the mouse, but the behavior of the app is still the same.

My solution to this problem:
I have moved the 'mousemove' and 'mouseup' events from the dragged object to the document itself.

JS touchmove events that stop triggering.

I have a webapp project I am working with a graphical chart that I want to respond to the touchstart and the touchmove events. I have the events bound to an element that is overlaying the chart canvas element and for the most part everything is working as expected.
I am however, experiencing some behavior where the events eventually stop triggering. I am seeing this happen in at least two ways:
First case: It all appears to be a somewhat sporadic stopping (I can't narrow down exactly what it is that is going on right before they stop). Everything will work fine for a while but then eventually touch events just stop triggering.
Second case: When I update the app (which removes the bound element, reappends a new element to DOM, and then re-binds the new element with the same events). After this update I get exactly one single touchstar/touchmove to trigger. After that single firing no further touch events to trigger.
Here is the website I am working on: mortgagevista.com
I can't for the life of me figure out what is going on. I have spent hours reading up on forums and SO and still can't seem to figure out what the issue is. Unfortunately I am even out of ideas on how to troubleshoot the problem. I have been using the emulator in the chrome dev tools reproduce the problem.
Does this issue sound familiar to anybody? Any common issues or pitfalls with the touch events that I might be missing? Any ideas on how to best go about troubleshooting this? (Sorry, I know this is a really vague question but I am out of ideas on even how to narrow down what is happening).

Your events are not going to the right place. There is two possible reasons for this.
An incorrect element has focus.
An invisible overlay or something similar is not getting clicked as you expect.
Drill into these to issues and see if you can find the root cause.
Good luck.

d3 drag behavior low performance on chrome with huge dataset

I implemented d3 slider control allowing to navigate through data serie displayed along time axis.
I'm trying to isolate/solve problem with drag events coming too seldom (more than one second interval), when data set is large enough (entire data array is inlined in html page, so page weights about 13 megabytes).
http://javaeedemo.pragmasoft.cloudbees.net/test/isolated-test1.html
Drag looks jumpy in chrome, but is smooth in firefox.
data array has only about 300 elements, and elements contains lot of data including nested arrays, but I only use one property in every element named 'end'.
I tried to reduce data array size, leaving same amount of elements, but only left 'end' property in every element, so this change doesn't impact functionality, only page size.
http://javaeedemo.pragmasoft.cloudbees.net/test/isolated-test2.html
With these changes drag looks much more smoothly on chrome.
Appreciate any help, including ideas about how to isolate problem. I tried to use Chrome Timeline, what I see there is that my onDrag handler executes very fast (matter of 1 ms) yet I still have substantial gaps between onmousemove calls.
Added:
I managed to find some almost working solution - I added drag behavior event listeners to raw mouse events instead, like
//var dragBehavior = d3.behavior.drag()
// .on("dragstart", onDrag.bind(this))
g.on("mousedown", onDragStart.bind(this));
...
Now it works much more smoothly, which makes me thinking that problem is somewhere in drag behavior code. isolated-test3.html has workaround to compare:
Of course I'd prefer using drag behavior, as it solves number of problems and supports touch events as well.

Reacting to changes in a draggable PowerCharts graph

I'm using the drag-able line chart from the FusionCharts PowerCharts package.
I need to get the data of the graph and send it to server-side for further processing after user has moved a draggable point. This is easy to do with the Submit-button built in to the graph but I want this to happen without the user having to click the Submit button.
Based on the documentation (especially on the the events) it seems that the chart will not fire any events when the user has moved a point in the graph.
So now I'm trying to figure out the best way to get notified of the user-made changes to the graph?
One option would be to periodically call a JS function that would get the graph's data and check if it has changed since the last check. However this feels pretty ugly and inefficient and I don't currently know how to implement the continuous polling in JS.
I'm now leaning towards just to listening for a mouse up event on the element where the graph is and then check changes to previous state of the graph. This should work although the user will probably often click on the graph without actually dragging a point in it.
Am I missing some other obvious solutions here?

There are a couple of things I would like to put forward before we reach solution:
Polling is always a bad idea. And polling at a short interval is worse. However, if you do not need to react spontaneously on drag of the data-point, a high-interval polling will do. For your information, polling is done on JavaScript either by using setInterval function or by using recursive setTimeout.
In case you want to track mouse events, keep a note that in case you are rendering Flash charts, you need to ensure that the wMode (window mode) parameter of the chart is NOT set to "window". In "window" wMode, the browser does not track mouse-events when hovered over the chart. To change wMode of a chart, ensure you execute chartInstance.setTransparent(false) or chartInstance.setTransparent(true) before rendering the chart.
The mouse-event method that you have planned will not help you since you will not know whether user had clicked on the data-point. Hence this method is ruled out.
Thus, you are left with polling. :(
Update (after the first comment by Janne):
Using a combination of both to check for data change when drag event occurs on chart is the right solution.