Comments (4)
I want to measure the duration from the click to that point of time when the DOM has been updated. Please take a look at the attached picture:
On the left is the click event, then a pause of ~90 msecs, then the repaint happens. I want to measure the duration starting with the click event until the final repaint occurred which means ~110 msecs. Aurelia causes a first very short repaint after the click event and thus I must wait for the timer event and take the next repaint. Calculating it that way comes very close to the duration that is shown in the timeline.
This also means that this benchmark favors frameworks that perform an immediate dom update. Thus especially the tests that run very short must be taken with caution, especially for aurelia since the measured duration is not determined by the javascript duration, but by the idle time waiting for the timer.
Vidom is another framework that batches dom updates, but vidom has a much shorter pause and seems to be using RAF instead of a timer and it does not cause a repaint after the event handler. Here's a timeline screenshot for vidom:
Aurelia was the only framework that forced me to create such a hack (at least for Chrome 48).
So my question is: Why does the timer for aurelia fire with such a long delay? Why don't they use the next animation frame?
from js-framework-benchmark.
Thank you very much for the explanation. Sometimes when I run aurelia tests, the app throws exception saying that the last paint event is NULL. And the events ordering causes this ussue. It happens to be "EventDispatch" -> "PaintEvent" - "TimerFire" without another paint event afterwards. This happens rarely, if I run it 12 times it could appear in any of them or passes without exception. Is it appropriate to catch this exception and just ignore it as a workaround ? Thanks in advance
from js-framework-benchmark.
Looking at the code again I think it is no longer needed, since I changed the logic to take always the last paint. This was due to Chrome 49 which changed rendering and had paint events for other frameworks that were not shown in the timeline (and is quite a bit slower than Chrome 48).
But that doesn't really explain your exception. I've only seen such problems when the browser window was hidden or minimized. Ignoring the exception works but doesn't leave the good feeling of correctness. Is the browser window visible? What Chrome Version are you using?
from js-framework-benchmark.
Sorry for the late response. The problem still stands. I am using chrome v 50. The browser window is visible. Anyway, I made some changes to my particular case and it seems it is working. Thanks
from js-framework-benchmark.
Related Issues (20)
- Jotai is labeled 'jotai-v17'?
- React implementation bug for swap rows HOT 2
- 90 percentile calculation make comparisons across browser versions impossible. HOT 4
- The weight is killing innovations in `JS` frameworks HOT 28
- Remove lighthouse metrics? HOT 10
- Tracing misses sometimes the click event HOT 3
- isKeyed test appears to be wrong for qwik HOT 4
- Please add jQuery if just for completion HOT 2
- .NET 8 Released HOT 1
- archive petite-vue
- sprae should be flagged #1139 HOT 1
- doohtml should be flagged #801 HOT 2
- Number of warm-up runs should not be the same every time HOT 1
- The test "total kilobyte weight" might not cover assets cached by service worker HOT 2
- Suggestion: transpose + sort + group table HOT 2
- Results of locally tested frameworks (libraries e.t.c.) are sometimes at the end of the table HOT 1
- hydro-js is broken HOT 1
- Suggestion: calculation for transferred sizes HOT 6
- add htmx and astro for the benchmark ? HOT 3
- Add "Fresh" web framework. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from js-framework-benchmark.