Native JavaScript -Entwicklung nach dem Internet Explorer

Willkommen zum dritten und letzten Teil dieser Serie, in dem wir den Ruhestand des alten IE und die Auswirkungen dieses Vorfalls auf das Gebiet der Front-End-Entwicklung untersuchen werden. Bisher haben wir veraltete Technologien abdeckt, die sicher verworfen werden können, sowie HTML5- und CSS3 -Eigenschaften, die jetzt in Mainstream -Browsern vollständig unterstützt werden. Heute konzentrieren wir uns auf native JavaScript -Technologie und andere Inhalte, die nicht in die oben genannten Kategorien fallen. Nochmals vielen Dank an caniuse.com, es ist eine sehr wertvolle Ressource. Ich werde auch den letzten Haftungsausschluss wiederholen:

Dieser Artikel hat nichts damit zu tun, ob die Entscheidung zur Unterstützung von

alten IE

aufgeben soll. Sie müssen Ihre eigenen Entscheidungen auf der Grundlage der spezifischen Details Ihrer Website oder Bewerbung treffen.

ohne weiteres, lass uns weitermachen!

Schlüsselpunkte

Einführung moderner JavaScript -APIs: Mit der Pensionierung des Internet -Explorers können Entwickler jetzt moderne Javascript -APIs (wie Base64 -Codierung und Blob Builds) direkt in Mainstream -Browsern verwenden, ohne die Leistung und Kompatibilität zu verbessern.

• Verbesserte Kommunikationsfunktionen: Die Verfügbarkeit von APIs wie Kanalnachrichten und Websockets in modernen Browsern fördert eine effizientere inter-skript-Kommunikation und anhaltende Verbindungen zwischen Browsern und Servern.
• Einführung der ES6-Syntax: Unterstützung für ES6-Funktionen wie
und
• für variable Deklarationen auf Blockebene und die Beliebtheit von Pfeilfunktionen ermöglicht es Entwicklern, sauberere und effizientere Code zu schreiben. const let Sicherheit und Datenschutz zuerst: Die Web -Kryptographie -API und Content Security -Richtlinie (CSP) werden jetzt vollständig unterstützt und bieten ein leistungsstarkes Tool zur Verbesserung der Sicherheit von Webanwendungen.
• Leistungsoptimierung: Neue Funktionen wie Sichtbarkeits -API und RequestAnimationFrame verbessern die Effizienz von Webanwendungen und optimieren Sie die Nutzung der Ressourcen und die Animationsleistung.
• sichere Webentwicklung in der Zukunft: Mit der Deaktivierung des Internet Explorer können Entwickler das volle Potenzial von HTML5, CSS3 und JavaScript nutzen, ohne sich auf den Legacy-Browser-Kompatibilität zu beschränken und so innovativer und zukunftsgerichtete sexuelle Webanwendungen den Weg zu ebnen. .

JavaScript apis
In diesem Abschnitt werden wir viele JavaScript -Funktionen, APIs und Funktionen einführen. Was haben sie gemeinsam? Keiner von ihnen kann wirklich für alte IES verwendet werden, erfordern die Verwendung verschiedener Polyfills oder muss ihre Auswirkungen nach Möglichkeit durch verschiedene andere Frameworks und Bibliotheken erreichen. In der aktuellen Umgebung (IE11 -Kante) verfügen sie über einen in den Browser eingebauten nativen Unterstützung, was bedeutet, dass sie direkt verwendet werden können.

Base64 Codierung und Decodierung (BTOA und ATOB)

Base64 ist ein sehr nützliches Tool im Web. Viele von Ihnen haben es möglicherweise verwendet, um Schriftarten oder Bilder in CSS einzubetten. Eine weitere häufige Verwendung besteht darin, mit verschiedenen Ressourcen umzugehen, die normalerweise das Übertragungsprotokoll beeinträchtigen. Ein gutes Beispiel ist die grundlegende Zugriffsauthentifizierung, bei der das Benutzername: Kennwortpaar mit Base64 verpackt und dann an den Server gesendet wird. Die native Unterstützung für Codierungs-/Dekodierungsvorgänge bedeutet, dass sie schneller ausgeführt werden können. Hier sind einige Einführungsressourcen:

• atob () und boa () Dokumente auf Mdn
• base64.js polyfill

Blob Build

Ein binäres großes Objekt oder Blob ist eine Sammlung von Rohdaten, die in einer einzigen Entität in einem Datenbankverwaltungssystem gespeichert sind. Es kann ein Audioclip oder ein Bild sein und wird im Basis64 -Format gespeichert. Oder eine Reihe von Bildern. In vielen Fällen werden Blob -Felder für Daten verwendet, deren Datenstrukturen nicht so streng wie normale Tabellen oder Tabellenschemata wie JSON -Objekte ausgedrückt werden. Einige von Ihnen erinnern sich vielleicht an den Vorfahren der Blob -Schnittstelle, nämlich Blobbuilder. Dieser Ansatz wurde jedoch veraltet und es wird dringend empfohlen, alle BLOB -Operationen über die neue Schnittstelle auszuführen.

Vor allem

, da diese Sammlung einer Datei sehr ähnlich ist, wurde die native Schnittstelle des BLOB -Objekts als Grundlage für die Datei () Schnittstelle verwendet. Es gibt also eine schöne Funktion namens "Blob -URLs", mit der Entwickler URLs für Blob -Objekte erstellen können, die überall Dateien verwendet werden können. In diesem Sinne deckt die native Unterstützung jetzt alle Mainstream -Browser ab, was sehr geschätzt wird.

• Blob auf mdn
• Blob URL auf Mdn
• Einführung in JavaScript -Blob und Dateischnittstellen

Channel Messaging

Normalerweise ist zwei Skripte, die in verschiedenen Browser -Kontexten ausgeführt werden, verboten, miteinander zu kommunizieren, um viele Sicherheits -Fallstricke zu vermeiden. Manchmal ist jedoch eine solche Kommunikation nicht nur erforderlich, sondern ist auch wirklich notwendig. Hier kommt die Channel -Messaging -API ins Spiel. Diese Schnittstelle ermöglicht es unseren beiden Skripten, über eine bidirektionale Pipeline miteinander zu kommunizieren. Es ist, als würde man jedem einen Walkie-Talkie auf demselben Kanal geben. Sehr klug, nicht wahr?

• Einführung in HTML5 Web Messaging auf Dev.Opera
• MessAntechannel auf mdn

konstante und blockische Variablen

const und let sind zwei neue Möglichkeiten, um Daten in ES6 zu definieren. Obwohl VAR Variablen mit globalen oder Funktionsbereichen definiert, verfügen neue Inhalte auf Blockebene. Dies bedeutet, dass der Umfang der mit const erstellten Variablen auf die Klammerpaare beschränkt ist, die sie definieren.

Obwohl SET eine Variable (außer Umfang) definiert, die sich wie eine klassische Variable verhält, ist eine Konstante (const) eine schreibgeschützte Referenz auf einen Wert. Es kann nicht neu zugewiesen werden, kann nicht neu definiert werden und kann denselben Namen mit einer anderen Variablen oder Funktion im selben Bereich nicht teilen. Die einzige Ausnahme ist, wenn eine Konstante ein Objekt mit eigenen Eigenschaften ist. Diese Eigenschaften werden nicht durch Veränderungen geschützt und verhalten sich wie normale Variablen.

Wenn dies gesagt ist, lesen Sie in Ihrem Code, wie Sie in Ihrem Code konstante und blockische Variablen korrekt verwendet werden:

• Konstante auf Mdn
• lass
auf mdn
• Vorbereitung auf SitePoint ECMascript 6: LET UND CONT
• Wes bos 'es6 let gegen const variable

Konsolenprotokollierung

Die meisten Front-End-Entwickler sind sich einig, dass die Webkonsole eines der nützlichsten Tools in der Hand ist, wenn sich Skripte ungewöhnlich verhalten. Internet Explorer ist jedoch im Wesentlichen nur langsam integriert, und nur Version 10 bietet vollständige Unterstützung. Mit dem Ruhestand des alten IE kann uns nichts davon abhalten, das Beste aus dieser Funktion zu machen. Wenn Sie Ihr Wissen aktualisieren und sogar neue Möglichkeiten finden müssen, um die Konsole zu verwenden, lesen Sie die folgende Spezifikation:

Konsole auf mdn

Mehrere Quellressourcenfreigabe

Cross-Origin-Ressourcenfreigabe (CORS) ist eine HTML5-API, die Anfragen nach Ressourcen von außerhalb ihrer eigenen Domäne ermöglicht. Es beschreibt eine Reihe von HTTP -Headern, mit denen Browser und Server bei der Erteilung bestimmter Berechtigungen Remote -Ressourcen anfordern können. Die folgenden Ressourcen sind ein guter Ausgangspunkt für das Lernen, wie diese Funktion korrekt verwendet wird:

DOM-Zugriffskontrolle mithilfe von Cross-Origin-Ressourcenfreigabe auf Dev.Opera

• HTTP Access Control (CORS) auf mdn
• eingehendes Verständnis von CORs auf SitePoint
Web Cryptography API

Sicherheit und Privatsphäre sind zwei der gefragtesten Merkmale in jeder Anwendung heutzutage, was bedeutet, dass eine gute (und schnelle) Verschlüsselung hoch geschätzt wird. Jetzt unterstützen alle Mainstream -Browser die Web -Kryptographie -API der Web -Kryptographie durchweg, mit Ausnahme von IE11 (was die Spezifikationen älterer Versionen implementiert) und Safari (für das das Präfix von Crypto.WebkitsuBle erforderlich ist). Glücklicherweise werden einige spezifische Funktionen, wie die Erzeugung von Zufallswerten, besser implementiert. Daher ist es einfacher als je zuvor, verschlüsselte Elemente mithilfe der nativen Unterstützung zu implementieren. Hier sind einige Leitfäden, wie man dies richtig macht:

Crypto -Objekt auf mdn

• getrandomvalues ​​on mdn
• Web -Kryptographie -API für ältere Browser auf Github Shim
Internationalisierung

Die Verbreitung des Internetzugangs heute bedeutet, dass Besucher Ihrer Website aus aller Welt kommen können. Da Menschen vertrautere Dinge vertrauen, ist es am besten, alle Informationen in ihrer Sprache und in dem Format zu präsentieren, an das sie gewöhnt sind. Hier benötigen Sie Internationalisierung (auch als I18N bekannt) und Lokalisierung (oder L10N). Klingt das nach Unsinn? Zitieren wir Aurelio de Rosa in seinem Artikel über die Erreichung der Internationalisierung (I18N) in JavaScript:

Internationalisierung (auch als I18N bekannt) ist der Prozess der Erstellung oder Umwandlung von Produkten und Dienstleistungen, damit sie sich problemlos an bestimmte Landessprachen und Kulturen anpassen können. Die Lokalisierung (auch als L10N bekannt) ist der Prozess der Anpassung der internationalisierten Software für eine bestimmte Region oder Sprache. Mit anderen Worten, Internationalisierung ist der Prozess der Anpassung Ihrer Software zur Unterstützung mehrerer Kulturen (Währungsformate, Datumsformate usw.), während die Lokalisierung der Prozess der Implementierung einer oder mehrerer Kulturen ist.

Die Browserunterstützung ist etwas besser als Anfang dieses Jahres, und Safari V10 hat sich im September in den Reihen angeschlossen. Klingt es interessant? Hier sind einige Ressourcen, um Sie auf den richtigen Weg zu bringen:

• internationale API auf Mdn
• JavaScript Internationalisierung API - kurze Einführung
• wie man Internationalisierung in JavaScript (i18n)
erreicht

Verarbeitungsmedienabfragen

Responsive Webdesign ist der aktuelle Standard für effiziente Websites, und die Schlüsselfunktion, die es ermöglicht, ist die Existenz von Medienabfragen. MatchMedia führt Medienabfragen von CSS zu JavaScript ein und bietet Entwicklern eine größere Flexibilität, um Inhalte auf verschiedenen Geräten zu optimieren. Ein gutes Beispiel ist die Handhabung von Änderungen vom Porträtmodus zum Landschaftsmodus und des Rückwärtsmodus für Mobiltelefone und Tablets. Während es eine API gibt, die die Erkennung von Geräteorientierungen behandelt, ist die meisten Browserunterstützung teilweise und nur Microsoft Edge bietet vollständige Unterstützung. Hier sind einige Einführungsressourcen zu diesem Thema:

• Testmedienabfrage auf mdn
• Fenster.Matchmedia on Mdn
• So verwenden Sie Medienabfragen in JavaScript auf SitePoint

Medienquellenerweiterung

Medienquellenerweiterungen (MSE) fügt Video- und Audioelementen zusätzliche Funktionen hinzu, ohne Plugins zu verwenden. Dies bietet Ihnen ein adaptives Streaming von Medien, das Streaming in Echtzeit, das Nähen von Video- und Videobearbeitung. YouTube verwendet MSE seit September 2013 in seinen HTML5 -Spielern. Die Browserunterstützung ist auch ziemlich gut, nur iOS safari und Opera mini fehlt diese Funktion. IE11 wird nur dann vollständig unterstützt, wenn sie unter Windows 8 verwendet werden. Leider können IE11/Win7 -Benutzer von dieser Technologie nicht profitieren. Egal, ob Sie nur neugierig sind oder wirklich mit dieser API beginnen möchten, Sie finden die folgenden Ressourcen sehr nützlich:

• MediaSource -API auf mdn
• Medienquellenerweiterung auf msdn
• HTML5 Medienquellenerweiterung: Produktionsvideos in das Web (Smashing Magazine)
bringen

Mutationsbeobachter

JavaScript -Anwendungen werden jeden Tag immer komplexer. Als Entwickler müssen Sie steuern, welche Änderungen auf der Seite geschehen, insbesondere wenn sich der DOM -Baum ändert oder "mutiert". Die Notwendigkeit dieser Art der Überwachung ist nicht neu, aber es gibt tatsächlich eine Lösung - Mutationsereignis. Das Problem mit dieser Schnittstelle ist, dass sie als Ereignisse beide synchron sind (ausgelöst werden und andere Ereignisse ausgelöst werden können) und auch durch das DOM erfasst oder sprudeln müssen. Dies führt wiederum andere Ereignisse aus, überlastet den JavaScript -Thread und generiert in einigen speziellen Fällen einen gesamten Kaskadenfehler, wodurch der Browser zum Absturz gebracht wird.

Daher wurde das Mutationsereignis veraltet und durch den Mutationsbeobachter ersetzt. Sie könnten fragen, was ist der Unterschied? Erstens und vor allem ist der Beobachter asynchron. Sie werden nicht verhindern, dass Ihr Skript ausgeführt wird. Sie werden bei jeder Mutation nicht ausgelöst, sondern nach Abschluss der Hauptaktivität mit Charge. Noch wichtiger ist, dass Sie den Beobachter fein stimmen können, um alle Änderungen am Knoten zu beobachten oder nur Änderungen an einer bestimmten Kategorie zu beobachten (z. Verwenden Sie die folgenden Ressourcen, um zu lernen, wie dies zu tun ist:

• mutationObserver auf mdn
• Verstehe den Mutationsbeobachter
• Neue Varianten, die sich auf SitePoint
entwickeln

Seite Sichtbarkeit

Die Registerkarte

Die Registerkarte hat die Art und Weise verändert, wie wir mit dem Netzwerk interagieren. Es ist nicht ungewöhnlich, dass viele Menschen Dutzende von Seiten gleichzeitig eröffnen. Jede Seite führt ihre eigenen Aktionen aus, führt ihre Skripte aus, lädt die Ressourcen herunter und mehr. Auch wenn jeweils nur eine Registerkarte aktiviert werden kann, verbrauchen alle offenen Seiten die CPU -Zeit und die Bandbreite. Einige Bewerbungen können regelmäßig Aktualisierungen über die Verbindung senden und empfangen. Wenn Sie die App jedoch nicht auf der Registerkarte Aktivität öffnen, muss sie alle x Sekunden im Hintergrund aktualisiert werden? Es scheint ein bisschen Verschwendung, nicht wahr? Insbesondere in mobilen Geräten und Datenplänen ist jede Ressource wertvoll.

Hier kommt die API der Seite Sichtbarkeit ins Spiel. Mit dieser Schnittstelle können Entwickler wissen, ob sich ihre Anwendung in der aktiven Registerkarte oder im Hintergrund befindet. Nehmen wir die Anwendung, die ich zuvor erwähnt habe und die Aktualisierungen als Beispiel durchführt. Mit der API der Seite Sichtbarkeit können Sie erkennen, wann sich die Anwendung im Hintergrund befindet. Anstatt Aktualisierungen alle 5 oder 10 Sekunden durchzuführen, machen Sie es alle 60 Sekunden oder sogar weniger. Sobald die Seite erneut sichtbar wird, können Sie zur normalen Aktualisierungsrate zurückkehren. Sehr cool, nicht wahr?

worauf warten Sie noch? Lesen Sie die folgende Anleitung, um Ihre Bewerbung für die Sichtbarkeit von Seiten zu starten. Ihre Benutzer werden es Ihnen danken:

• Seite Sichtbarkeits API auf Mdn
• Einführung in die Sichtbarkeits API der Seite auf SitePoint

Seitenkonvertierungsereignis

Haben Sie jemals ein Webformular verwendet, das auftaucht, wenn Sie versuchen, die Seite zu verlassen oder zu schließen, und Sie dazu auffordern, nicht gespeicherte Daten zu haben? Dies ist heutzutage auf Seiten, auf denen Sie Einstellungen, Profildetails und mehr ändern. Woher wissen Skripte auf der Seite, dass Sie abreisen? Sie hören sich Pagenereignisse an.

PageHide und seine Partner -Pageshow sind die Hauptdarsteller von Page Conversion -Ereignissen. Wir haben oben gesehen, wofür der erste hauptsächlich verwendet wird. Der Hauptzweck von Pageshow besteht darin, festzustellen, ob die Seite aus dem Cache oder direkt vom Server geladen wird. Dies ist nicht die häufigste Verwendung, aber wenn Sie eine der beiden Funktionen benötigen, lesen Sie die folgenden Ressourcen:

• pageshow auf mdn
• Seite auf Mdn

RequestAnimationFrame

Animation im Web hat einen langen Weg von den frühen <marquee></marquee> und <blink></blink> bis zu Animationsgifs, JQuery -Effekten, zu aktuellen CSS-, SVG-, Leinwand- und WebGL -Animationen zurückgelegt. Eine Konstante all dieser Methoden ist die Notwendigkeit, den Fluss der Animation zu steuern und so reibungslos wie möglich zu gestalten.

Die anfängliche Methode verwendet setInterval und setTimeout, um die Schritte der Animation zu steuern. Das Problem ist, dass die Ergebnisse nicht zuverlässig konsistent sind und die Animation normalerweise rau ist. Aus diesem Grund wurde eine neue Schnittstelle entworfen - RequestAnimationFrame. Der Hauptvorteil dieses Ansatzes besteht darin, dass der Browser mit der Anfrage mit seinem eigenen Zeichenzyklus frei übereinstimmen und damit die Animation erheblich glättet. Zusammen mit seinem Gegenstück CancelAnimationFrame sind diese beiden Methoden die Grundlage für die moderne JavaScript -Animation.

Wie immer finden Sie hier einige Ressourcen, mit denen Sie diese Funktion beherrschen können.

• RequestAnimationFrame on Mdn
• CancelanimationFrame auf mdn
• Einfache Animation mit RequestAnimationFrame auf SitePoint
• auf SitePoint ansehen: Verwenden Sie RequestAnimationFrame für Leistungstests

zeitgesteuerte API

Die Online -Leistung ist heute ein heißes Thema, und jeder versucht sein Bestes, um Ressourcen zu reduzieren, Skripte zu optimieren und das Beste aus den Tools zu nutzen, die sie haben. Es gibt zwei Hauptmethoden, um dieses Problem zu lösen: Netzwerkleistung (die Geschwindigkeit der Bereitstellung von Websites und Ressourcen) und die Benutzerleistung (die Geschwindigkeit der Ausführung von Anwendungen selbst).

Netzwerkleistung wird von zwei APIs bedient: Timing und Ressourcenzeitpunkt. Sie alle bieten alle Arten von Informationen zur Netzwerkleistung wie DNS, CDN, Anfrage und Antwortzeit usw. Der einzige Unterschied besteht darin, dass das Navigationszeitpunkt auf die HTML -Seite selbst abzielt, während das Ressourcenzeitpunkt alle anderen Ressourcen (Bilder, Skripte, Medien usw.) behandelt.

In Bezug auf die Benutzerleistung haben wir eine API: Benutzer -Timing. Diese API behandelt zwei Hauptkonzepte, die als Mark (sehr detaillierter Zeitstempel) und Maß (das Zeitintervall zwischen zwei Markierungen) bezeichnet werden. Verwenden Sie diese Konzepte, um die Laufgeschwindigkeit des Codes zu messen und festzustellen, wo er optimiert werden muss. Leider unterstützt Safari diese API immer noch nicht, so dass Polyfill erforderlich sein kann.

Beherrschen der Verwendung dieser Schnittstellen ist unerlässlich, um eine optimale Leistung Ihrer Website oder Anwendung zu gewährleisten. Deshalb bieten wir Ihnen einige Lernmaterialien an:

• Navigation Timing
  • Navigations -Timing -API auf mdn
  • Analysieren Sie die Seite mit der Navigations -Timing -API auf SitePoint
  das Laden der Seite.
  • Navigation Timing -API auf SitePoint: So analysieren Sie die Seite "Seite"
  effizient analysieren
• Ressourcen -Timing
  • Ressourcen -Timing -API auf mdn
  • Netzwerkleistung mithilfe der Ressourcen -Timing -API im Google Developers Blog
  messen
  Einführung in die Ressourcen -Timing -API auf SitePoint
• Benutzer Timing
  Erkennende Benutzer -Timing -API auf SitePoint
  Benutzer -Timing -API auf HTML5ROCKS
  user-Timing-rum.js und usertiming.js polyfill auf github

typisches Array

JavaScript Typed Arrays sind Array-ähnliche Objekte und bieten eine Möglichkeit, auf Roh-Binärdaten zuzugreifen. Für maximale Flexibilität und Effizienz erfolgt die Implementierung entlang von zwei Konzepten: einem Puffer (Block der Rohdaten) und einer Ansicht (Bereitstellung eines Kontextes, der die Pufferdaten interpretieren kann). Es gibt viele Web -APIs, die typisierte Arrays wie WebGL, Canvas 2D, XMLHTTPrequest2, Datei, Medienquelle oder binäre Websockets verwenden. Wenn Ihr Code solche Techniken behandelt, interessieren Sie sich möglicherweise für die folgenden Ressourcen:

JavaScript Typed Array auf Mdn
Typisches Array: Binärdaten im Browser (HTML5Rocks)

Websockets

Wir haben früher Channel Messaging besprochen und wie zwei verschiedene Skripte direkt miteinander kommunizieren. Websockets ähneln diesem mit mehr Funktionen. Verwenden Sie diese API, um einen anhaltenden Kommunikationskanal zwischen dem Browser und dem Webserver zu erstellen.

Wie HTTP hat das WebSocket -Protokoll auch zwei Versionen: unsicher (ws: // ...) und sicher (WSS: // ...). Es berücksichtigt auch Proxy -Server und Firewalls, durch die Tunnel geöffnet werden. Tatsächlich beginnen WebSocket -Verbindungen mit einer normalen HTTP -Verbindung, um die Kompatibilität mit der vorhandenen Infrastruktur zu gewährleisten.

Websockets sind eine faszinierende Technologie (sie haben sogar eine spezielle Website) und es gibt viel zu lernen. Um Ihnen den Einstieg zu erleichtern, finden Sie hier einige ausgewählte Ressourcen:

• Über WebSocket auf Websocket.org
• Websockets auf mdn
• Einführung in die HTML5 WebSockets -API auf SitePoint

Webarbeiter

standardmäßig werden alle JavaScript -Aufgaben im selben Thread ausgeführt. Dies bedeutet, dass alle Skripte auf der Seite die gleiche Warteschlange zur Verarbeitungszeit teilen müssen. Dies ist gut und einfach, wenn der Prozessor nur einen Kern hat. Moderne CPUs haben jedoch mindestens zwei Kerne, und einige Modelle erreichen sogar 4, 6 oder 8 Kerne. Wäre das nicht schön, wenn einige Aufgaben in separate Fäden verschoben werden können, die von verfügbaren zusätzlichen Kerneln verarbeitet werden können? Deshalb wurden Webarbeiter erfunden.

Verwenden der Web Workers -API können Entwickler benannte Skriptdateien an Mitarbeiter delegieren, die in separaten Threads ausgeführt werden. Der Arbeiter reagiert nur auf das Skript, das es erstellt hat, kommuniziert in zwei Wege über Nachrichten, kann XMLHTTPrequest-Anrufe ausführen und interagiert nicht mit einigen Standardmethoden und Eigenschaften des DOM- oder Fensterobjekts. In der Kategorie Ausnahmeberechnung können wir Datenspeichermechanismen wie WebSockets (die die Verwaltung von Websocket -Verbindungen an Arbeitnehmer zuweisen) oder indexedDB erwähnen. Wenn Sie Ihren eigenen Assistenten haben, um sekundäre Aufgaben zu erledigen, konzentriert sich der Haupt -Thread auf die Ausführung der gesamten Anwendung. Nichts ist besser als diese.

, um mit dieser Funktion (einschließlich einer Liste von Funktionen und Klassen für Webarbeiter verfügbar) zu beginnen) lesen Sie die folgenden Ressourcen:

• Web Workers API auf Mdn
• Funktionen und Klassen, die für Webarbeiter auf MDN
verfügbar sind
• JavaScript -Threading mit HTML5 -Webarbeitern auf SitePoint

xmlhttprequest Advanced Features

Die Einführung von XMLHTTPrequest zeigt eine neue Ära der Webentwicklung an. Daten können jetzt zwischen dem Browser und dem Server ausgetauscht werden, ohne die gesamte Seite neu zu laden. Ajax ist der neue Standard, mit dem jeder eine einzelne Seitenanwendung haben kann.

Diese nützliche Technologie wird weiterentwickelt, was normal ist. Auf diese Weise erhält XHR neue Funktionen, z. B. Dateien -Uploads, Übertragung von Fortschrittsinformationen oder direktes Senden von Formulardaten. Alle diese Merkmale (geringfügige Ausnahmen im Fall von IE11 oder älterem Android) werden nach der Pensionierung von Mainstream -Browsern unterstützt. Weitere Informationen finden Sie unter den folgenden Ressourcen:

• formData auf mdn
• Vereinfachen Sie AJAX mithilfe der HTML5 -Formdata -Schnittstelle auf SitePoint

2. Andere Funktionen

Modernes Web ist mehr als HTML, CSS und JavaScript. Es gibt viele unsichtbare (und unbezahlte) Helden hinter den Kulissen, die hart arbeiten, um unsere Online -Erfahrung so gut wie möglich zu gestalten. Im Folgenden werden wir einige dieser Merkmale diskutieren, die wie die oben genannten nicht bei älteren IE -Browsern verwendet werden können (sie sind für ihre Sicherheitsanfälligkeiten und mangelnde Unterstützung für moderne Merkmale berüchtigt). nicht blockierende JavaScript-Laden mit "Async" und "Defer"

Jeder Webentwickler erfährt, dass Skripte "blockieren" sind und die gesamte Seite blockieren, bis er geladen ist. Wir alle erinnern uns an den Vorschlag, jQuery vor

zu laden. Bei einer einzelnen Seitenanwendung ist dieser Ansatz jedoch nutzlos, da das gesamte Verhalten der Website von JavaScript angetrieben wird. Dies bringt uns zurück zum Ausgangspunkt.

Die Wahrheit ist jedoch, dass in den meisten Fällen Ihre Website oder Anwendung nur einen Teil aller JavaScript benötigt, die sie lädt. Der Rest wird später benötigt, oder sie führen Operationen durch, die das DOM nicht beeinflussen. Der offensichtliche Weg besteht darin, nur die wichtigsten Skripte regelmäßig zu laden und den Rest auf eine Weise zu laden, die die Anwendung nicht negativ beeinflusst. Tatsächlich gibt es zwei solcher Lademethoden.

Die erste Methode besteht darin, das Defer -Attribut zu verwenden, mit dem Skripte markiert werden, die das DOM nicht beeinflussen und nach Parsinieren des Dokuments ausgeführt werden sollen. In den meisten Fällen handhaben diese Skripte mit Benutzerinteraktionen um, sodass sie auf diese Weise sicher geladen werden können. Die zweite Methode verwendet das asynchronisierte Attribut und markiert ein Skript, das, während er parallel geladen wird, sofort nach dem Download ausgeführt wird. Es ist jedoch nicht garantiert, dass die Ladereihenfolge der Ausführungsreihenfolge übereinstimmt.

Alle Vorteile dieser beiden Parameter werden zu einem wichtigen Instrument zur Verbesserung der Website und der Anwendungsleistung. In den folgenden Ressourcen finden Sie weitere Informationen darüber, wie und wann diese Technologie verwendet werden soll:

Rendern -Blockierung JavaScript auf Google Developers

entfernen

• laden nicht blockierender JavaScript mit HTML5-Async und auf SitePoint
aufschieben
Inhaltssicherheitsrichtlinie

Von Anfang an wurde die Sicherheit im Web um das "homologe" Modell basiert, was bedeutet, dass nur Skripte aus derselben Domäne mit einer bestimmten Seite interagieren können. Im Laufe der Zeit müssen wir jedoch Drittanbieter-Skripte in unsere Seiten integrieren: JavaScript-Bibliotheken von CDN, Social-Media-Widgets von Facebook, Google oder Twitter und anderen ähnlichen Fällen. Dies bedeutet, dass wir die Tür öffnen und dem "Gast" -Skript in unseren metaphorischen Innenhof eingehen lassen. Das Problem tritt auf, wenn sich auch böswillige Skripte einschleichen und wie andere Skripte ausgeführt werden-eine Angriffsmethode, die wir alle kennen, die als Cross-Site-Skript oder XSS bezeichnet wird.

Inhaltssicherheitsstrategie ist die Hauptwaffe gegen XSS. Dieser Mechanismus enthält eine Reihe von Richtlinien und Richtlinien, die angeben, welche Skripte ausgeführt werden dürfen, wobei Ressourcen geladen werden können, ob Inline -Stile oder Skripte ausgeführt werden können und so weiter. CSP basiert auf Whitelisten, was bedeutet, dass standardmäßig auf alles verweigert wird und nur auf die angegebenen Ressourcen zugegriffen werden können. Dies bedeutet, dass die Regel, wenn sie fein abgestimmt ist, nicht ausgeführt wird, selbst wenn das böswillige Skript in unsere Website eingefügt wird.

Folgende Ressourcen, die Ihnen helfen können, diesen Mechanismus besser zu verstehen:

• Inhaltssicherheitsrichtlinie Referenz
• Verwenden Sie Inhaltssicherheitsrichtlinien auf SitePoint, um die Websicherheit zu verbessern
• Einführung in Inhaltssicherheitsrichtlinien auf html5rocs

http/2 Protokoll

Von Anfang an wurde das Web im HTTP -Protokoll ausgeführt. Während der erste sehr schnell gewachsen ist, ist HTTP weitgehend gleich geblieben. Im komplexen Ökosystem moderner Websites und Anwendungen kann HTTP zu einem Performance -Engpass werden. Natürlich gibt es einige Techniken und Praktiken, die diesen Prozess optimieren können, aber nur so viel kann getan werden.

Aus diesem Grund wurde die zweite Iteration des Protokolls entwickelt, die als HTTP/2 bezeichnet wird und auf dem SPDY -Protokoll von Google basiert. Es wurde im Februar 2015 genehmigt und die Spezifikation wurde im Mai 2016 als RFC 7540 veröffentlicht. Bisher unterstützen Mainstream -Browser HTTP/2 nur über verschlüsselte Verbindungen, und es ist sehr wahrscheinlich, dass es auf absehbare Zeit so bleiben wird, dass die Standortbesitzer zu HTTPS wechseln.

http/2 Adoption ist nicht nur eine Frage der Änderung einiger Konfigurationseinstellungen. Einige Best Practices für die Verbesserung der HTTP -Leistung können die Leistung bei HTTP/2 beeinflussen. Um festzustellen, ob Ihre Website für die Verwendung von HTTP/2 bereit ist, können Sie die folgenden Ressourcen konsultieren:

• Vorbereitung auf HTTP/2: Ein Leitfaden für Webdesigner und Entwickler (Smashing Magazine)
• Wie sich HTTP/2 Best Practices für Webleistung (neuer Relic -Blog) ändert
• http/2 für Webentwickler (Cloudflare -Blog)

Ressourcen -Tipps: Prefetch

Web Performance ist heute ein heißes Thema und aus gutem Grund. Wie alle Mitarbeiter vor Ort wissen, wird ein großer Teil der Ladezeit der Seite von Ressourcen -Downloads übernommen. Wäre das nicht großartig, wenn Sie Zeit verwenden könnten, nachdem die Seite geladen wird, um die Ressourcen für die nächsten Schritte vorzuladen? Dies ist, wofür die Ressourcenaufforderungen sind.

Ressourcenaufforderungen sind eine Reihe von Anweisungen, die dem Browser mitteilt, dass sie die spezifischen Ressourcen bereitstellen, die in Zukunft benötigt werden. Die Liste enthält fünf Eingabeaufforderungen wie folgt:

• dns-prefetch
• preconnect
• Prefetch
• vorladen
• prerender

von diesen fünf möglichen Optionen ist der einzige mit guter Browserunterstützung vorab. Diese Eingabeaufforderung teilt dem Browser mit, dass der Benutzer nach der aktuellen Seite wahrscheinlich anfordern wird. Dies beschränkt seine Verwendung auf Elemente, die zwischengespeichert werden können. Die Verwendung mit anderen Arten von Ressourcen funktioniert nicht.

Wenn Sie an diesem Thema interessiert sind, finden Sie hier einige Ressourcen, die mehr Details enthalten:

• Ressourcen -Tipps Artikel zu Medium
• Prefetch, Vorlast, Vorschau auf CSS-Tricks
• Ressourcen -Tipps zum KeyCDN -Blog

strenge Übertragungssicherheit

https wird zum neuen Browser -Standard, und immer mehr Websites akzeptieren nur sichere Verbindungen. Normale Verbindungen (auf HTTP) werden normalerweise in die HTTPS -Version umgeleitet und die Dinge gehen wie gewohnt. Dieser Ansatz ist jedoch anfällig für "Man-in-the-Middle" -Angriffe, bei denen stattdessen ein gefälschter Klon der gewünschten Website (normalerweise eine Bankwebsite) umgeleitet wird, um Ihre Anmeldeinformationen zu stehlen.

Hier kommen strenge Header für die Sicherheitssicherheit der Übertragung ins Spiel. Wenn Sie sich zum ersten Mal eine Verbindung zur gewünschten Website über HTTPS herstellen, wird der Header an den Browser gesendet. Wenn Sie das nächste Mal eine Verbindung herstellen, wird der Browser direkt zur HTTP -Version der HTTP -Version direkt zur HTTPS -Version gehen, ohne den Umleitungszyklus zu durchlaufen. Da auf HTTP keine Verbindung hergestellt wird, tritt der oben beschriebene Angriff nicht auf.

Weitere Informationen zu strikten Übertragung von Sicherheitsheadern finden Sie in der folgenden Website:

• http strenge Übertragungssicherheit auf MDN

Geräte -Pixelverhältnis

window.devicepixelRatio ist eine schreibgeschützte Eigenschaft, die das Verhältnis der (vertikalen) Größe eines physischen Pixels auf dem aktuellen Anzeigegerät zur Größe eines CSS-Pixels zurückgibt. Auf diese Weise können Entwickler Bildschirme mit hoher Dichte erkennen (wie das Retina-Display von Apple oder einen High-End-Android-Bildschirm). Bei Verwendung mit Medienabfrage und MatchMedia (wir oben diskutiert) ermöglicht diese Eigenschaft optimierte Ressourcen für die beste Erfahrung.

• window.devicepixelratio auf mdn

Web -Videotrahtspur

Web -Videotrack (oder WebVTT) ist ein Format, mit dem Textuntertitel von Multimedia -Ressourcen markiert werden. Es wird mit HTML5 -Elementen verwendet und ermöglicht die Hinzufügen von Untertiteln, Übersetzungen, Titeln oder Beschreibungen zu Mediengütern (Audio oder Video) synchron. Das Vorhandensein dieser Textinformationen erleichtert den Zugriff auf Medien. <track></track>

Für Anweisungen zum Einstieg mit dieser Funktion finden Sie die folgenden Ressourcen:

webVtt auf mdn
Einführung in WebVTT und
• auf Dev.Opera <track></track>
Anfänger von Trackelementen auf html5rocs

Zusammenfassung

Wir sind hier am Ende dieser Serie, die mit einer einfachen intellektuellen Übung beginnt: "

Altes IE ist weg! ? ". Wir decken eine breite Palette von Themen ab, von Techniken und Praktiken, die nicht mehr benötigt werden, bis zu allem, was wir jetzt ohne Polyfill verzichten können, egal ob es sich um HTML-, CSS- oder Native JavaScript handelt. Wir haben sogar eine breitere Palette von Themen wie Leistungsoptimierung und verbesserte Sicherheit angesprochen.

Sollten Sie jetzt alle Ihren Code neu aufstellen? Wahrscheinlich nicht. Solche Entscheidungen müssen auf der Grundlage des Restbetrags zwischen rekonstituierten Kosten und den Kosten technischer Schulden getroffen werden. Wenn Sie jedoch ein neues Projekt starten, bauen Sie es für die Zukunft und nicht für die Vergangenheit auf.

FAQs (FAQs) zur nativen JavaScript -Entwicklung nach Internet Explorer Retirement

Was ist die Bedeutung der nativen JavaScript -Entwicklung nach dem Internet -Explorer -Pensionierung?

Native JavaScript -Entwicklung nach dem Internet Explorer ist entscheidend, da Entwickler effizientere und effizientere Webanwendungen erstellen können. Mit der Deaktivierung des Internet Explorer sind Entwickler nicht mehr auf die Einschränkungen und Kompatibilitätsprobleme beschränkt, die normalerweise mit diesem Browser verbunden sind. Sie können nun die vollständigen Funktionen von JavaScript, einschließlich der neuesten Funktionen und Updates, nutzen, um dynamische, interaktivere und benutzerfreundlichere Webanwendungen zu erstellen.

Wie kann ich JavaScript in meinem Browser aktivieren?

Das Aktivieren von JavaScript in einem Browser ist ein einfacher Prozess. Für die meisten Browser finden Sie Optionen, um JavaScript im Menü Einstellungen oder Einstellungen zu aktivieren oder zu deaktivieren. In der Regel beinhaltet dies das Navigieren in den Abschnitt "Sicherheit" oder "Datenschutz" und die Suche nach Optionen im Zusammenhang mit JavaScript. Stellen Sie sicher, dass Sie es für ein besseres Browsing -Erlebnis aktivieren.

Was ist der Unterschied zwischen Internet Explorer und JavaScript in anderen Browsern?

Ja, es gibt signifikante Unterschiede in der Funktionsweise von JavaScript in Internet Explorer und anderen Browsern. Internet Explorer verfügt über unterschiedliche JavaScript -Motoren, die häufig zu Kompatibilitätsproblemen und Einschränkungen führen. Moderne Browser wie Chrome, Firefox und Safari verwenden fortschrittlichere JavaScript -Motoren, die die neuesten JavaScript -Funktionen und -standards unterstützen, die die Leistung verbessern und die Kompatibilitätsprobleme verringern.

Was sind die Vorteile der Verwendung des nativen JavaScript anstelle von Bibliotheken oder Frameworks?

Die Verwendung des nativen JavaScripts hat im Vergleich zur Verwendung von Bibliotheken oder Frameworks viele Vorteile. Es ermöglicht eine bessere Leistung, da es keinen Overhead für das Laden und Parsen unnötiger Code gibt. Es bietet auch mehr Kontrolle über den Code, da Entwickler nicht an bestimmte Bibliotheken oder Frameworks gebunden sind. Darüber hinaus können Sie ein natives JavaScript durch das Verständnis und die Verwendung von JavaScript ein tieferes Verständnis der Sprache und ihrer Merkmale vermitteln.

Wie wirkt sich die Behinderung des Internet -Explorers auf die Entwicklung der JavaScript -Entwicklung aus?

Die Deaktivierung von Internet Explorer hat erhebliche Auswirkungen auf die Entwicklung von JavaScript. Entwickler müssen keinen zusätzlichen oder anderen Code mehr schreiben, um die Kompatibilität mit Internet Explorer sicherzustellen. Dies führt zu einem effizienteren Entwicklungsprozess und der Fähigkeit, die volle Funktionalität von JavaScript zu nutzen. Es führt auch zu einer konsistenterer Benutzererfahrung in den Browsern.

Was sind einige der neuesten Funktionen, die ich JavaScript in der Entwicklung verwenden kann?

JavaScript wird ständig aktualisiert und hat neue Funktionen und Verbesserungen hinzugefügt. Einige der neuesten Funktionen umfassen Async/Assait für den Umgang mit asynchronen Operationen, erweiterte Syntax für Erweiterung von Arrays oder anderen iterablen Objekten und Pfeilfunktionen für eine prägnantere Funktionssyntax. Diese Funktionen können Ihre JavaScript -Entwicklung erheblich verbessern und es Ihnen ermöglichen, effizienteren und lesbaren Code zu schreiben.

Wie kann ich sicherstellen, dass mein JavaScript -Code mit allen Browsern kompatibel ist?

Die Gewährleistung der Browserkompatibilität ist ein wichtiger Aspekt der JavaScript -Entwicklung. Eine Möglichkeit, dies zu erreichen, besteht darin, die Funktionserkennung zu verwenden, bei der prüft, ob der Browser des Benutzers die Funktion unterstützt, bevor sie sie verwendet. Ein weiterer Ansatz ist die Verwendung von Polyfill, ein Skript, das neuere Funktionen für ältere Browser bietet, die sie nicht unterstützen.

Was ist die Zukunft der JavaScript -Entwicklung nach dem Ruhestand des Internet Explorer?

Die Zukunft der JavaScript -Entwicklung, nachdem Internet Explorer im Ruhestand verspricht. Mit der Deaktivierung des Internet Explorer können sich Entwickler nun darauf konzentrieren, die vollständigen Funktionen von JavaScript zu nutzen, ohne sich über Kompatibilitätsprobleme zu sorgen. Dies kombiniert mit den kontinuierlichen Aktualisierungen und Verbesserungen der Sprache und kündigte eine Zukunft an, in der JavaScript effizienter, leistungsfähiger und vielseitiger ist.

Was sind einige gute Ressourcen, um mehr über die Entwicklung eines nativen JavaScript -Entwicklung zu erfahren?

Es gibt viele großartige Ressourcen, um mehr über die Entwicklung der einheimischen JavaScript -Entwicklung zu erfahren. Einige beliebte Online -Plattformen sind Mozilla Developer Network (MDN), Freecodecamp und Codecademy. Diese Plattformen bieten umfassende Leitfäden und Tutorials zu JavaScript, die alles von den Grundlagen bis hin zu fortgeschritteneren Themen abdecken.

Wie kann der JavaScript -Code effektiv debuggen?

Debugging ist ein unverzichtbarer Bestandteil der JavaScript -Entwicklung. Die meisten modernen Browser verfügen über integrierte Entwicklungstools, die zum Debuggen verwendet werden können. Mit diesen Tools können Sie den Code durchlaufen, Variablen überprüfen und alle auftreten. Darüber hinaus kann die Verwendung guter Codierungspraktiken wie dem Schreiben sauberer und prägnanter Code und der Annotation des Codes auch den Debugging -Prozess erleichtert.

Das obige ist der detaillierte Inhalt vonNative JavaScript -Entwicklung nach dem Internet Explorer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!