In diesem Artikel werden einige Methoden zur Performance-Steigerung der Skriptsprache JavaScript untersucht.
Im Detail geht es um die Verbesserung eines Reaktionsspiels auf der Basis von HTML5. Durch das neue canvas-Element ist es möglich geworden, anspruchsvollere Web-Spiele zu programmieren. Getestet wird, ob die bereits vorhandenen Optimierungsmethoden für JavaScript auch für dieses Element geeignet sind und somit den Code beschleunigen können.
Im Zuge der neuen Technologien, wie Smartphones oder Tablets, wird Adobes Flash immer mehr der Rang abgelaufen. Nicht zuletzt durch HTML5, welches die Einbindung von multimedialen Inhalten erleichtert. Da Flash-Dateien auf Tablets, wie dem iPad, nicht unterstützt werden, schließen die Entwickler von Flash-Spielen einen großen Teil des potentiellen Marktes aus. HTML5 hingegen wird von so gut wie allen modernen Browsern unterstützt und läuft sogar unkomplizierter. Denn im Gegensatz zu Flash benötigt man keine Plugins, sondern kann sofort los spielen. Dies ist auch ein Vorteil gegenüber Apps, denn diese muss man erst noch herunterladen und installieren.
Inhaltsverzeichnis
1 Abstract
2 Einführung
2.1 Problemstellung
2.2 Struktur des Artikels
3 Grundlagen
3.1 HTML5
3.2 JavaScript
3.3 Verwandte Arbeiten
3.3.1 Guidelines for JavaScript Programs: Are They Still Necessary?
3.3.2 Improving HTML5 Canvas Performance
3.3.3 Optimierung von webbasierten Client / Server Systemen mit Schwerpunkt Javascript
4 Konzept
4.1 HTML5-Spiel
4.2 Optimierungsmethoden
4.2.1 Grafikoptimierung
4.2.2 Globale vs. lokale Variablen
4.2.3 Literale vs. Instantiierung
5 Umsetzung
5.1 Implementierung in das Spiel
5.1.1 Grafikoptimierung
5.1.2 Globale vs. lokale Variablen
5.1.3 Literale vs. Instantiierung
5.1.4 Zeitmessung
5.2 Tests
6 Evaluation
7 Zusammenfassung
8 Ausblick
Zielsetzung und Themen
Die vorliegende Arbeit untersucht mathematische und programmiertechnische Optimierungsmethoden für JavaScript, um die Performance von Web-Spielen, die auf dem HTML5-canvas-Element basieren, zu steigern und einen ruckelfreien Spielablauf zu gewährleisten.
- Performance-Analyse von JavaScript in HTML5-Browserumgebungen
- Optimierung der Grafikdarstellung unter Berücksichtigung verschiedener Skalierungsmethoden
- Untersuchung von Zugriffsmustern auf globale und lokale Variablen
- Vergleich von objektorientierter Instantiierung gegenüber literalen Schreibweisen
- Evaluation der Methoden in verschiedenen gängigen Browsern
Auszug aus dem Buch
4.2.1 Grafikoptimierung
Das Spielfeld soll sich automatisch an die Größe des Browserfensters anpassen. Dies ist vor allem für Tablets und Smartphones wichtig. Beim iPad zum Beispiel passt sich der Bildschirm abhängig davon an, ob man es horizontal oder vertikal hält. In so einem Fall, oder bei einer simplen Skalierung des Browserfensters, soll sich die Spielfeldgröße anpassen und auch die Grafiken der Gegner und des Spielers proportional skaliert werden.
Das Problem dabei ist, dass man von der größtmöglichen Größe der Grafik ausgehen muss und somit ein hochaufgelöstes Bild braucht. Hätte man nur ein niedrig aufgelöstes Bild und müsste dieses größer skalieren, sähe dies sehr unschön aus. Deswegen wäre zu überlegen, statt einer fliessenden Skalierung einer Grafik, drei verschiedene Größen festzulegen und die jeweils passenden Grafiken nachzuladen. Allerdings könnte es passieren, dass dann Popping3 auftritt. Die andere Idee wäre eine Kombination aus stufenlosen Skalieren und festen Bildgrößen. Hätte man beispielsweise eine Größe von 90x90px für einen Gegner berechnet, würde man die festgelegte Grafik mit 100x100px kleiner skalieren. Bei einer Größe von 60x60px würde man die nächstkleinere Stufe, eine 50x50px Grafik, größer skalieren.
Zusammenfassung der Kapitel
1 Abstract: Diese Arbeit analysiert Methoden zur Performance-Steigerung von JavaScript am Beispiel eines in HTML5 entwickelten Reaktionsspiels.
2 Einführung: Es wird die Problematik der Performance bei browserbasierten HTML5-Spielen dargelegt und das Ziel der Optimierung des Reaktionsspiels definiert.
3 Grundlagen: Dieser Abschnitt erläutert die Technologien HTML5 und JavaScript sowie das Document Object Model (DOM) im Kontext der Web-Entwicklung.
4 Konzept: Das Spiel wird vorgestellt und drei spezifische Ansätze zur Optimierung (Grafik, Variablenzugriff, Objektinstantiierung) werden theoriegeleitet ausgewählt.
5 Umsetzung: Die ausgewählten Optimierungsmethoden werden technisch in den Code des Spiels integriert und ein Testaufbau zur Messung der Rechenzeiten in verschiedenen Browsern beschrieben.
6 Evaluation: Die Testergebnisse werden analysiert und diskutiert, wobei insbesondere der Einfluss verschiedener Browser auf die Performance der optimierten Codes betrachtet wird.
7 Zusammenfassung: Die Arbeit resümiert, dass nicht alle allgemeinen JavaScript-Optimierungen gleichermaßen auf das canvas-Element übertragbar sind.
8 Ausblick: Es wird aufgezeigt, dass weitere Tests mit neuen Browserversionen sowie die Erprobung zusätzlicher Optimierungstechniken sinnvoll wären.
Schlüsselwörter
JavaScript, HTML5, Performance-Optimierung, canvas-Element, Browsergame, Spielentwicklung, Reaktionsspiel, Web-Standards, Web-Entwicklung, Skalierung, Objektinstantiierung, Client-Performance, Browser-Test, Laufzeitbeschleunigung, Webbrowser.
Häufig gestellte Fragen
Worum geht es in dieser Arbeit grundsätzlich?
Der Artikel befasst sich mit der Optimierung des JavaScript-Codes zur Steigerung der Performance bei der Entwicklung eines Reaktionsspiels, das auf der HTML5-Technologie basiert.
Welche zentralen Themenfelder werden bearbeitet?
Die zentralen Themen sind die Performance-Optimierung im Browser, der Einsatz des canvas-Elements, Techniken zum variablen Zugriff sowie das Ressourcenmanagement bei der Grafikskalierung.
Was ist das primäre Ziel der Untersuchung?
Das Hauptziel ist es, durch manuelle Optimierungen des JavaScript-Codes das Ruckeln des Reaktionsspiels zu minimieren und einen flüssigen Spielablauf in modernen Browsern zu garantieren.
Welche wissenschaftlichen Methoden kommen zum Einsatz?
Es handelt sich um eine praxisorientierte Untersuchung, bei der verschiedene Code-Optimierungen implementiert, in einer Testumgebung (MacBook Pro) in unterschiedlichen Browsern (Chrome, Firefox, Opera, IE, Safari) ausgeführt und die Rechenleistungen evaluiert wurden.
Was wird im Hauptteil der Arbeit behandelt?
Im Hauptteil werden das Konzept für die Performance-Steigerung entwickelt, die konkreten Implementierungen der Grafik- und Variablenoptimierungen beschrieben und die empirisch gewonnenen Messergebnisse im Vergleich ausgewertet.
Welche Schlüsselwörter charakterisieren die Publikation?
Die Arbeit lässt sich primär durch Begriffe wie JavaScript, HTML5-Performance-Optimierung, canvas-Element, Web-Spieleentwicklung und Browser-Benchmarking charakterisieren.
Wie wirkt sich die lokale Zwischenspeicherung von globalen Variablen aus?
Die Ergebnisse zeigten, dass die lokale Zwischenspeicherung von globalen Variablen die einzige Methode war, die eine wirkliche Verbesserung der Rechenzeit erzielte, wenn auch mit teils hohen Schwankungen in der Ausführungsdauer.
Warum wird im Artikel die literale Schreibweise als Optimierung diskutiert?
Die literale Schreibweise zur Erzeugung von Objekten wurde als potenziell performantere Alternative zur klassischen Instantiierung mittels 'new'-Keyword geprüft, jedoch erwies sie sich im Testverlauf als langsamer als erwartet.
- Quote paper
- Jasmin Dettelbach (Author), 2012, Optimierung von JavaScript am Beispiel eines Reaktionsspiels in HTML5, Munich, GRIN Verlag, https://www.hausarbeiten.de/document/1446136
