Ein Anfänger-Leitfaden zu HTML5 Cross-Browser-Polyfills

Schlüsselpunkte

• Polyfill ist ein Tool, mit dem Entwickler diese Funktionen in älteren Browsern verwenden können, die keine modernen Webfunktionen unterstützen, um sicherzustellen, dass Benutzer dieser Browser weiterhin auf die Website zugreifen und sie verwenden können, ohne Funktionen oder Erfahrung zu verlieren.
• polyfill.io ist ein Open -Source -Projekt, das die Polyfill -Bibliothek auf Bedarf anbietet und es Entwicklern ermöglicht, die neuesten Standards zu verwenden und gleichzeitig die Kompatibilität mit älteren Browsern aufrechtzuerhalten. Es liest den HTTP-Header der Benutzer-Agent und liefert nur die erforderliche Polyfill, wodurch das Aufblähen moderner Browser verringert wird.
• Während Polyfill moderne Merkmale in älteren Browsern ermöglicht, hat es auch einige potenzielle Nachteile, z. B. das Gewicht der Webseite, die die Ladezeit verlangsamen können. Zu seiner beabsichtigten Zwecke der Polyfill, die zu Inkonsistenzen oder Fehlern führt.

Webseiten entwickeln sich rasant. Neue Frameworks, Tools und sogar Sprachen entstehen nacheinander. Viele Entwickler sind jedoch der Meinung, dass sie mit langsamster Geschwindigkeit der Benutzer vorwärts gehen müssen. Moderne Browser sind „immergrün“ - sie werden automatisch im Hintergrund aktualisiert, erfordern keine Berechtigungsanfragen und haben große Fortschritte bei der Verbesserung neuer APIs erzielt.

selbst moderne Browser implementieren jedoch nicht alle Funktionen gleichzeitig. Es ist frustrierend, Artikel über modernste Technologien in der modernen Entwicklung zu lesen und festzustellen, dass diese Technologien in den kommenden Jahren nicht verfügbar sein werden. Vielleicht haben Sie die Analysedaten der Website überprüft und festgestellt, dass noch Benutzer IE9 verwenden? Sollten Sie Code wie Sie im Jahr 2011 schreiben oder alles an JQuery oder ein Framework delegieren? Es gibt eine andere Option. Das ist Polyfill .

Was ist Polyfill? Warum brauchen wir sie?

Remy Sharp hat diesen Begriff in einem Buch- und Blog -Beitrag von 2009 geprägt. Wenn diese Funktion im Browser vorhanden ist, ermöglicht Polyfill den Browser, seine Operationen auszuführen. Sie füllen die Verwundbarkeit älterer Browser aus, die fehlenden Funktionen, die wir heute verwenden möchten. Es verwendet nicht einheimischen Code, um native APIs zu kopieren.

Was sind die fehlenden Funktionen, über die wir sprechen?

2009 wurde ECMAScript Version 5 veröffentlicht. Dies ist ein großer und radikaler Fortschritt für die Sprache. ECMAScript 2015 brachte auch ähnliche größere Updates mit. In Zukunft werden Verbesserungen an dieser Sprache schrittweise und jedes Jahr stattfinden. Dies ist eine aufregende Zeit mit neuen Funktionen, die ständig der Sprache hinzugefügt werden. Zusätzlich zur Kernsprache selbst gibt es verschiedene APIs für DOM- und Webplattformen. Um die Unterschiede zwischen modernen und älteren Browsern hervorzuheben, finden Sie hier einen Vergleich der neuesten Chrome -Version mit Internet Explorer 9 (einige Unternehmen, die immer noch bedauerlicherweise obligatorisch unterstützt werden). Es gibt auch eine Tabelle, die Unterstützung für ECMascript 6 zeigt. Die zweite Tabelle zeichnet sich nur auf IE 11 zurück, und wie Sie sehen können, unterstützt sie fast keine ES6 -Funktionen. Dies sind viele fehlende Funktionen ...

Polyfill und Übersetzung

Aus der obigen Tabelle ist daher klar, dass wir unseren Code übersetzen müssen. Es braucht Ihre glänzende neue Syntax und gibt altmodisches ECMascript 5 aus. Wenn Sie Pfeilfunktionen, Async/Warten-, Ruhe- und Verbreitungsparameter, Klassen usw. in Ihrem Code verwenden möchten, müssen Sie Tools wie Babel verwenden, um Ihren ES6 -Code in ES5 zu übersetzen. Sie können jedoch die Syntax von JavaScript nicht erfassen. Während Babel Ihre Pfeilfunktionen in regelmäßige Funktionen umwandelt, fügt Polyfill Methoden zu globalen Umfang und nativen Prototypen hinzu. Babel liefert ein eigenes ES6-Polyfill, das auf der Babel-Website feststellt Generatorfunktionen. Aber es vermisst viel. Vielleicht verwenden Sie die Classlist -API, um Klassen hinzuzufügen und zu entfernen oder MatchMedia für Medienabfragen zu verwenden. Sie müssen jedoch immer noch IE9 unterstützen. Glücklicherweise gibt es einen Service, der alles Babel -Polyfill -Cover und mehr bietet.

Vereinfachen Sie Ihr Leben mit Polyfill.io

polyfill.io ist ein Open -Source -Projekt, das von der Financial Times entwickelt wurde. Derzeit erhält es bis zu 204 Millionen Anfragen pro Tag und nennt sich eine "Polyfill -Spezifikationsbibliothek". Mit diesem On-Demand-Polyfill-System können Sie durchsuchen, kann ich , die Achselzucken verwenden, die neuesten Standards verwenden und immer noch mit älteren Browsern kompatibel sind.

Idealerweise sollten wir nur Polyfillfunktionen, die wir tatsächlich verwendet haben, und nur die Polyfills senden, die ein bestimmter Browser tatsächlich benötigt. Polyfill.io kann beide Anforderungen erfüllen. Der Service liest den HTTP-Header des Benutzer-Agent so, dass er nur den erforderlichen Inhalten dient, anstatt aufgeblähte Dateien für modernen Browsers bereitzustellen. Der neue Browser erhält fast leere Dateien und die ältere Version von IE erhält viel Code. Sie können das Gewicht des an die alten Maschine gesendeten Codes reduzieren, indem Sie die Liste der Funktionen angeben, die Sie in der Abfragezeichenfolge verwenden. Wenn ausgelassen wird, wird eine Reihe von Standardwerten verwendet. Die Verwendung des Dienstes erfordert eine zusätzliche HTTP -Anfrage, aber meiner Meinung nach lohnt sich die Benutzerfreundlichkeit. Der Google -Ingenieur Philip Walton hat seine eigene Perspektive auf Polyfill und Leistung, was es wert ist, gelesen zu werden, wenn Sie sich Sorgen über zusätzliche Anfragen machen.

Was bedeckt es nicht?

polyfill.io ist sehr umfassend und enthält einige hochmoderne Browser-APIs wie Abruf und Versprechen. Es gibt jedoch viele Polyfills, mit denen Sie neue Technologien verwenden können. Am aufregendsten sind Webkomponenten, ein potenziell revolutionärer Fortschritt der Front-End-Entwicklung, der Stileinkapselung und leicht zu resesionsübergreifende Funktionen bietet. Cross-Browser-Unterstützung kommt endlich. Google treibt sein Polymerprojekt hart an, was im Grunde ein JavaScript -Framework ist, das auf einer großen Polyfill aufgebaut ist. Webkomponenten sollten diesem Framework jedoch nicht gleichwertig sein, da Webkomponenten selbst ein großes Potenzial haben. Sie können Komponenten ohne Polymer verwenden, aber der volle Umfang der API wurde noch nicht kopiert. Die Webanimationen-API bietet eine effiziente bibliotheksfreie Möglichkeit, Animationen mit JavaScript zu erstellen. Die Browser -Unterstützung ist noch nicht sehr gut, aber Shim ist zuverlässig genug, dass ich diese Technologie zuversichtlich für Animationen auf allen Produktionsstandorten verwendet habe, an denen ich beteiligt war. Es bietet zwei Optionen - eine, um die derzeit in bestimmten Browsern erhältlichen Funktionen auszufüllen. Ein weiteres Merkmal, das noch nicht abgeschlossen wurde, was mich zu meinem letzten Thema gebracht hat ...

"ProlyFills": Testen aufkommender APIs

und ProlyFills - ein spekulatives Schim für die API, die erscheinen kann. Die unveröffentlichten Merkmale von

Polyfill werden als Proof of Concept immer häufiger und sind interessant, um die neuesten Technologien für die Front-End-Entwicklung auszuprobieren. Vielleicht möchten Sie die von der beliebten RXJS -Bibliothek inspirierten Observablen -Empfehlungen testen? Dafür gibt es eine Prolyfill. Der Versuch neuer Technologien ist einer der aufregendsten Teile eines Entwicklers.

Schlussfolgerung

Das war's. Wir haben gelernt, was Polyfills sind, warum sie notwendig sind, wie man Polyfills extrahiert, die Sie möglicherweise von Polyfill.io benötigen, und wie Polyfill noch keine Funktionen veröffentlicht hat. Aber was ist mit dir? Verwenden Sie nur Sprachfunktionen, die in allen Browsern verfügbar sind, die Sie unterstützen? Oder haben Sie modernen Code geschrieben und dann Polyfill verwendet, um es in älteren Browsern zum Laufen zu bringen? Was ist der älteste Browser, den Sie unterstützen müssen? Bitte lassen Sie es mich in den Kommentaren unten wissen.

Dieser Artikel wurde von Graham Cox von Experten überprüft. Vielen Dank an alle SitePoint -Peer -Rezensenten, die SidePoint -Inhalte für den Besten erhalten haben!

FAQs über HTML5 Cross-Browser-Polyfill

Was ist der Zweck der Verwendung von HTML5 Cross-Browser-Polyfill?

HTML5 Cross-Browser-Polyfill wird verwendet, um moderne Webfunktionen in älteren Browsern zu ermöglichen, die sie selbst nicht unterstützen. Sie fungieren als Fallback -Funktionen und bieten die gleiche Funktionalität wie moderne Browser. Dies stellt sicher, dass Benutzer älterer Browser weiterhin auf die Website oder Webanwendung zugreifen und sie nutzen können, ohne Funktionalität oder Erfahrung zu verlieren.

So implementieren Sie Polyfill in meinem Webprojekt?

Die Implementierung von Polyfill in einem Webprojekt besteht aus mehreren Schritten. Zunächst müssen Sie feststellen, welche Funktionalität Sie Polyfill haben möchten. Als nächstes müssen Sie eine geeignete Polyfill finden, um die Funktion bereitzustellen. Dies kann durchgeführt werden, indem Sie online nach einer Polyfill -Bibliothek oder einem Repository suchen. Sobald Sie die entsprechende Polyfill gefunden haben, können Sie sie in Ihr Projekt aufnehmen, indem Sie sie mit Skript -Tags zur HTML -Datei hinzufügen.

Was sind die potenziellen Probleme oder Nachteile der Verwendung von Polyfill?

Während Polyfills sehr nützlich sind, haben sie einige potenzielle Nachteile. Eines der Hauptprobleme ist die Leistung. Polyfill fügt der Seite zusätzliches Gewicht hinzu, was die Ladezeit verlangsamen und die Benutzererfahrung negativ beeinflusst. Außerdem sind nicht alle Polyfills gleich. Einige kopieren möglicherweise nicht vollständig oder genau, was sie für Polyfill ausgelegt haben, was zu Inkonsistenzen oder Fehlern führen kann.

Wie wähle ich die richtige Polyfill für meine Bedürfnisse aus?

Wählen Sie die rechte Polyfill, die von mehreren Faktoren abhängt. Zunächst müssen Sie überlegen, was Sie Polyfill ausprobieren, und eine Polyfonie finden, die seine Funktionalität genau wiederholt. Sie sollten auch die Browser in Betracht ziehen, die Sie abzielen möchten, und sicherstellen, dass Polyfill sie unterstützt. Schließlich sollten Sie die Größe und Leistung von Polyfills berücksichtigen, da diese die Ladezeit und die Gesamtleistung Ihrer Website beeinflussen können.

Kann ich meine eigene Polyfill erstellen?

Ja, Sie können Ihre eigene Polyfill erstellen. Dies beinhaltet das Schreiben eines Skripts, das überprüft, ob der Browser eine bestimmte Funktion unterstützt, und es bietet es, wenn der Browser dies nicht tut. Das Erstellen Ihrer eigenen Polyfille kann jedoch komplex und zeitaufwändig sein, und es ist oft einfacher und effizienter, eine vorhandene Polyfüllung zu verwenden.

Was stehen die beliebten Bibliotheken oder Ressourcen zur Verfügung, um Polyfills zu finden?

Es stehen mehrere beliebte Bibliotheken und Ressourcen zur Verfügung, um Polyfills zu finden. Dazu gehören Polyfill.io, der einen Service bietet, der automatisch von der Browser erforderlich ist, die eine Reihe von Polyfills und Github-Repository-HTML5-Cross-Browser-Polyfill enthält, eine umfassende Liste von Polyfills.

Wie testet man, ob Polyfill ordnungsgemäß funktioniert?

Testen von Polyfill umfasst die Überprüfung, ob die Funktionen für die ordnungsgemäße Arbeit im Browser, auf den Sie abzielen möchten, ordnungsgemäß funktioniert. Dies kann durch die Verwendung des Browser -Testwerkzeugs durchgeführt oder die Funktion in verschiedenen Browsern manuell getestet werden. Wenn die Funktion wie erwartet funktioniert, funktioniert Polyfill ordnungsgemäß.

Kann Polyfill mit JavaScript -Frameworks wie React oder Winkel verwendet werden?

Ja, Polyfill kann mit JavaScript -Frameworks wie React oder Winkel verwendet werden. Tatsächlich empfehlen diese Frameworks häufig bestimmte Polyfills, um eine optimale Kompatibilität und Leistung zu erzielen. Der Prozess der Implementierung von Polyfill mit diesen Frameworks ähnelt der Implementierung von Polyfill in einem regulären Webprojekt.

Ist Polyfill eine langfristige Lösung für Probleme mit dem Browser-Kompatibilität?

Polyfill ist eher eine kurzfristige Lösung für das Problem der Browserkompatibilität. Sie werden verwendet, um die Support -Lücken des Browsers für bestimmte Funktionen zu füllen, bis der Browser sie einholt und nativ unterstützt. Wenn sich die Browser weiterentwickeln und aktualisieren, nimmt die Nachfrage nach bestimmten Polyfills ab.

Was ist der Unterschied zwischen Polyfill und Shim?

Polyfill und Shim werden verwendet, um Sicherungsfunktionen für Funktionen bereitzustellen, die vom Browser nicht unterstützt werden. Shim bietet jedoch in der Regel Fallback -Funktionen für fehlende APIs durch die Verwendung verschiedener vorhandener APIs, während Polyfill neue Implementierungen bereitstellt, die der Browser so verwenden kann, als wäre er nativ.

Das obige ist der detaillierte Inhalt vonEin Anfänger-Leitfaden zu HTML5 Cross-Browser-Polyfills. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!