Ist es besser, eine große Leinwand oder bis zu 100 kleine dynamisch erzeugte Leinwände zu haben?

Ich arbeite an einem mobilen Web-Würfel-Simulator. Der erste Prototyp ist hier: http://dicewalla.com Ist es besser, eine große Leinwand oder bis zu 100 kleine dynamisch erzeugte Leinwände zu haben?

Ich habe derzeit eine große Leinwand, wo ich alle Würfel zeichne. Ich plane, den Code in einer Weise neu zu schreiben, die mehr MVC ist und für mich einfacher zu aktualisieren ist. Ich denke, es wäre für mich einfacher, für jedes Würfelobjekt eine kleine Leinwand zu erzeugen, als alle Würfel auf die große Leinwand zu malen und diese große Leinwand zu aktualisieren.

Meine Frage ist, wenn es eine schlechte Leistung trifft, wenn der Browser viele kleine Leinwände gegen einen großen erstellt. Es ist schwer vor Ort zu testen, ich habe gehofft, dass jemand hier weiß, was die beste Praxis ist.

Quelle

2012-08-09 Ben Brophy

Verwenden Sie setInterval, um die Animation auf Ihrem neuen Build zu steuern? Ich habe dieselbe Frage. Obwohl - in meinem Fall - habe ich eine konstante Animation, die von setInterval gesteuert wird. Mehrere setIntervals auf einer Seite zu haben, wäre viel weniger wünschenswert als die gesamte Animation in einer Leinwand zu haben - daher erscheint der Ansatz der einzelnen Leinwand als ein effizienterer Ansatz. – Joel

Ich würde sagen, verwende 6 Leinwandobjekte, um die Seiten zu zeichnen, und benutze sie dann als Hintergrundbilder für die gewürfelten Würfel. Es gibt eine große Anzahl von Leinwänden, da Sie die Grafiken danach nicht verändern. Verdammt, du könntest das sogar ohne Leinwand machen, nur für radiale Farbverläufe und gestylte Divs. –

Follow-up - Ich versuchte beide Ansätze. Ich habe zwar keine genauen Maße, verwende aber mehrere Leinwände deutlich besser. Ich verwende keine Animationen, sondern lade nur Canvases neu, wenn auf eine Schaltfläche geklickt wird. –

Mehrere Leinwände ermöglichen normalerweise eine bessere Leistung, da Sie selektiv Rendern können.

Wenn Sie nur eine Leinwand haben und einen Würfel aktualisieren möchten, müssen Sie normalerweise die gesamte Leinwand neu zeichnen. Auf der anderen Seite können Sie mit mehreren Leinwänden nur die Würfel aktualisieren, die neu gezeichnet werden müssen. Das ist eine Steigerung der Effizienz.

Ferner Sie sollten keinen spürbaren Unterschied in Belastung 1 Leinwand sehen im Vergleich zu 100

Quelle

2012-08-09 13:36:24

Das ist eine große Hilfe, danke. Ich werde nur ausgewählte Würfel zeitweise aktualisieren. –

In Bezug auf Leistung, wie bereits erwähnt wurde, sollte es kaum einen Unterschied zwischen 1-100 Canvas-Elementen , wenn Sie seinen‘ Die Grafiken werden nicht regelmäßig aktualisiert. (dh: statische Grafik/keine Animation)

Die meisten Verweise auf das Netz in Bezug auf mehrere Leinwände neigen dazu, Fälle zu behandeln, in denen Sie mehrere Ebenen haben und mit Transparenz über andere Dinge umgehen müssen.

Das gesagt, was du mit dicewalla machst, sieht nicht so aus, als würde es von mehreren Leinwänden profitieren.

Sie können auch selektiv die Regionen einer einzelnen Arbeitsfläche neu zeichnen, um eine bessere Leistung zu erzielen, wenn die Aktualisierung der gesamten Arbeitsfläche einen Engpass darstellt. Dies bietet Ihnen die Vorteile, mehrere Bilder zu erstellen, ohne sich um die Verwaltung und Erstellung dieser Elemente kümmern zu müssen.

Quelle

2012-08-09 14:22:41 joekarl

Danke. Die Aktualisierungen werden nur ausgeführt, wenn ein Benutzer Maßnahmen ergreift (z. B. wählt er einige der Würfel aus, die erneut zu rollen sind, ohne die anderen zu berühren). Aufgrund Ihrer Antwort und @depots klingt es so, als ob es nicht so wichtig ist, wie ich es mache. Das Hinzufügen von Berührungsereignissen zu einzelnen Leinwänden ist für mich einfacher zu programmieren als herauszufinden, welche Würfel mit den X- und Y-Koordinaten auf einer großen Leinwand angetippt wurden, so dass ich mich auf mehrere Leinwände lehne. –

Ist es besser, eine große Leinwand oder bis zu 100 kleine dynamisch erzeugte Leinwände zu haben?

Antwort

Verwandte Themen