Schwanken bedeutet hier eine Differenz zwischen dem ersten und dem letzten DOM-Update!

Framework-Vergleich

Vergleich aller Frameworks pro User Action und Browser

Caption Change

positiv:

  • Nuxt updated alle HTML-Elemente in allen Browsern außer Google Chrome (hier gewinnt Astro) am schnellsten
  • Nuxt zeigt kaum Unterschiede zwischen den Browsern (min: 44 ms in ME, max. 74 ms in Mobile Safari)

negativ:

  • Svelte zeigt die schlechtes Durchschnittswerte in allen Browsern außer Mobile Safari (Svelte-Avg.: 85,21 ms und React-Avg.: 85,45 ms) und Google Chrome (Svelte-Avg.: 54,25 ms und Next-Avg.: 54,68 ms)
  • Svelte zeigt die schlechtesten Absolutwerte, insb. in Chromium außer Mobil Safari und Google Chrome
  • Angular schwankt am meisten in der Update-zeit (insb. in Firefox: 10 ms und Mobile Safari: 12 ms)

Browser-Notizen:

  • Webkit updated nur mit Nuxt gut (durchschn. 60,3 ms, alle anderen Framework durchschn. 92 - 98,85 ms)
  • Mobile Safari (und Webkit) schwankt mehr als andere in den Update-Zeiten

  • Media Selection

positiv:

  • Nuxt (und Vue) sind in allen Browser sehr schnell und stabil (Nuxt-Range immer 0 ms außer in Chrome: 1 ms)

negativ:

  • Next hat in allen Browsern den absoluten Maximalwert und in allen Browsern außer Firefox und Chromium den langsamsten Durchschnittswert
  • Next schwankt sehr starK -> <img>-Element updatet sehr langsam (max. 333 ms in Webkit)
  • Astro schwankt unter Webkit zudem auch um 33 ms

Browser-Notizen:

  • Webkit schwankt mehr als andere

Media Source Insert

positiv:

  • Nuxt hat in allen Browsern außer Chrome die schnellsten Durchschnittswerte und in allen Browsern außer Chrome und Mobile Chrome den schnellsten absoluten Wert
  • Nuxt ist in Webkit (,Mobile Safari und ME) schneller als alle anderen Frameworks
  • Nuxt schwankt so wie gar nicht (max. 1 ms)
  • Next ist ebenfalls sehr stabil (1 ms (Mobile Chrome, ME) bis 6 ms (Firefox) Schwankung )

negativ:

  • Astro (und Vue) schwankt sehr stark in Webkit und Mobile Safari
  • Svelte schankt stark in Webkit
  • React schwankt start in Mobile Safari

Browser-Notizen:

  • Webkit und Mobile Safari haben die schlechtesten Durchschnittswerte und die höchsten Schwankungen

Post Creation

positiv:

  • Nuxt (und Angular) zeigt weniger unter den Browsern schwankende Durchschnittswerte
  • Svelte zeigt außer in Firefox unv Wekit schnelle Minmalwerte

negativ:

  • Next ist sehr langsam in Firefox, Webkit, Mobile Chrome und Mobile Safari
  • alle Frameworks zeigen große Schwankungen (Differenz zwischen erstem DOM Update und letztem DOM Update)
  • Vue-basierte Frameworks zeigen in allen Browser relative schnelle erste Updates

Browser-Notizen:

  • Webkit und Mobile Safari sind wieder schlechter als andere Browser
  • Mobile Chrome hat unter allen Frameworks fast identische Minimalwerte
  • Google Chrome zeigt die gebündelsten Werte für alle Frameworks

Browser-Vergleich

Vergleich aller Browser pro Framework und User Action

Angular

positiv:

  • Google Chrome zeigt für alle Actions die schnellsten Minimal- und Maximalwerte
  • ME zeigt außer für Caption Change starke Durchschnittswerte

negativ:

  • Webkit schwankt außer für Caption Change (9 ms, Mobile Safari 12 ms, Firefox 10 ms) am meisten, insb. für Post Creation

User Action Notizen:

  • Vergleich Chromium und Mobile Chrome:
    • MediaSelection ist schneller angefangen in Chromium und für PostCreation
    • andere Actions schwanken weniger in Chromium
    • Mobile Chrome schwankt weniger bei MediaSelection und PostCreation
  • PostCreation schwankt am meisten (Minmalwerte sind gleich, aber Maximalwerte 2x, max. 172 ms mit Webkit)

Astro

positiv:

  • Microsoft Edge und Google Chrome teilen sich 1. Platz in Durchschnittswerten
  • Google Chrome schwankt in User Actions nur sehr wenig (CaptionChange: 2ms, MediaSelection: 1ms MediaSourceInsert: 3ms, PostCreation: 29ms)
  • In Mobile Safari schwankt MediaSelection für den absoluten Wert erstaunlich wenig (84-85 ms)
  • In Webkit schwankt CaptionChange für den absoluten Wert erstaunlich wenig (91-96 ms)

negativ:

  • Webkit (und Mobile Safari) hat die schlechtesten Minimal-, Maximal- und Durchschnittswerte

User Action Notizen:

  • Post Creation in allen Browsern am langsamsten: gleiche Mindestwerte, viel höhere Maximalwerte
    • Ausnahme: In Chromium und Mobile Chrome schnellere Mindestwerte

Next

positiv:

  • Werte in allen Browsern für MediaSourceInsert und CaptionChange sehr gebündelt (max.: 6ms Schwankungen)
    • Ausnahme: CaptionChange in Webkit 10ms und in Mobile Safari 12ms

negativ:

  • Bei MediaSelection ist die letzte Änderung im DOM immer ein Outlier, langsamer als der Rest der HTML-Elemente:
    • Chromium: $96ms - 56ms = 40ms$
    • Mobile Chrome: $86ms - 53ms = 33ms$
    • Google Chrome: $90ms - 46ms = 44ms$
    • Microsoft Edge: $94ms - 52ms = 42ms$
    • Firefox: $194ms - 64ms = 130ms$
    • Mobile Safari: $304ms - 86ms = 218ms$
    • Webkit: $333ms - 109ms = 224ms$
  • MediaSelection läuft in allen Browsern in 2 Phasen ab, PostCreation ebenso außer in Webit in 5 identifizierbaren Gruppen/Phasen:
    1. Divs: 102-144 ms
    2. Input, Button, Textarea, Paragraph, Spans: 382-392 ms
    3. Img, Input, Button, Textarea, Paragraph, Spans: 427-441 ms
    4. Img, Input, Button, Textarea, Paragraph, Spans: 459-469 ms
    5. Img, Input, Button, Textarea, Paragraph, Spans: 483-493 ms

Nuxt

positiv:

  • Microsoft Edge ist bei CaptionChange und MediaSourceInsert schneller als andere Browser
  • Microsoft Edge ist bei MediaSelection und PostCreation schneller als andere Browser
  • Webkit ist mit Nuxt nie der langsamste Browser
  • MediaSelection schwankt nur in Google Chrome (1 ms)
  • Google Chrome schwankt bei PostCreation am wenigsten (37 ms)
  • MediaSourceInsert schwankt in Google Chrome, Microsoft Edge, Firefox und Mobile Safari um 1 ms, sonst 0 ms

negativ:

  • Mobile Safari für alle Actions außer MediaSelection (Firefox) der langsamste
  • Firefox, Mobile Safari und Webkit failen für PostCreation die 100 ms-Grenze
  • Browser teilen sich in gute und schlechte Gruppe: Chromium, Mobile Chrome, Google Chrome und Microsoft Edge sind generell 5-14 ms schneller als Firefox, Mobile Safari und Webkit

React

positiv:

  • Zeiten für MediaSelection sind in allen Browsern außer Firefox und Webkit eng gebündelt (max. 2 ms)
  • Zeiten für MediaSourceInsert sind in allen Browsern außer Mobile Safari (25 ms) eng gebündelt (max. 4 ms)
  • Google Chrome ist für alle User Actions der schnellste

negativ:

  • Mobile Safari ist für PostCreation sehr schlecht (max. 167)
  • Firefox hat für MediaSelection Outlier bei 180-181 ms (Rest 68-69 ms)
  • Webkit hat für MediaSelection Outlier bei 125-133 ms (Rest 91-92 ms)

User Action Notizen:

  • PostCreation läuft in 2 Phasen ab: Main + Div und der Rest

Svelte

positiv:

  • CaptionChange ist in Google Chrome min. 12 ms schneller als der Rest
  • Google Chrome ist außer bei MediaSelection immer durchschn. am schnellsten
  • Google Chrome schankt bei MediaSourceInsert nicht

negativ:

  • Webkit ist langsamer als alle anderen Browser (danach Mobile Safari, danach Firefox)
  • Browser teilen sich in gute und schlechte Gruppe: Chromium, Mobile Chrome, Google Chrome und Microsoft Edge sind generell 4-19 ms schneller als Firefox, Mobile Safari und Webkit

Vue

positiv:

  • Google Chrome und Microsoft Edge teilen sich den schnellsten relativen Platz
  • MediaSelection (max. 7 ms) und CaptionChange (max. 3 ms) schwanken in allen Browsern wenig
  • Die Minimalwerte in Webkit sind für PostCreation schneller als bei den anderen User Actions (47 ms)
  • MediaSelection ist in Mobile Safari im Vergleich zu den anderen Browsern schneller als bei anderen User Actions

negativ:

  • Chromium performt im Vergleich zu anderen Frameworks erstaunlich langsam mit Vue
  • Chromium ist bei MediaSourceInsert und PostCreation so langsam wie Firefox

Copyright © 2024 Andreas Nicklaus.