Zehn der neuesten Front-End-Interviewfragen im Jahr 2018

Dieses Mal bringe ich Ihnen die neuesten Front-End-Interviewfragen im Jahr 2018. Wir wissen, dass Interviews ein unverzichtbarer Bestandteil der Front-End-Arbeit sind. Dieses Mal werden die häufigsten Front-End-Interviewfragen sortiert und zusammengefasst, um Ihnen zu helfen durch das Front-End-Interview. Großes Problem. Werfen wir einen Blick darauf.

[Verwandte Empfehlungen: Front-End-Interviewfragen (2020)]

1. Bitte beschreiben Sie den Unterschied zwischen Cookies, Sitzung Storage und localStorage .

Softwareprogrammierung hofft, einige nützliche Daten auf irgendeine Weise dauerhaft zu speichern. Bei der Netzwerkprogrammierung wird diese Aufgabe im Allgemeinen der serverseitigen Datenbank oder browserseitigen Cookies übertragen. Mit dem Aufkommen von HTML5 gibt es für die Webentwicklung zwei Optionen: Web Storage und Web SQL Database. WebStorage gibt es in zwei Formen: LocalStorage (lokaler Speicher) und SessionStorage (Sitzungsspeicher). Beide Methoden ermöglichen es Entwicklern, mit von js festgelegten Schlüssel-Wert-Paaren zu arbeiten und diese beim Neuladen verschiedener Seiten zu lesen. Dies ähnelt Cookies.

1: Cookie-Daten werden in der HTTP-Anfrage immer vom selben Ursprung übertragen (auch wenn sie nicht benötigt werden), das heißt, das Cookie wird zwischen dem Browser und dem Server hin und her weitergeleitet. 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.

2: 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.

3: Die Gültigkeitsdauer 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 ist geschlossen, daher werden sie als dauerhafte Daten verwendet; Cookies sind nur bis zur eingestellten Cookie-Ablaufzeit gültig, auch wenn das Fenster oder der Browser geschlossen ist.

4: Verschiedene Bereiche, sessionStorage wird nicht in verschiedenen Browserfenstern gemeinsam genutzt, auch wenn localStorage in allen homologen Fenstern gemeinsam genutzt wird.

5: Web Storage unterstützt einen Ereignisbenachrichtigungsmechanismus, der Datenaktualisierungsbenachrichtigungen an Listener senden kann.

6: Die API-Schnittstelle von Web Storage ist bequemer zu verwenden.

2. Bitte erläutern Sie den Unterschied zwischen <script> und <script defer> <p><strong>Die wichtigste Möglichkeit, </strong>Javascript</p>-Code in eine HTML-Seite einzufügen, ist das Skript-Tag. Es gibt zwei Formen: Die erste besteht darin, JS-Code direkt zwischen Skript-Tags einzufügen, und die zweite besteht darin, externe JS-Dateien über das src-Attribut einzuführen. Da der Interpreter das Rendern der restlichen Seite während der Analyse und Ausführung von JS-Code blockiert, verursachen Seiten mit einer großen Menge an JS-Code lange Zeiträume mit Leerzeichen und Verzögerungen im Browser. Um dieses Problem zu vermeiden, Es wird empfohlen, alle JS-Referenzen vor dem </body>-Tag einzufügen. <p><a href="http://www.php.cn/wiki/48.html" target="_blank">Das Skript-Tag hat zwei Attribute, „defer“ und „async“, daher ist die Verwendung des Skript-Tags in drei Situationen unterteilt: </a></p>1.<script src="example.js"> < /script><p>Ohne Verzögerungs- oder Async-Attribute lädt der Browser das entsprechende Skript sofort und führt es aus. Das heißt, bevor das Dokument nach dem Skript-Tag gerendert wird, wartet es nicht auf die anschließend geladenen Dokumentelemente und beginnt mit dem Laden und Ausführen dieser, sobald es gelesen wird. Dadurch wird das Laden nachfolgender Dokumente blockiert </p>2.<script async src ="example.js"></script>

Mit dem async-Attribut bedeutet es, dass das Laden und Rendern nachfolgender Dokumente sowie das Laden und Ausführen von js-Skripten erfolgt parallel durchgeführt, also asynchrone Ausführung;

3.

Mit dem defer-Attribut der Prozess des Ladens nachfolgender Dokumente und das Laden von JS-Skripten (zu diesem Zeitpunkt nur Laden, aber keine Ausführung) erfolgen parallel (asynchron). Die Ausführung des JS-Skripts muss warten, bis alle Elemente des Dokuments analysiert sind und bevor das DOMContentLoaded-Ereignis ausgelöst wird hingerichtet.

3. Warum wird normalerweise empfohlen, CSS zwischen zu platzieren? Wissen Sie, was die Ausnahmen sind?

Wenn Javascript im Kopf platziert wird, wird es zuerst analysiert, aber der Körper wurde zu diesem Zeitpunkt noch nicht analysiert. (Herkömmliche HTML-Strukturen haben einen Kopf vorne und einen Körper hinten.) Wenn der JS-Code des Kopfes einen Parameter übergeben muss (der Parameter wird nur übergeben, wenn die Methode im Körper aufgerufen wird), und der Parameter muss sein Wird aufgerufen, um eine Reihe von Vorgängen auszuführen, wird zu diesem Zeitpunkt definitiv ein Fehler gemeldet, da der Parameter der Funktion undefiniert (undefiniert) ist. Warum sehen wir oft, dass viele Leute JS-Skripte in den Kopf einbauen, ohne sich um Probleme zu kümmern? Denn wenn Sie Javascript in den Kopf einfügen, binden Sie normalerweise einen Listener. Nachdem alle HTML-Dokumente

analysiert wurden, wird der Code

ausgeführt.

4. Progressives HTML-Rendering

Sie müssen dem Browser so früh wie möglich HTML-Bytes zur Verfügung stellen.
Zum Beispiel: Eine Anfrage geht ein und (idealerweise) werden Ihre Daten zwischengespeichert, damit der Server sie schnell abrufen kann. Der Browser beginnt dann, die Daten zu analysieren und auf dem Bildschirm darzustellen.
Für diesen WebPageTest haben wir den ersten Bildschirm in 1,5 Sekunden erhalten, aber wie Sie sehen können, war nicht alles enthalten. Es enthält genügend Inhalt, um Ihnen das Durchsuchen der Seite oder das Auschecken der Urlaubsangebote zu erleichtern.
Nach 3,5 Sekunden lädt ein weiterer Abschnitt weitere Transaktionen. Nach 6,5 Sekunden wird immer noch etwas geladen! Tatsächlich dauerte das Laden der gesamten Seite bis zu 18 Sekunden. Kannst du so lange warten? Ich bezweifle es!
Wenn Amazon sich auf das langsamste Laden von Seiten konzentriert, wird jemand sauer sein. Sie konzentrieren sich darauf, die wichtigsten Bytes im frühesten Paket zu senden. Gehen wir noch einen Schritt weiter, könnten wir das erste Paket mit den wichtigsten Bytes vollstopfen. Ich wette, sie konzentrieren sich auch darauf, Ihnen diese Bytes so schnell wie möglich zukommen zu lassen.

5. Der Unterschied zwischen Klassen und IDs in CSS.

Beim Definieren eines Stils im Stylesheet können Sie entweder eine ID oder eine Klasse definieren.
Beim Schreiben in CSS-Dateien wird der ID das Präfix „#“ vorangestellt.
Die ID kann nur einmal auf einer Seite verwendet werden.
ID ist eine Bezeichnung, die zur Unterscheidung verschiedener Strukturen und Inhalte verwendet wird, genau wie ein Name. Wenn sich zwei Personen mit demselben Namen in einem Raum befinden, kommt es zu Verwirrung Inhalt, genau wie ein Kleidungsstück;
Aktuelle Browser erlauben immer noch die Verwendung mehrerer identischer IDs und können unter normalen Umständen normal angezeigt werden. Wenn Sie jedoch JavaScript verwenden müssen, um Divs über IDs zu steuern .
Konzeptionell sind sie unterschiedlich: id findet zuerst die Struktur/den Inhalt und definiert dann einen Stil dafür; die Klasse definiert zuerst einen Stil und wendet ihn dann auf mehrere Strukturen/Inhalte an.

6. Was ist der Unterschied zwischen „Zurücksetzen“ und „Normalisieren“ von CSS? Wie würden Sie sich entscheiden und warum?

reset.css kann die Standardeigenschaften des Browsers zurücksetzen. Verschiedene Browser haben unterschiedliche Stile und ein Zurücksetzen kann sie vereinheitlichen. Beispielsweise unterscheidet sich die Schaltflächenanzeige im IE-Browser von der im FF-Browser. Sie können den Stil vereinheitlichen und den gleichen Gedanken durch Zurücksetzen anzeigen. Allerdings sind viele Resets unnötig, da zu viele Resets die Belastung für den Browser beim Rendern der Seite erhöhen. Beispielsweise sollten wir keine ungültigen Attribute für Inline-Elemente festlegen und Breite und Höhe für die Spanne festlegen, da sonst der Rand nicht wirksam wird.
Wenn bei festen Größen der absoluten und festen Positionierung (Breite- und Höhenattribute sind festgelegt) die Attribute oben und links festgelegt sind, haben unten und rechts, Rand und Gleitkomma keine Auswirkung.
Die später festgelegten Attribute überschreiben die zuvor wiederholt festgelegten Attribute. Ich freue mich darauf, auf die negativen Auswirkungen hinzuweisen oder einen besseren Ersatz dafür zu nennen: „normalisieren“
normalize.css ist eine anpassbare CSS-Datei, die es verschiedenen Browsern ermöglicht, Elemente einheitlicher darzustellen.

7. Bitte erklären Sie Floats und wie sie funktionieren.

Das Float-Attribut definiert, ob ein Element schwebt und in welche Richtung es schwebt. In CSS kann jedes Element schweben, und ein schwebendes Element generiert eine Box auf Blockebene, unabhängig von der Art des Elements es ist. Und die Breite der Box wird nicht mehr gestreckt, sondern anhand der Breite des Inhalts in der Box bestimmt. Das Floating-Attribut führt dazu, dass das Float-Element aus dem Dokumentfluss ausbricht, sodass sich die Blockbox im normalen Fluss des Dokuments so verhält, als ob die Floating-Box nicht vorhanden wäre.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

neunste Fragen zum Front-End-Interview 2018

acht acht letzte Fragen zum Front-End-Interview 2018

Neueste Front-End-Interviewfragen 2018, sieben

Das obige ist der detaillierte Inhalt vonZehn der neuesten Front-End-Interviewfragen im Jahr 2018. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!