Eine Einführung in drei ungewöhnliche nützliche neue HTML5-Funktionen

1. DNS-Vorauflösungscache

Wie wir alle wissen, ist die Auflösung von DNS 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, im Voraus eine DNS-Auflösung für den Domänennamen durch und speichern ihn im Cache, anstatt ihn aufzulösen, wenn Ressourcen angefordert werden müssen. Und die Anwendung dieser Funktion ist wirklich einfach:

<link rel="dns-prefetch" href="http://cdn.staticfile.org/">
<link rel="dns-prefetch" href="//www.google-analytics.com">

Taobao hat diese Technologie angewendet, oben können Sie den Quellcode anzeigen und eine DNS-Auflösung durchführen .

2. Vorabladen von Ressourcen

Es gibt viele Möglichkeiten, Ressourcen vorab zu laden, und CSS-Hintergrundbilder werden zum Vorabladen verwendet Verwenden Sie 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. Nach dem Laden der aktuellen Seite werden die von Ihnen angegebenen Ressourcen später heimlich heruntergeladen, normalerweise JS und CSS Laden Sie auch Seiten wie Bilder herunter:

<link rel="prefetch" href="http://blog.wpjam.com/" />
<link rel="prefetch" href="http://wpjam.qiniudn.com/wpjam/logo.png" />
<link rel="prefetch alternate stylesheet" href="mozspecific.css" />

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

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 Sie sofort.

<link rel="prerender" href="http://blog.wpjam.com/" />

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 öffnen wird (die Suchergebnisseite), sodass sie dies tun können, wenn der Benutzer den Suchinhalt eingibt Die Ressourcen der Suchergebnisseite 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 so schreiben folgt:

<link rel="prefetch prerender" href="http://blog.wpjam.com" />

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. Download-Attribut

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 es tatsächlich direkt herunterladen, anstatt es im Browser anzuzeigen. In diesem Fall können Sie dieses Attribut hinzufügen und der Attributwert wird die heruntergeladene Datei umbenennen:

<a href="downloadpdf.php" download="download.pdf">点击直接下载并保存成 download.pdf 文件</a>

Wenn Sie Sind sicher, dass Benutzer diese Ressource auf jeden Fall herunterladen werden, daher 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 mit Ihnen teilen.

Weitere Einführungen in drei ungewöhnliche praktische neue HTML5-Funktionen finden Sie auf der chinesischen PHP-Website für verwandte Artikel!