Geschwindigkeit des Schreibens auf HTML5-Zeichenfläche im Vergleich zu OneNote

Gibt es einen grundlegenden Grund, warum das Zeichnen mit einem Stift auf einem HTML-Zeichenbereich mit Bibliotheken wie atrament.js oder signature_pad wesentlich langsamer ist als das Zeichnen auf OneNote? Es scheint einen Unterschied zwischen Tag und Nacht zu geben, und ich versuche herauszufinden, dass es eine Einschränkung von Javascript oder Browsern oder etwas anderem ist.Geschwindigkeit des Schreibens auf HTML5-Zeichenfläche im Vergleich zu OneNote

Weiß jemand, ob die oben genannten Lösungen mit maximaler Leistung arbeiten? Und wenn ja, warum ist der Shold anders als OneNote?

Edit: Die Desktop-Version von OneNote

Quelle

2017-05-14 anesthetic

Verweisen Sie auf das Desktop-OneNote-Programm oder die webbasierte OneNote-Anwendung? – Dai

Die Desktop-Version – anesthetic

Ein Browser ist ereignisgesteuert. Das bedeutet, dass Folgendes passiert: Eingabe> Eingabe verarbeiten> auf Leinwand zeichnen> auf Bildschirm malen. Der Browser ist auf 60FPS eingestellt, also kann die Eingabe bis zu einem Rahmen hinterher sein: input (0ms)> processing> draw> paint (16ms). Wenn die Verarbeitungs- oder Zeichenschritte langsam sind, kann es auch zu Verzögerungen kommen.

Desktop-Anwendungen sind nicht unbedingt auf 60 FPS beschränkt und können jederzeit direkt auf den Bildschirm zeichnen. Die Schleife kann also eher wie folgt aussehen: Eingabe> Farbe.

Dies ist alles High-Level, aber das sind die Arten von Dingen, die zu einer Verzögerung zwischen Eingabe und Ausgabe führen können.

Quelle

2017-05-14 09:41:39 Whothehellisthat

Ereignisse sind nicht an die Bildschirmaktualisierungsrate gebunden und weder js. Nur die Bilder sind, aber das gleiche gilt für Desktop-Apps (sie können die Hardwarebegrenzung Ihrer Bildschirmaktualisierungsrate kaum ändern). Was also wirklich passiert, ist * loop1: [event => processing (=> auf Canvas zeichnen)] (max (Eingabegeräte-Rate, Verarbeitungszeit)) * | * Schleife 2: Malen (60fps) *. Eine gängige Technik ist also, * => in Canvas * in * loop2 * einzufügen, um zu vermeiden, dass * Verarbeitungszeit * unnötig lang ist, indem mehrere Male etwas ausgeführt wird, das nur einmal sichtbar wäre. – Kaiido

Und tatsächlich, in den meisten modernen Browsern (alles, was ich getestet habe) werden Ereignisse von einem anderen Thread als der, der die js ausgeführt wird verarbeitet, was bedeutet, dass selbst wenn Sie die Seite einfrieren, Ereignisse gespeichert und verarbeitet werden, sobald der Browser kann . Also wäre es * phase1: [event => UA-Verarbeitung] (max rate = Eingabegeräte-Rate) phase2: [js processing (=> auf Leinwand zeichnen]] (Bearbeitungszeit) phase3: malen (max. Rate = 60fps) *. – Kaiido

@Kaiido: Klingt richtig für mich. Ich kannte das Zeug, wollte es aber einfach und auf hohem Niveau halten (war mir nicht sicher, wie tief OP davon ist, wie das funktioniert, von ihrem Post). Sie sollten das in eine Antwort setzen, obwohl; vielleicht würde es stattdessen gewählt werden. – Whothehellisthat

Geschwindigkeit des Schreibens auf HTML5-Zeichenfläche im Vergleich zu OneNote

Antwort

Verwandte Themen