: Der oben erwähnte HTML5-Offline-Speicher basiert auf einer neu erstellten .appcache-Datei. Über die Analyseliste in dieser Datei werden Ressourcen offline gespeichert, und diese Ressourcen werden wie Cookies gespeichert. Später, wenn das Netzwerk offline ist, zeigt der Browser die Seite anhand der offline gespeicherten Daten an.
(1) Fügen Sie dem Seitenkopf ein Manifest-Attribut hinzu, wie unten beschrieben. (2) Schreiben Sie Offline-Speicherressourcen in die Datei „cache.manifest“ CACHEMANIFEST
(3) Wenn Sie offline sind, bedienen Sie window.applicationCache, um Anforderungen umzusetzen.
* Wie verwaltet und lädt der Browser HTML5-Offline-Speicherressourcen?
Wenn der Browser online ist, stellt er fest, dass der HTML-Header das Manifest-Attribut hat, und fordert beim ersten Mal die Manifestdatei an Um auf die App zuzugreifen, lädt der Browser dann die entsprechenden Ressourcen basierend auf dem Inhalt der Manifestdatei herunter und speichert sie offline. Wenn auf die App zugegriffen wurde und die Ressourcen offline gespeichert wurden, verwendet der Browser die Offline-Ressourcen zum Laden der Seite und vergleicht dann die neue Manifestdatei mit der alten Manifestdatei. Wenn sich die Datei nicht geändert hat, nein Der Vorgang wird ausgeführt. Wenn sich die Datei ändert, werden die Ressourcen in der Datei erneut heruntergeladen und offline gespeichert.
Im Offline-Modus nutzt der Browser direkt die offline gespeicherten Ressourcen.
* Bitte beschreiben Sie den Unterschied zwischen Cookies, sessionStorage und localStorage?
Was sie gemeinsam haben: werden alle browserseitig gespeichert und haben den gleichen Ursprung.
Unterschied: Cookie-Daten werden in der HTTP-Anfrage immer vom selben Ursprung übertragen (auch wenn sie nicht benötigt werden), d. h. das Cookie wird zwischen dem Browser und hin und her weitergeleitet Der Server. SessionStorage und localStorage senden Daten nicht automatisch an den Server, sondern speichern sie nur lokal. Cookie-Daten haben auch das Konzept eines Pfads, der Cookies darauf beschränken kann, nur zu einem bestimmten Pfad zu gehören. Die Speichergrößenbeschränkung ist ebenfalls unterschiedlich. Da jede HTTP-Anfrage Cookies enthält, eignen sie sich nur zum Speichern sehr kleiner Daten, z. B. Sitzungskennungen. Obwohl sessionStorage und localStorage ebenfalls Speichergrößenbeschränkungen haben, sind sie viel größer als Cookies und können 5 MB oder mehr erreichen. Der Gültigkeitszeitraum der Daten ist unterschiedlich. sessionStorage: ist nur gültig, bis das aktuelle Browserfenster geschlossen wird, und kann natürlich nicht beibehalten werden. localStorage: ist immer gültig und wird auch dann gespeichert, wenn das Fenster oder der Browser geschlossen wird Daten; Cookies sind nur gültig, wenn das Cookie gesetzt ist. Es ist bis zum Ablaufdatum gültig, auch wenn das Fenster oder der Browser geschlossen ist. Verschiedene Bereiche, sessionStorage wird nicht in verschiedenen Browserfenstern gemeinsam genutzt, auch nicht auf derselben Seite; localStorage wird in allen Fenstern gleichen Ursprungs gemeinsam genutzt; Web Storage unterstützt einen Ereignisbenachrichtigungsmechanismus, der Benachrichtigungen über Datenaktualisierungen an Listener senden kann. Die API-Schnittstelle von Web Storage ist bequemer zu verwenden.
* Was sind die Vor- und Nachteile von iframe?
Vorteile von iframe:
1. iframe kann die eingebettete Webseite intakt anzeigen.
2. Wenn mehrere Webseiten auf den Iframe verweisen, müssen Sie nur den Inhalt des Iframes ändern, um den Inhalt jeder aufgerufenen Seite zu ändern, was praktisch und schnell ist.
3. Wenn die Webseite den gleichen Header und die gleiche Version hat, kann sie zur Vereinheitlichung des Stils als Seite geschrieben und mit iframe verschachtelt werden, was die Wiederverwendbarkeit des Codes erhöhen kann.
4. Wenn Sie auf langsam ladende Inhalte von Drittanbietern wie Symbole und Werbung stoßen, können diese Probleme durch iframe gelöst werden.
Nachteile von iframe:
1. Es generiert viele Seiten und ist nicht einfach zu verwalten.
2. Die Iframe-Rahmenstruktur kann manchmal verwirrend sein. Es können Bildlaufleisten nach oben, unten, links und rechts angezeigt werden, was die Besucher ablenkt und zu einer schlechten Benutzererfahrung führt.
3. Der Code ist komplex und kann von einigen Suchmaschinen nicht indiziert werden. Dies ist sehr kritisch. Aktuelle Suchmaschinen-Crawler können den Inhalt in Iframes nicht gut verarbeiten, daher ist die Verwendung von Iframes schädlich für die Suchmaschinenoptimierung.
4. Viele mobile Geräte (PDA-Telefone) können den Rahmen nicht vollständig anzeigen und weisen eine schlechte Gerätekompatibilität auf.
5.Iframe-Frameseiten erhöhen die HTTP-Anfrage des Servers, was für große Websites nicht ratsam ist.
Nach so vielen Analysen wird grundsätzlich Ajax anstelle von Iframe verwendet, sodass sich Iframe nach und nach aus der Front-End-Entwicklung zurückgezogen hat.
* Welche Funktion hat Label? Wie wird es verwendet? (Umbruch mit for oder )
label-Tag definiert die Beschriftung (Markierung) für das Eingabeelement. Das
label-Element bietet dem Benutzer keine besonderen Effekte. Es verbessert jedoch die Benutzerfreundlichkeit für Mausbenutzer. Dieses Steuerelement wird ausgelöst, wenn Sie auf den Text innerhalb des Beschriftungselements klicken. Das heißt, wenn der Benutzer die Beschriftung auswählt, richtet der Browser den Fokus automatisch auf das Formularsteuerelement, das sich auf die Beschriftung bezieht.
Es gibt zwei Attribute in Label, die sehr nützlich sind, eines ist FOR und das andere ist ACCESSKEY.
FOR-Attribut:
Funktion: Gibt das HTML-Element an, das an das Label-Tag gebunden werden soll. Wenn Sie auf dieses Tag klicken, erhält das gebundene Element den Fokus.
ACCESSKEY-Attribut:
Funktion: Stellt den Hotkey für den Zugriff auf das an das Label-Tag gebundene Element dar. Wenn Sie den Hotkey drücken, erhält das gebundene Element den Fokus.
* Wie deaktiviere ich die Autovervollständigungsfunktion im HTML5-Formular?
Das Attribut „Autovervollständigung“ gibt an, ob für das Formular die automatische Vervollständigung aktiviert sein soll.
Autocomplete ermöglicht es dem Browser, Eingaben in ein Feld vorherzusagen. Wenn der Benutzer mit der Eingabe in ein Feld beginnt, sollte der Browser Optionen zum Ausfüllen des Felds basierend auf den zuvor eingegebenen Werten anzeigen. <form autocomplete="on/off">
auf Standard. Gibt an, dass die Funktion zur automatischen Vervollständigung aktiviert ist.
off gibt an, dass die automatische Vervollständigung deaktiviert ist.
* Wie implementiert man die Kommunikation zwischen mehreren Registerkarten im Browser? (Alibaba)
Die kommende SharedWorker-API kann in Iframes sogar übertragen werden Daten innerhalb eines Browser-Tabs oder -Fensters. Es wurde vor einigen Jahren in Chrome und vor einiger Zeit in Firefox implementiert, in IE und Safari ist es jedoch immer noch schwer zu finden.
(Für das folgende Anwendungsszenario muss eine elegante Lösung gefunden werden: Angenommen, eine Person besucht Ihre Website. Er meldet sich an, öffnet einen zweiten Tab und wählt in diesem Tab die Option „Abmelden“. Zu diesem Zeitpunkt öffnete die Person die erste Registerkarte Scheint immer noch „angemeldet“ zu sein, aber zu diesem Zeitpunkt werden alle seine Vorgänge entweder auf die Anmeldeseite umgeleitet oder ihn direkt in den Wahnsinn getrieben. Eine attraktivere Lösung besteht darin, zu beurteilen, ob sich der Benutzer abgemeldet hat, und entsprechende Änderungen vorzunehmen Sie können beispielsweise ein Dialogfeld anzeigen, um den Benutzer zur erneuten Authentifizierung aufzufordern, oder die ursprüngliche Anmeldeansicht anzeigen.
Diese Funktion kann über die WebSocket-API implementiert werden, was jedoch etwas kompliziert ist aus einem Maulwurfshügel. Schließlich gibt es keine Möglichkeit, ein Huhn mit einem großen Messer zu töten, also begann ich, nach anderen Methoden der Kreuztabellenkommunikation zu suchen. Das erste, woran ich dachte, war die Verwendung von Cookies, um regelmäßig über setInterval zu überprüfen, ob der Benutzer angemeldet ist. Ich bin mit dieser Lösung nicht zufrieden, da sie viele CPU-Zyklen mit der Prüfung einer Bedingung verschwenden würde, die möglicherweise nie erfüllt wird. Zu diesem Zeitpunkt dachte ich, es wäre besser, einfach „Comet“ (auch als Polling bekannt), serverseitige Ereignisse oder WebSockets zu verwenden.
Ich war immer noch überrascht, als ich herausfand, dass ich auf einem Esel reite, um einen Esel zu finden, denn die Antwort lautete die ganze Zeit localStorage!
Wussten Sie, dass localStorage ein Ereignis auslöst? Insbesondere wird jedes Mal, wenn ein Element in einem anderen Browsing-Kontext hinzugefügt, geändert oder gelöscht wird, ein Ereignis ausgelöst. Tatsächlich bedeutet dies, dass unabhängig davon, welcher Browser-Tab auf localStorage zugreift, alle anderen Tabs dieses Ereignis über das Fensterobjekt abhören können. Immer wenn ein Tab localStorage ändert, wirkt sich dies auf alle anderen Tabs aus, die Ereignisse auslösen. Das heißt, solange wir localStorage einen Wert zuweisen, können wir über Browser-Registerkarten hinweg kommunizieren.
* Wie ist webSocket mit Low-End-Browsern kompatibel? (Ali)
(Das WebSocket-Protokoll ist ein neues Protokoll von HTML5. Es realisiert die Vollduplex-Kommunikation (Vollduplex) zwischen dem Browser und dem Server. Im Browser nur über http Comet kann bis zu einem gewissen Grad eine bidirektionale Kommunikation erreichen, aber die Effizienz ist gering und erfordert eine gute Unterstützung durch den Server. Der Socket und der XML-Socket in Flash können eine echte bidirektionale Kommunikation erreichen Brücke, es kann sein Diese beiden Funktionen werden in Javascript verwendet. Es ist absehbar, dass WebSocket, sobald es im Browser implementiert ist, die beiden oben genannten Technologien ersetzen und weit verbreitet sein wird.)
WebSocket ist derzeit der „einzige“ Browser-Socket Standard, auf den über die im Browser bereitgestellte API zugegriffen wird. Browser mit niedrigerer Version verfügen nicht über den WebSocket-Standard. Dies bedeutet, dass diese Browser es Benutzern nicht ermöglichen, die Socket-Kommunikation über sie zu implementieren. Die Lösung besteht darin, eine Sicherungslösung vorzubereiten für Ajax + serverseitiges Skript.
Andere Lösungen: Adobe Flash Socket, ActiveX HTMLFile (IE), basierend auf Multipart-Codierung
Senden von XHR, basierend auf Long-Polling-XHR .
* Wozu dient die Page Visibility API?
Erkennen Sie anhand des Werts von „visibilityState“, ob die Seite derzeit sichtbar ist, sowie anhand des Zeitpunkts, zu dem die Webseite geöffnet wurde usw.;
Wann ist die Seite sichtbar? auf andere Hintergrundprozesse umgeschaltet, Musik- oder Videowiedergabe automatisch anhalten;
* Wie implementiert man einen kreisförmigen anklickbaren Bereich auf der Seite?
(1) Karte+Bereich oder SVG
(2) Grenzradius
(3) Gibt es einen Punkt, der für pure erforderlich ist js-Implementierung? Einfacher Algorithmus für den Kreis, Abrufen von Mauskoordinaten usw.
* Erzielen Sie das Zeichnen einer 1 Pixel hohen Linie ohne Verwendung von Rändern und behalten Sie den gleichen Effekt in den Modi Quirksmode und CSSCompat verschiedener Browser bei .
Der Unterschied zwischen Tilte und h1
Aus Suchmaschinensicht wird der Titel-Tag zur Beschreibung des Themas dieser Seite verwendet und ist der höchste Punkt eines Webs Gewicht der Seite. Der Titel-Tag erscheint jedoch nicht im Textkörper des Artikels. Das h1-Tag erscheint im Allgemeinen im Hauptteil des Artikels und ist der Titel des Artikels, der den Besuchern angezeigt wird. Daher stehen diese beiden Bezeichnungen nicht nur nicht in Konflikt, sondern stehen auch in einer kooperativen Beziehung zueinander. Ein Artikel muss sowohl einen Titel als auch ein h1-Tag haben, wodurch nicht nur das Thema des Artikels, sondern auch der Titel und die Schlüsselwörter hervorgehoben werden, wodurch der Effekt einer doppelten Optimierung der Website erzielt wird. Im Allgemeinen wird der Inhalt von Titel- und H1-Tags gleich geschrieben, und im Allgemeinen ist es am besten, nur ein H1-Tag für einen Artikel zu verwenden. Zu viele H1-Tags verwirren Suchmaschinen und erschweren das Erkennen des Themas des Artikels.
Der Unterschied zwischen b und strong und der Unterschied zwischen i und em
Tatsächlich besteht der größte Unterschied zwischen diesen beiden Tag-Paaren darin, dass eines für Suchmaschinen und das andere für ist Benutzer. Nehmen wir als Beispiel die Tags b und strong.
Das B-Tag und das Strong-Tag geben uns das subjektive Gefühl, mutig zu sein, aber für Suchmaschinen gibt es keinen Unterschied zwischen dem B-Tag und gewöhnlichem Text, während das Strong-Tag eine hervorhebende Rolle spielt. Mit anderen Worten: Wenn Sie möchten, dass Suchmaschinen denken, dass ein bestimmter Satz von Ihnen wichtig ist, verwenden Sie das starke Tag. Wenn Sie möchten, dass Benutzer nur den Fetteffekt sehen, verwenden Sie das b-Tag. Auf die gleiche Weise funktioniert das em-Tag auch für Suchmaschinen, und das i-Tag ermöglicht Benutzern nur die Anzeige von Kursivschrift.
