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!