Eine Einführung in drei ungewöhnliche praktische neue HTML5-Funktionen_Erfahrungsaustausch

1. DNS-Vorauflösungscache

Wie wir alle wissen, ist die DNS-Auflösung ein wichtiger Teil der Website-Leistungsoptimierung. Obwohl die Ladezeit nicht zu lang ist, ist es schwierig, sie zu komprimieren. Insbesondere bei großen Websites, die mehrere CDN-Domänennamen zum Laden von Ressourcen verwenden, um Ressourcen gleichzeitig herunterzuladen, muss die DNS-Auflösungskonvertierung des CDN-Domänennamens vor dem Laden jeder Ressource durchgeführt werden.
Wenn das DNS-Vorladen verwendet wird, führen Browser, die diese Funktion unterstützen, die DNS-Auflösung des Domänennamens im Voraus durch und speichern ihn im Cache, anstatt ihn aufzulösen, wenn Ressourcen angefordert werden müssen. Und die Anwendung dieser Funktion ist wirklich einfach:

Code kopieren Der Code lautet wie folgt:

Taobao hat diese Technologie angewendet. Sie können Taobao öffnen und den Quellcode anzeigen. Oben führen einige ihrer CDN-Server DNS-Auflösung und Caching durch.

2. Vorladen der Ressourcen

Es gibt viele Möglichkeiten, Ressourcen vorab zu laden, z. B. das allgemeine Vorladen von Bildern, zum Vorladen werden CSS-Hintergrundbilder verwendet, und die meisten davon verwenden immer noch JS. Derzeit bietet HTML5 eine spezielle Methode zum Vorladen von Ressourcen mit zwei Attributen: Prefetch (Prefetching) und Prerender (Prerendering), die von den Browsern Firefox bzw. Chrome unterstützt werden.

1).PREFETCH-Vorlesen
Das Vorlesen ist ein sehr häufiges Vorlesen von Ressourcen. Nachdem die aktuelle Seite geladen wurde, werden die von Ihnen angegebenen Ressourcen später heimlich heruntergeladen, normalerweise JS, CSS und Bilder Laden Sie die Seite herunter:

Code kopieren Der Code lautet wie folgt:

Beachten Sie, dass diese Funktion derzeit vom Firefox-Browser unterstützt wird.

2).PRERENDER Pre-Rendering
Dies ist noch leistungsfähiger. Es lädt es nicht nur heimlich im Voraus herunter, sondern rendert es auch für Sie. Wenn der Benutzer auf den Link klickt, wird es Ihnen sofort angezeigt.

Code kopieren Der Code lautet wie folgt:

Beachten Sie, dass Chrome diese Funktion derzeit unterstützt.

Suchmaschinen benötigen diese Vorlesefunktion tatsächlich am meisten, da sie sehr sicher sind, welche Seite der Benutzer als Nächstes öffnet (die Suchergebnisseite), sodass sie den Suchinhalt vorlesen können, wenn der Benutzer sie eingibt Die Suche im Voraus. Die Ressourcen auf der Ergebnisseite werden im Voraus geladen, und nach der Anwendung ist der Effekt sehr offensichtlich.

Derzeit ist die Kompatibilität anscheinend nur von Chrome und Firefox unterstützt und die verwendeten rel-Attribute sind unterschiedlich. Wenn Sie mit zwei Browsern gleichzeitig kompatibel sein möchten, können Sie es wie folgt schreiben 🎜>

Code kopieren Der Code lautet wie folgt:

Darüber hinaus können Ressourcen aus Sicherheitsgründen natürlich nicht domänenübergreifend vorgeladen werden und dürfen nicht im CDN verwendet werden.

3. Attribut herunterladen

Das Download-Attribut von HTML5 wird verwendet, um den Browser zu zwingen, die entsprechende Datei herunterzuladen, anstatt sie zu öffnen. Browser wie Chrome und Firefox sind zu leistungsfähig, möglicherweise um das Benutzererlebnis zu verbessern, wenn die vom Benutzer angeklickte Ressourcendatei von ihnen erkannt werden kann (z. B. werden PDFs direkt im Browser geöffnet, und Medien wie MP3 und MP4 wird direkt im Browser abgespielt) Player-Wiedergabe). Aber manchmal möchte der Benutzer die Datei tatsächlich direkt herunterladen, anstatt sie im Browser anzuzeigen. In diesem Fall kann dieses Attribut hinzugefügt werden, und der Attributwert benennt die heruntergeladene Datei um:

Code kopieren Der Code lautet wie folgt:

Klicken zum Herunterladen und direkten Speichern in der Datei download.pdf

Wenn Sie sicher sind, dass der Benutzer diese Ressource definitiv herunterladen wird, können Sie dieses Attribut hinzufügen und auch JS verwenden oder den Namen der Datei, die Sie speichern möchten, manuell ändern.

HTML5 hat viele andere Funktionen, aber nachdem ich lange Zeit Bücher und verschiedene Materialien gelesen habe, sehe ich die oben genannten drei praktischeren Attribute selten, deshalb möchte ich sie gerne teilen.