Teilen Sie einige Beispiele für Front-End-Interviewfragen

HTML

* Welche Rolle spielt Doctype? Wie unterscheidet man zwischen striktem Modus und gemischtem Modus? Was bedeuten sie?

1 Die -Deklaration befindet sich zuerst im Dokument, vor dem Dieses Tag kann dem Browser mitteilen, welche HTML- oder XHTML-Spezifikation das Dokument verwendet.

2 Der sogenannte Standardmodus bedeutet, dass der Browser den Code gemäß dem W3C-Standard analysiert und ausführt Methode zum Parsen und Ausführen des Codes. Da verschiedene Browser Code unterschiedlich analysieren und ausführen, nennen wir ihn seltsamen Modus.

3. Ob der Browser beim Parsen den Standardmodus oder den seltsamen Modus verwendet, hängt direkt von der DTD-Deklaration auf Ihrer Webseite ab Veranlassen Sie den Browser, die entsprechende Methode zum Laden und Anzeigen der Webseite zu verwenden und dabei die DTD-Deklaration zu ignorieren, was dazu führt, dass die Webseite in den seltsamen Modus wechselt.

* Warum muss HTML5 nur schreiben?

doctype ist die Abkürzung für den Dokumenttyp. Auf der Seite wird es verwendet, um die von der Seite verwendete Version von xhtml (oder html) anzugeben. Um standardkonforme Seiten zu erstellen, ist die Doctype-Deklaration ein wesentlicher und zentraler Bestandteil. Nur wenn ein korrekter Dokumenttyp ermittelt wird, können das Logo und das CSS in xhtml normal wirksam werden. html teilt dem Browser mit, dass es sich bei dieser Datei um eine Webseitendatei im HTML-Format handelt. Die beiden zusammen

sind die HTML5-Standard-Webseitendeklaration. Das Original war eine lange Zeichenfolge, aber jetzt liegt sie in dieser prägnanten Form vor. Alle Browser, die den Mainstream des HTML5-Standards unterstützen, erkennen diese Erklärung.

* Was sind die Inline-Elemente? Was sind Elemente auf Blockebene? Was sind die Leereelemente?

Inline-Elemente umfassen: a b span img input select strong (Hervorhebungston)

Elemente auf Blockebene umfassen: div ul ol li dl dt dd h1-h6 p

Bekannte leere Elemente:

Wenig bekannte: ; 🎜 >Gemeinsame Blockelemente

(Blockelement) Adresse – Adressblockquote – Blockreferenzzentrum – zentriertes Blockverzeichnis – Verzeichnisliste div – häufig verwendeter Container auf Blockebene, auch die Hauptbezeichnung des CSS-Layouts dl – Definitionslistenfeldsatz - Formularkontrollgruppenformular - Interaktives Formular h1 - Überschrift h2 - Untertitel h3 - Überschrift der Ebene 3 h4 - Überschrift der Ebene 4 h5 - Überschrift der Ebene 5 h6 - Überschrift der Ebene 6 hr - Horizontale Trennlinie isindex - Eingabeaufforderungsmenü - Menüliste noframes - Frames optionaler Inhalt, (Dieser Blockinhalt wird für Browser angezeigt, die kein Frame unterstützen) noscript – optionaler Skriptinhalt (dieser Inhalt wird für Browser angezeigt, die kein Skript unterstützen) ol – Sortierform p – Absatz vorformatierter Text Tabelle – Tabelle ul - nicht sortierte Liste (ungeordnete Liste)

Gemeinsame Inline-Elemente(Inline-Element) a – Ankerabbr – Abkürzungsakronym – erster Buchstabe b – fett (nicht empfohlen) bdo – bidi override big – große Schriftart br – Zeilenumbruch cite – Zitatcode – Computercode (erforderlich beim Zitieren von Quellcode) dfn – Definitionsfeld em – Hervorhebungsschriftart – Schriftarteinstellung (nicht empfohlen) i – kursiv img – Bildeingabe – Eingabefeld kbd – Definition Tastaturtext label – Tabellenbezeichnung q – kurzes Anführungszeichen s – durchgestrichen (nicht empfohlen) samp – Beispiel-Computercode definieren select – Projektauswahl small – kleine Schriftart Textspanne – gemeinsamer Inline-Container, Blöcke innerhalb des Textes definieren durchgestrichene Linie stark – Fett Hervorhebung sub – subscript sup – hochgestellter Textbereich – mehrzeiliges Texteingabefeld tt – Telextext u – Unterstrich var – Variable definieren

Variables Element Variable Der Kontext bestimmt, ob ein Element ein Blockelement oder ein ist Inline-Element [1]. Applet – Java-Applet-Schaltfläche – Schaltfläche Entf – Text löschen Iframe – Inline-Frame-Einfügungen – eingefügte Textkarte – Bildblock-Objekt (Karte) – Objekt-Objekt-Skript – Client-Skript

Leeres Element Denn der Inhalt des HTML-Elements ist der Inhalt zwischen dem Start-Tag und dem End-Tag. Und einige HTML-Elemente haben leeren Inhalt. (leerer Inhalt), diejenigen HTML-Elemente, die leeren Inhalt enthalten, sind leere Elemente. Das leere Element [2] wird im öffnenden Tag geschlossen. Beispiel
ist ein leeres Element ohne schließendes Tag.

* Was ist der Unterschied zwischen der Verwendung von Link und @import beim Importieren von Stilen auf der Seite?

(1) Link ist ein XHTML-Tag. Zusätzlich zum Laden von CSS kann es auch zum Definieren von RSS, zum Definieren von rel-Verbindungsattributen usw. verwendet werden CSS und kann nur beim Laden von CSS verwendet werden. (2) Wenn die Seite geladen wird, wird gleichzeitig der Link geladen und das von @import referenzierte CSS wartet, bis die Seite geladen wird wird geladen;

(3) import Es wird von CSS2.1 vorgeschlagen und kann nur in IE5 oder höher erkannt werden, und der Link ist ein XHTML-Tag, daher gibt es kein Kompatibilitätsproblem; 4): Der Unterschied bei der Verwendung von dom zur Steuerung des Stils. Wenn Sie JavaScript verwenden, um den Dom zu steuern und den Stil zu ändern, können Sie nur das Link-Tag verwenden, da @import nicht vom Dom gesteuert werden kann.

(5): @import kann andere Stylesheets in CSS einführen. Sie können beispielsweise ein Haupt-Stylesheet erstellen und andere Stylesheets in das Haupt-Stylesheet einführen.

* Bitte erläutern Sie Ihr Verständnis des Browserkerns.

Es ist hauptsächlich in zwei Teile unterteilt: Rendering-Engine (Layout-Engineer oder Rendering-Engine) und JS-Engine.

Rendering-Engine: Verantwortlich für den Erhalt des Inhalts der Webseite (HTML, XML, Bilder usw.), die Organisation der Informationen (z. B. Hinzufügen von CSS usw.) und die Berechnung der Anzeigemethode des Webs Seite ausdrucken und dann auf dem Monitor oder Drucker ausgeben. Unterschiedliche Browserkerne haben unterschiedliche grammatikalische Interpretationen von Webseiten, sodass auch die Rendering-Effekte unterschiedlich sind. Alle Webbrowser, E-Mail-Clients und andere Anwendungen, die Webinhalte bearbeiten und anzeigen, benötigen den Kernel.

JS-Engine: Analysiert und führt Javascript aus, um dynamische Effekte auf Webseiten zu erzielen.

Zunächst gab es keine klare Unterscheidung zwischen der Rendering-Engine und der JS-Engine. Später wurde die JS-Engine immer unabhängiger und der Kernel bezog sich tendenziell nur auf die Rendering-Engine.

* Was sind die gängigen Browser-Kernel?

Es gibt vier gängige Kernel:

Trident:

Der vom IE-Browser verwendete Kernel. Dieses Kernelprogramm wurde erstmals 1997 in IE4 verwendet wurde von Microsoft auf Basis des Mosaik-Codes übernommen und wird auch im aktuellen IE9 noch verwendet. Trident ist eigentlich ein offener Kernel und sein Interface-Kernel-Design ist ziemlich ausgereift, sodass viele Browser entstanden sind, die den IE-Kernel anstelle von IE verwenden (wie Maxthon, The World, TT, GreenBrowser, AvantBrowser usw.).

Gecko:

Der Kernel wurde von Netscape 6 übernommen, und später übernahm auch Mozilla Firefox diesen Kernel. Das Merkmal von Gecko ist, dass der Code vollständig offen ist Es hat also einen hohen Entwicklungsstand und Programmierer auf der ganzen Welt können Code dafür schreiben und Funktionen hinzufügen. Der Ursprung der Gecko-Engine hat etwas mit dem IE zu tun. Wie bereits erwähnt, verwendete der IE keine W3C-Standards, was zu Unzufriedenheit bei einigen Entwicklern bei Microsoft führte. Sie gründeten zusammen mit einigen Mitarbeitern von Netscape die Aktualisierung Zeit wurde der Kernel auf Basis des Mosaik-Kernels neu geschrieben und Geckos entwickelt. Tatsächlich ist der Browser mit Gecko-Kern jedoch immer noch Firefox (Firefox) mit den meisten Benutzern, weshalb er manchmal auch Firefox-Kern genannt wird. Darüber hinaus ist Gecko auch ein plattformübergreifender Kernel und kann unter Windows, BSD, Linux und Mac OS X verwendet werden.

Presto:

Der derzeit von Opera verwendete Kernel, der erstmals 2003 in Opera 7 verwendet wurde. Das Merkmal dieser Engine ist, dass die Rendering-Geschwindigkeit optimiert wurde Es handelt sich um den ultimativen Browser-Kern, der derzeit als der mit der schnellsten Geschwindigkeit beim Surfen im Internet gilt. Der Preis dafür ist jedoch der Verlust der Webseitenkompatibilität. Tatsächlich handelt es sich um einen dynamischen Kernel. Der größte Unterschied zu den vorherigen Kerneln besteht darin, dass die gesamte Seite oder ein Teil davon als Reaktion auf Skriptereignisse neu analysiert werden kann. Darüber hinaus weist der Kernel die höchste Geschwindigkeit bei der Ausführung von Javascript auf. Laut Tests unter denselben Bedingungen beträgt die Zeit, die der Presto-Kernel zur Ausführung desselben Javascripts benötigt, nur etwa 1/3 der Zeit, die die Trident- und Gecko-Kernel benötigen (der Trident-Kernel). der langsamste, aber zwischen den beiden gibt es keinen großen Unterschied). Leider ist Presto eine kommerzielle Engine, was die Entwicklung von Presto stark einschränkt.

Webkit: Apples eigener Kernel, der auch der Kernel ist, der von Apples Safari-Browser verwendet wird. Die Webkit-Engine umfasst die WebCore-Satz-Engine und die JavaScriptCore-Parsing-Engine, die beide von den KHTML- und KJS-Engines von KDE abgeleitet sind. Es handelt sich um freie Software, die unter dem GPL-Vertrag lizenziert ist und die Entwicklung von BSD-Systemen unterstützt. Daher ist Webkit auch freie Software und Open Source. Hinsichtlich der Sicherheit gibt es keine Einschränkungen durch IE und Firefox, sodass der Safari-Browser in China immer noch sehr sicher ist. Auch Googles Chrome nutzt Webkit als Kernel. Der WebKit-Kernel wird auch häufig auf Mobiltelefonen verwendet. Beispielsweise basieren die Browser-Kernel-Engine von Googles Gphone und Apples iPhone alle auf WebKit. Das Gleiche gilt für IE Edge von Win 10...

* Was sind die neuen Funktionen von HTML5 und welche Elemente wurden entfernt? Wie gehe ich mit Browserkompatibilitätsproblemen mit neuen HTML5-Tags um? Wie kann man zwischen HTML und HTML5 unterscheiden?

HTML5 ist keine Teilmenge von SGML mehr. Es geht hauptsächlich um das Hinzufügen von Bildern, Standort, Speicherung, Multitasking und anderen Funktionen.

Malleinwand;

Video- und Audioelemente für die Medienwiedergabe;

Lokaler Offline-Speicher localStorage Langzeitspeicherung von Daten, die Daten gehen nach dem Browser nicht verloren geschlossen;

SessionStorage-Daten werden automatisch gelöscht, nachdem der Browser geschlossen wurde

Inhaltselemente mit besserer Semantik, wie Artikel, Fußzeile, Kopfzeile, Navigation, Abschnitt; Steuerelemente, Kalender, Datum, Uhrzeit, E-Mail, URL, Suche;

Neue Technologien Webworker, Websocket, Geolocation;

Entfernte Elemente:

Pure Performance-Elemente: Basefont, Big, Center, Font, S, Strike, TT, U; Elemente, die sich negativ auf die Benutzerfreundlichkeit auswirken: Frame, Frameset, Noframes;

-- Kompatibel: 1 .IE8 /IE7/IE6 unterstützt Tags, die über die document.createElement-Methode generiert wurden. Verwenden Sie diese Funktion, um diesen Browsern die Unterstützung neuer HTML5-Tags zu ermöglichen. 2. Verwenden Sie das html5shim-Framework

- Unterscheidung: Die Art der DOCTYPE-Deklaration ist ein wichtiger Faktor bei der Unterscheidung von HTML- und HTML5-Marken. Darüber hinaus kann sie auch anhand der neuen Struktur- und Funktionselemente unterschieden werden.

* Beschreiben Sie kurz Ihr Verständnis der HTML-Semantik?

Semantisches HTML ist geschriebener HTML-Code, der der Struktur des Inhalts entspricht (Inhaltssemantik) und geeignete Tags auswählt (Codesemantik), was Entwicklern das Lesen und Schreiben erleichtern kann Eleganterer Code, der von Browser-Crawlern und Maschinen gut analysiert wird. 1. Semantisierung ist für SEO von Vorteil und hilft Suchmaschinen-Crawlern, unsere Webseiten besser zu verstehen, wodurch effektivere Informationen erhalten und das Gewicht der Webseiten erhöht werden.

2. Die Struktur der Webseite ist ohne CSS klar erkennbar, was die Lesbarkeit verbessert.

3. Es ist praktisch für die Teamentwicklung und -wartung und kann Entwicklern das Verständnis erleichtern, wodurch die Effizienz und Koordinationsfähigkeiten des Teams verbessert werden.

　4. Unterstützt Browser-Rendering für mehrere Endgeräte.

* Wie verwende ich den HTML5-Offline-Speicher? Können Sie das Funktionsprinzip erklären?

Eine wichtige Funktion von HTML5 ist die Offline-Speicherung. Die sogenannte Offline-Speicherung besteht darin, einige Ressourcendateien lokal zu speichern, sodass nachfolgende Seitenneuladungen in Offline-Situationen lokale Ressourcendateien verwenden Sie können weiterhin auf Webanwendungen zugreifen und gleichzeitig den Offline-Speicher und andere Vorgänge über bestimmte Methoden aktualisieren und löschen (zugehörige Dateien aktualisieren oder zugehörige APIs verwenden).

Verwendung

: 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

#v0.11

CACHE:

js/app.js

css/style.css

NETZWERK:

resource/logo.png

FALLBACK:

//offline.html

(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"></form>
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 .

* Wozu dient der Webseiten-Bestätigungscode? Welche Sicherheitsprobleme werden damit gelöst?

Verhindern Sie böswillige Registrierung und Brute-Force-Cracking. Die sogenannte böswillige Registrierung und Brute-Force-Cracking werden alle mithilfe von Software durchgeführt. Unabhängig davon, wie schnell die manuelle Registrierung ist, müssen Sie die Informationen immer noch einzeln eingeben, was sehr langsam ist und grundsätzlich keine Auswirkungen auf den Server hat. Wenn kein Verifizierungscode für die Registrierung mithilfe der Software vorhanden ist, können Tausende von Threads gleichzeitig ausgeführt und Tausende von Benutzern gleichzeitig registriert werden, wodurch die Datenbank des Servers schnell überfüllt wird und die Betriebseffizienz verringert wird. Wenn eine langweilige Person oder ein Konkurrent einer Website feindlich gesinnt ist, kann diese Methode diese Person leicht lähmen.

* Was ist der Unterschied zwischen tite und h1, der Unterschied zwischen b und strong, der Unterschied zwischen i und em?

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.

Das obige ist der detaillierte Inhalt vonTeilen Sie einige Beispiele für Front-End-Interviewfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!