Schreiben und Debuggen von Code für optimale Leistung

Internet Explorer 10 bietet eine breite Palette von APIs, mit denen Sie die Leistung Ihrer Webseite steigern können. Daneben steht Ihnen mit den Entwicklertools (F12) eine leistungsfähige integrierte Debuggingumgebung zur Verfügung.

Inhalt dieses Abschnitts

ThemaBeschreibung

Verwenden der Entwicklertools (F12) zum Debuggen von Webseiten

Bei den Entwicklertools (F12) handelt es sich um eine Suite bedarfsgesteuerter Tools, die ab Windows Internet Explorer 9 in jede Installation integriert sind. Die F12-Entwicklertools sind jederzeit auf jeder Seite verfügbar. Mit ihnen können Websiteentwickler schnell JavaScript, HTML und CSS (Cascading Stylesheets) debuggen sowie Leistungsprobleme auf einer Webseite oder in einem Netzwerk aufspüren.

 

Einführung

Die Qualität einer Webseite lässt sich oftmals daran bemessen, ob diese die beabsichtigte Leistung erreicht.  HTML5 und Windows Internet Explorer bieten Features, mit denen Sie das Optimum aus Ihren Webseiten herausholen können. Benutzer bemessen Leistung an der UI. Neue Features wie Web-Worker, requestAnimationFrame, Seitensichtbarkeit und setImmediate können zu einer besseren Leistung auf dem Bildschirm beitragen, denn mit ihnen kann der Entwickler besser steuern, wo und wann Code ausgeführt wird.

Jeder Entwickler beschäftigt sich regelmäßig mit dem Debuggen von Code. Da Webseiten mit der Verwendung mehrerer Skripts und Bibliotheken immer komplexer werden, werden auch das Aufspüren von Fehlern und das Verbessern der Leistung immer komplexere Aufgaben. Mit den Entwicklertools (F12) können Sie innerhalb des Browsers Fehler beheben, während Sie Ihren HTML-, CSS- und JavaScript-Code anzeigen und den Ablauf darin verfolgen.

Verbessern der Leistung einer Seite

In den folgenden Artikeln finden Sie nützliche Informationen zu den ersten Schritten mit den neuen APIs und Features für die Leistung. Sie erfahren darin, wie Sie Web-Worker verwenden können, um langwierige Aufgaben im Hintergrund auszuführen, wie Sie Skripts asynchron ausführen können, um die Blockierung von eingefrorener UI aufzuheben, und wie Sie Ressourcen lokal zwischenspeichern können.

Timing- und Leistungs-APIs Internet Explorer 10 und Windows Store-Apps unterstützen verschiedene APIs, die eine effizientere Nutzung der Computerhardware erlauben und damit sowohl die Leistung als auch die Energieverwaltung von Websites verbessern helfen. Dazu gehören Navigationstiming, Ressourcentiming, Seitensichtbarkeit, Animationstiming und effiziente Skriptausführung.
Web-Worker Die Web-Worker-API bietet Autoren von Webanwendungen eine Möglichkeit, Hintergrundskripts zu erzeugen, die parallel zur Hauptseite ausgeführt werden.
Asynchrone Skriptausführung Das async-Attribut für das Skriptelement ermöglicht das Laden des zugeordneten Skripts und das asynchrone Ausführen unter Berücksichtigung des Rests der Seite.
Anwendungscache-API ("AppCache") Mit AppCache werden Ressourcen lokal zwischengespeichert. Dadurch kann die Leistung einer Webseite verbessert werden, da die Anzahl der Anfragen an den Hostingserver reduziert wird. Außerdem wird so der Offlinezugriff auf zwischengespeicherte Ressourcen ermöglicht.

 

Debuggen mit den Entwicklertools (F12)

Nach dem Erstellen Ihrer Webseiten können Sie mit den Entwicklertools (F12) Fehler und Engpässe finden und beheben sowie die UI bereinigen. Die Tools bieten Ihnen die Haltepunkte, Überwachungsvariablen und schrittweise Codeausführung, die Sie von einer modernen IDE erwarten. Mit dem Lineal und dem Farbwähler können Sie die UI ansprechender gestalten. Mithilfe des Features Profiler und des Features Netzwerk für die Aufzeichnung des Datenverkehrs können Sie Engpässe im Code und im Netzwerk feststellen und die optimale Leistung für die Benutzer erreichen.

Navigieren auf der Oberfläche der Entwicklertools (F12) Dies ist eine Kurzreferenz für die Tools, Befehle und Menüs in den Entwicklertools (F12), die in Internet Explorer 10 integriert sind.
Einführung in die Entwicklertools (F12) In diesem Artikel erhalten Sie eine Einführung in die gängigsten Features der Entwicklertools (F12).
Verwenden der Konsole der Entwicklertools (F12) zum Anzeigen von Fehlern und Statusangaben Mit den Befehlen in der Konsole der Entwicklertools (F12) können Sie Fehlermeldungen von Internet Explorer 9 erhalten sowie eigene Meldungen aus dem Code zurücksenden, ohne dabei den Ausführungsfluss unterbrechen zu müssen.
Verwenden der Entwicklertools (F12) zum Debuggen von JavaScript Die Entwicklertools (F12) umfassen Debuggingtools wie Haltepunkte, die Anzeige von Überwachungs- und lokalen Variablen sowie eine Konsole für Meldungen und die sofortige Codeausführung.
Leistung des Codes mithilfe des Profiler-Tools analysieren In diesem Thema werden die Features des Profiler-Tools erläutert, und es wird beschrieben, wie Sie mithilfe dieses Tools die Leistung von Skripts prüfen können.
Verwenden der Aufzeichnung des Netzwerkdatenverkehrs in den Internet Explorer-Entwicklertools Auf der Registerkarte Netzwerk in den Entwicklertools in Internet Explorer 9 können Sie Probleme im Zusammenhang mit dem Netzwerk diagnostizieren, denn dort wird der gesamte Datenverkehr für eine Seite angezeigt, und es werden Details über einzelne Verbindungen verfügbar gemacht.

 

Demos und Artikel

Die folgenden Demos und Artikel erleichtern Ihnen den Einstieg in die Verbesserung der Leistung und das Debuggen Ihrer Seiten.

Einführung in HTML5-Web-Worker: der Multithreading-Ansatz in JavaScriptHier finden Sie mit vielen Codebeispielen und technischen Diskussionen den Einstieg ins Thema Web-Worker.
Demo: Web-Worker-Tools für test262In dieser Demo wird eine Reihe von JavaScript-Funktionstests gestartet. Sie werden sowohl im UI-Thread als auch im Hintergrund mithilfe von Web-Workern ausgeführt, um die relative Leistung der beiden Ansätze aufzuzeigen.
Erstellen von Websites und Apps für die Offlineverwendung mit den HTML5-Features AppCache und IndexedDBErfahren Sie, wie Sie klug konzipierte Offlinewebsites und -apps erstellen, indem Sie mit AppCache Dateiressourcen lokal speichern, mit IndexedDB strukturierte Daten lokal speichern, DOM-Speicher (Document Objekt Model) nutzen, um kleine Textmengen lokal zu speichern, und Offlineereignisse einsetzen, um zu erkennen, ob eine Verbindung zum Netzwerk besteht.
Debuggen von Web-Workern in IE10Erfahren Sie, wie Sie mit den Entwicklertools (F12) in Internet Explorer 10 JavaScript vollständig und auf vorhersehbare Weise debuggen können, wobei die Ausführung sowohl innerhalb der Webseite als auch in Web-Workern erfolgt.
Neue Webleistungs-APIsHolen Sie mit requestAnimationFrame, Seitensichtbarkeit und setImmediate alles aus der zugrunde liegenden Hardware heraus, und nutzen Sie die Akkuenergie effizienter.
Beschleunigen Sie das Debuggen Ihrer Site mit dem ECMAScript-Strict-ModusWenn Sie den ECMAScript-Strict-Modus aktivieren, können Sie empfohlene Vorgehensweisen für die Entwicklung mit JavaScript in Ihrem Code erzwingen und damit das Debuggen vereinfachen.

 

 

 

Anzeigen:
© 2014 Microsoft