Die umfassendste Sammlung von Front-End-Interviewfragen

HTML und CSS

1. Verständnis und Kenntnisse von WEB-Standards und W3C <br /> Schließende Tags, Tags in Kleinbuchstaben, keine zufällige Verschachtelung, Erhöhung der Suchwahrscheinlichkeit durch Suchroboter, Verwendung externer CSS- und JS-Skripte, Trennung von Struktur und Verhalten, schnellerer Dateidownload und Seitengeschwindigkeit, Inhalte sind für mehr Benutzer zugänglich, Inhalte sind über eine größere Anzahl von Geräten zugänglich, weniger Code und Komponenten, einfache Wartung, bequeme Überarbeitung, keine Notwendigkeit, Seiteninhalte zu ändern, Bereitstellung einer Druckversion ohne Kopieren von Inhalten, Verbesserung der Benutzerfreundlichkeit der Website;

2. Was ist der Unterschied zwischen xhtml und html
HTML ist eine grundlegende Webdesignsprache und XHTML ist eine XML-basierte Auszeichnungssprache. Die Hauptunterschiede sind:
XHTML-Elemente müssen korrekt verschachtelt sein.
XHTML-Elemente müssen geschlossen sein.
Tag-Namen müssen in Kleinbuchstaben sein.
Ein XHTML-Dokument muss ein Stammelement haben.

3. Doctype? Strenger Modus und gemischter Modus – wie werden diese beiden Modi ausgelöst und welche Bedeutung hat ihre Unterscheidung?
Wird verwendet, um zu deklarieren, welche Spezifikation (html/Xhtml) das Dokument verwendet. Normalerweise ist dies zu streng. Das Hinzufügen einer XML-Deklaration zu rahmenbasierten HTML-Dokumenten kann dazu führen, dass die Analysemethode auf IE5.5 umgestellt wird. Es weist Fehler in IE5.5 auf.

4. Was sind Inline-Elemente? Was sind Block-Level-Elemente? Was ist das CSS-Boxmodell?

Elemente auf Blockebene: div p h1 h2 h3 h4 form ul
Inline-Elemente: ab br i span input select
CSS-Boxmodell: Inhalt, Rahmen, Rand, Polsterung

5. Welche Möglichkeiten gibt es, CSS zu importieren? Was ist der Unterschied zwischen Link und @import?
Der Unterschied zwischen Inline-, eingebetteten und externen Linkimporten: Das gleichzeitige Laden ersterer ist inkompatibel und letztere wird von Browsern unter CSS2.1 nicht unterstützt.
Link unterstützt die Änderung des Stils mit Javascript, was nicht möglich ist

6. Was sind CSS-Selektoren? Welche Eigenschaften können vererbt werden? Wie wird der Prioritätsalgorithmus berechnet?
Was hat eine höhere Priorität, inline oder wichtig?

Die Vererbung des Tag-Selektor-Klassenselektors und des ID-Selektors ist nicht so gut wie die Angabe von ID>Klasse>Tag-Selektor. Letzteres hat eine höhere Priorität.

7. Was sind die drei Ebenen der Front-End-Seite? Was sind sie? Was sind ihre Funktionen?
Strukturebene HTML Präsentationsebene CSS Verhaltensebene js

8. Was ist die Grundstruktur von CSS?
Selektor {Attribut1:Wert1;Attribut2:Wert2;...}

9. Mit welchen Browsern haben Sie Ihre Seiten getestet? Was sind die Kernel dieser Browser?
IE (IE-Kernel) Firefox (Gecko) Google (WebKit) Opera (Presto)

10. Schreiben Sie mehrere Lösungen für den IE6-BUG auf
1. Doppelter Float-Fehlerrand, verursacht durch die Verwendung des Displays
2.3 Pixelproblem durch Verwendung von Float. Verwenden Sie dislpay:inline -3px.
3. Hyperlinks werden nach dem Anklicken ungültig: Achten Sie auf die richtige Schreibreihenfolge: Link besucht Hover aktiv
4. D. h., Z-Index-Problem: Position hinzufügen: relativ zum übergeordneten Element
5. PNG transparent mit JS-Code
6.Min-Höhe Mindesthöhe! Wichtige Lösung
7.Select deckt ab und verwendet Iframe-Verschachtelung in IE6
8. Warum gibt es keine Möglichkeit, einen Container mit einer Breite von etwa 1px zu definieren (aufgrund der Standardzeilenhöhe von IE6, verwenden Sie over:hidden,zoom:0.08 line-height:1px)

11. Was ist der Unterschied zwischen den Titel- und Alt-Attributen in einem Tag?
Alt Wenn das Bild nicht angezeigt wird, wird es durch Text dargestellt.
Der Titel enthält Informationen zu dieser Immobilie

12. Beschreiben Sie die Funktion und Verwendung des CSS-Resets.
Mit Zurücksetzen werden die CSS-Standardeigenschaften des Browsers zurückgesetzt. Die Browser sind unterschiedlich.
Verschiedene Stile, dann zurücksetzen, um sie zu vereinheitlichen

13. Erklären Sie CSS-Sprites und wie man sie verwendet.
CSS-Sprites kombinieren mehrere kleine Bilder zu einem großen Bild.
Reduzieren Sie die Anzahl der Anfragen an den Server für Bilder

14. Was ist der Unterschied zwischen dem Browser-Standardmodus und dem Quirks-Modus?
Verschiedene Boxmodell-Rendering-Modi verwenden window.top.document.compatMode
Kann zeigen, warum Modus

15. Wie optimieren Sie die Dateien und Ressourcen der Website? Zu den erwarteten Lösungen gehören:
Dateikonsolidierung Dateiminimierung / Dateikomprimierung CDN-Hosting verwenden Cache verwenden

16. Was ist semantisches HTML?
Das intuitive Verständnis von Tags ist für das Crawlen durch Suchmaschinen von Vorteil

17. Verschiedene Möglichkeiten zum Löschen von Floating, ihre jeweiligen Vor- und Nachteile
1. Verwenden Sie leere Tags, um Floats zu löschen: clear:both (theoretisch kann jedes Tag gelöscht werden,,, durch Hinzufügen bedeutungsloser Tags)
2. Verwenden Sie overflow:auto (leere Label-Elemente löschen Floats und müssen unbeabsichtigten Code hinzufügen, verwenden Sie zoom:1 für IE-Kompatibilität)
3. Verwenden Sie das Pseudoelement afert, um den Float zu löschen (für Nicht-IE-Browser).

Javascript

1. Welche Datentypen gibt JavaScripts typeof zurück?
Objektnummerfunktion Boolean underfind

2. Nennen Sie drei Beispiele für obligatorische Typkonvertierungen und zwei implizite Typkonvertierungen.
obligatorisch (parseInt, parseFloat, Zahl)
Implizit (== – ===)

3. Der Unterschied zwischen split() und join() besteht darin, dass ersteres ein Array schneidet, während letzteres das Array in einen String umwandelt.

4. Array-Methoden pop() push() unshift() shift()
Push() fügt am Ende hinzu. Pop() entfernt am Ende.
Unshift() Header hinzufügen shift() Header löschen

5. Was ist der Unterschied zwischen Ereignisbindung und normalen Ereignissen?

6. Unterschiede zwischen IE- und DOM-Ereignisströmen
1. Die Ausführungsreihenfolge ist unterschiedlich.
2. Die Parameter sind unterschiedlich
3. Ob die Veranstaltung ergänzt werden soll
4.Dies weist auf das Problem hin

7. Welche Schreibmethoden sind unter IE und Standards kompatibel?
Var ev = ev || Fenster.Ereignis
Dokument.documentElement.Clientbreite || Dokument.body.Clientbreite
Var Ziel = ev.srcElement||ev.target

8. Der Unterschied zwischen Get und Post bei Ajax-Anfragen. Eines davon befindet sich hinter der URL und das andere in einem virtuellen Träger. Es gibt eine Größenbeschränkung und Sicherheitsprobleme. Die Anwendungen sind unterschiedlich. Eines ist für Foren und andere Orte gedacht, die nur Anfragen erfordern, und das andere ähnelt dem Ändern von Passwörtern.

9. Der Unterschied zwischen Anrufen und Bewerben
Objekt.Aufruf(dieses,obj1,obj2,obj3)
Objekt.anwenden(diese, Argumente)

10. Wie interpretiert man JSON-Daten bei einer Ajax-Anfrage mit Eval Parse? Aus Sicherheitsgründen ist die Verwendung von Parse zuverlässiger.
11.b erbt die Methode von a

12. Schreiben Sie eine Funktion, um einen nicht-linearen Stil zu erhalten

Funktion getStyle(Objekt, Attribut, Wert) {
    wenn (!Wert) {
        wenn (obj.aktuellerStil) {
            returniere obj.currentStyle(attr).
        } anders {
            obj.getComputedStyle(attr, false)
        }
    } anders {
        obj.style[attr] = Wert
    }
}

13. Was ist Ereignisdelegierung? Dabei wird das Prinzip des Event Bubbling verwendet, um das von einem selbst ausgelöste Ereignis stattdessen von seinem übergeordneten Element ausführen zu lassen!
https://www.jb51.net/article/116997.htm Beispiele finden Sie unter diesem Link

14. Was ist ein Closure, welche Eigenschaften hat es und welche Auswirkungen hat es auf die Seite? Ein Closure ist eine Funktion, die die internen Variablen anderer Funktionen lesen kann.

1. Speichern Sie die Variable i in jedem Absatzobjekt (p).

1. Funktion init1() {
2. var pAry = document.getElementsByTagName("p");
3. für (var i = 0; i < pAry.length; i++) {
4. pAry[i].i = i;
5. pAry[i].onclick = function() {
6. alarm(dieses.i);
7. }
8. }
9. }

2. Speichern Sie die Variable i in der anonymen Funktion selbst

1. Funktion init2() {
2. var pAry = document.getElementsByTagName("p");
3. für (var i = 0; i < pAry.length; i++) {
4. (pAry[i].onclick = function() {
5. Alarm (Argumente.callee.i);
6. }).i = i;
7. }
8. }

3. Fügen Sie eine Abschlussebene hinzu. i wird als Funktionsparameter an die innere Funktion übergeben.

1. Funktion init3() {
2. var pAry = document.getElementsByTagName("p");
3. für (var i = 0; i < pAry.length; i++) {
4. (Funktion(Argument){
5. pAry[i].onclick = function() {
6. Alarm (Argument);
7. };
8. })(i);//Aufrufparameter
9. }
10.}

4. Fügen Sie eine Abschlussebene hinzu und übergeben Sie i als lokale Variable an die innere Funktion

1. Funktion init4() {
2. var pAry = document.getElementsByTagName("p");
3. für (var i = 0; i < pAry.length; i++) {
4. (Funktion () {
5. var temp = i; // lokale Variable beim Aufruf
6. pAry[i].onclick = function() {
7. Alarm (temp);
8. }
9. })();
10. }
11.}

5. Fügen Sie eine Abschlussebene hinzu und geben Sie eine Funktion als Antwortereignis zurück (beachten Sie den subtilen Unterschied zu 3).
1. Funktion init5() {
2. var pAry = document.getElementsByTagName("p");
3. für (var i = 0; i < pAry.length; i++) {
4. pAry[i].onclick = Funktion(arg) {
5. return function() { //Gibt eine Funktion zurück
6. Alarm (Argument);
7. }
8. }(ich);
9. }
10.}

6. Mit Funktion implementiert, tatsächlich erzeugt jede Funktionsinstanz einen Abschluss

1. Funktion init6() {
2. var pAry = document.getElementsByTagName("p");
3. für (var i = 0; i < pAry.length; i++) {
4. pAry[i].onclick = new Function("alert(" + i + ");"); //new generiert jeweils eine Funktionsinstanz
5. }
6. }

7. Implementierung mit Funktion, beachten Sie den Unterschied zu 6

1. Funktion init7() {
2. var pAry = document.getElementsByTagName("p");
3. für (var i = 0; i < pAry.length; i++) {
4. pAry[i].onclick = Funktion('alert('+i+')');
5. }
6. }

15. So verhindern Sie Event-Bubbling und Standardereignisse
cancelBubble gibt false zurück

16. Methoden bis zu einem bestimmten Punkt hinzufügen, löschen, ersetzen und einfügen
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

17. Erklären Sie das Prinzip von JSONP und warum es kein echtes Ajax ist
Dynamisches Erstellen von Skript-Tags und Rückruffunktionen
Ajax ist eine Datenoperationsanforderung ohne Aktualisierung der Seite

18. Lokale Objekte, integrierte Objekte und Hostobjekte von JavaScript. Lokale Objekte sind Arrays, Objekte, reguläre Ausdrücke usw., die von new instanziiert werden können. Integrierte Objekte sind gload, Math usw., die nicht instanziiert werden können. Hosts sind Dokumente, Fenster usw., die mit dem Browser geliefert werden.

19. Der Unterschied zwischen Dokument laden und Dokument bereit
Document.onload führt js aus, nachdem die Struktur und der Stil geladen wurden
Document.ready hat diese Methode nicht in der nativen Version, aber es gibt eine in jQuery
$().bereit(Funktion)

20. Der Unterschied zwischen "==" und "===" besteht darin, dass ersteres den Typ automatisch konvertiert, während letzteres dies nicht tut.

21. Same-Origin-Policy von JavaScript: Ein Skript kann nur Eigenschaften von Fenstern und Dokumenten mit gleichem Ursprung lesen.
Die gleiche Quelle bezieht sich hier auf die Kombination aus Hostname, Protokoll und Portnummer

22. Schreiben Sie eine Methode zum Entfernen von Duplikaten aus einem Array
Funktion oSort(arr)
{
var Ergebnis ={};
var neuesArr = [];
für (var i = 0; i < arr.length; i++)
{
wenn(!Ergebnis[arr])
{
newArr.push(arr)
Ergebnis[arr]=1
}
}
returniere newArr
}

23. Medienauswahl
@media (min. Breite: 992px) und (max. Breite: 1199px)
@media-Bildschirm und (Mindestbreite: 768 Pixel)
HTML und CSS

1. Welche Browser werden üblicherweise zum Testen verwendet? Was sind Kernel (Layout Engine)?
(Q1) Browser: IE, Chrome, FireFox, Safari, Opera.
(Q2) Kernel: Trident, Gecko, Presto, Webkit.
2. Was ist der Unterschied zwischen Inline-Elementen und Block-Level-Elementen? Kompatibilität bei der Verwendung von Inline-Block-Elementen? (IE8 und darunter)
(Q1) Inline-Elemente: Sie werden horizontal angeordnet und können keine Elemente auf Blockebene enthalten. Die Einstellung der Breite hat keine Auswirkung.
Die Höhe ist ungültig (Zeilenhöhe kann festgelegt werden), der obere und untere Rand sind ungültig und die Polsterung oben und unten ist ungültig.
Elemente auf Blockebene: Jedes nimmt eine Zeile ein und ist vertikal angeordnet. Beginnen Sie mit einer neuen Zeile und enden Sie mit einem Zeilenumbruch.
(Q2) Kompatibilität: display:inline-block;*display:inline;*zoom:1;
3. Welche Möglichkeiten gibt es, Floats zu löschen? Welcher ist der bessere Weg?
(Frage 1)
(1) Das übergeordnete Div definiert die Höhe.
(2) Fügen Sie am Ende ein leeres Div-Tag „clear:both“ hinzu.
(3) Das übergeordnete Div definiert die Pseudoklassen: after und zoom.
(4) Das übergeordnete Div definiert overflow:hidden.
(5) Das übergeordnete Div definiert overflow:auto.
(6) Das übergeordnete Div ist ebenfalls schwebend und seine Breite muss definiert sein.
(7) Das übergeordnete Div definiert die Anzeige: Tabelle.
(8) Füge am Ende das br-Tag clear:both hinzu.
(F2) Die dritte Methode ist besser und wird von vielen Websites verwendet.
4. Was sind die allgemein verwendeten Eigenschaften der Box-Größenbestimmung? Was sind ihre jeweiligen Funktionen?
(Q1)Boxgröße: Inhaltsbox|Rahmenbox|erben;
(Q2) Inhaltsbox: Die Breite und Höhe werden jeweils auf die Inhaltsbox des Elements angewendet.
Zeichnet zusätzlich zur Breite und Höhe (Standard für Elemente) die Polsterung und Ränder des Elements.
Border-Box: Eventuelle Polsterungen und Ränder, die für das Element angegeben sind, werden innerhalb der festgelegten Breite und Höhe gezeichnet. Die Inhaltsbreite und -höhe ergeben sich durch Subtrahieren der Rahmen- und Polsterungswerte von der eingestellten Breite bzw. Höhe.
5.Was ist die Funktion von Doctype? Was ist der Unterschied zwischen Standardmodus und Kompatibilitätsmodus?
(Q1)>!DOCTYPE< teilt dem Parser des Browsers mit, welcher Dokumentstandard zum Parsen dieses Dokuments verwendet werden soll. Ein nicht vorhandener oder fehlerhafter DOCTYPE führt dazu, dass das Dokument im Kompatibilitätsmodus gerendert wird.
(Q2) Sowohl das Standardmodus-Layout als auch der JS-Betriebsmodus laufen auf dem höchsten vom Browser unterstützten Standard. Im Kompatibilitätsmodus werden Seiten in einer locker abwärtskompatiblen Weise angezeigt. Dabei wird das Verhalten älterer Browser emuliert, um zu verhindern, dass die Site nicht mehr funktioniert.
6. Warum müssen wir in HTML5 nur >!DOCTYPE HTML< schreiben?
HTML5 basiert nicht auf SGML, daher muss keine DTD referenziert werden. Allerdings wird ein Doctype benötigt, um das Browserverhalten zu regeln (damit sich die Browser so verhalten, wie sie sollten).
HTML4.01 basiert auf SGML. Daher ist es notwendig, auf DTD zu verweisen, um dem Browser den vom Dokument verwendeten Dokumenttyp mitzuteilen.
7. Was ist beim Importieren von Stilen auf einer Seite der Unterschied zwischen der Verwendung von „Link“ und „@import“?
(1) Link ist ein XHTML-Tag. Außer zum Laden von CSS kann es auch zum Definieren von RSS, Definieren von Rel-Link-Attributen usw. verwendet werden; während @import von CSS bereitgestellt wird und nur zum Laden von CSS verwendet werden kann;
(2) Wenn die Seite geladen wird, wird der Link gleichzeitig geladen und @import verweist
Das CSS wartet mit dem Laden, bis die Seite geladen ist.
(3) Der Import wird in CSS2.1 vorgeschlagen und kann nur von IE5 und höher erkannt werden.
„Link“ ist ein XHTML-Tag und weist keine Kompatibilitätsprobleme auf.
8. Erzählen Sie uns bitte von Ihrem Verständnis des Browserkernels.
Es besteht im Wesentlichen aus zwei Teilen: Rendering-Engine (Layout-Engineer oder
Rendering Engine) und JS-Engine.
Rendering-Engine: verantwortlich für das Abrufen des Inhalts der Webseite (HTML, XML, Bilder usw.),
Organisieren Sie Informationen (z. B. durch Hinzufügen von CSS usw.) und berechnen Sie, wie die Webseite angezeigt wird.
Die Ausgabe erfolgt dann auf einem Monitor oder Drucker. Da die Syntax von Webseiten von verschiedenen Browserkernen unterschiedlich interpretiert wird, sind auch die Rendering-Effekte unterschiedlich.
Alle Webbrowser, E-Mail-Clients und andere
Anwendungen, die Netzwerkinhalte anzeigen, erfordern einen Kernel.
Die JS-Engine analysiert und führt JavaScript aus, um dynamische Effekte auf Webseiten zu erzielen.
Zu Beginn gab es keine klare Unterscheidung zwischen der Rendering-Engine und der JS-Engine. Später, als die JS-Engine immer unabhängiger wurde, bezog sich der Kernel eher nur noch auf die Rendering-Engine.
9. Was sind die neuen Funktionen von HTML5? Wie gehe ich mit Browserkompatibilitätsproblemen neuer HTML5-Tags um? Wie unterscheidet man zwischen HTML und HTML5?
(Frage 1)
HTML5 ist keine Teilmenge von SGML mehr. Es fügt hauptsächlich Funktionen wie Bilder, Standort, Speicherung und Multitasking hinzu.
(1) Zeichenleinwand;
(2) Video- und Audioelemente für die Medienwiedergabe;
(3) Lokaler Offline-Speicher: localStorage speichert Daten für lange Zeit, und die Daten gehen nach dem Schließen des Browsers nicht verloren.
(4) Die im sessionStorage enthaltenen Daten werden nach Schließen des Browsers automatisch gelöscht;
(5) Bessere semantische Inhaltselemente wie Artikel, Fußzeile, Kopfzeile, Navigation, Abschnitt;
(6) Formular-Steuerelemente: Kalender, Datum, Uhrzeit, E-Mail, URL, Suche;
(7) Neue Technologien: Webworker, Websocket, Geolokalisierung;
(Frage 2)
Von der Methode document.createElement generierte IE8/IE7/IE6-Support-Tags.
Mit dieser Funktion kann diesen Browsern die Unterstützung neuer HTML5-Tags ermöglicht werden.
Nachdem der Browser das neue Tag unterstützt, müssen Sie auch den Standardstil des Tags hinzufügen.
Natürlich können Sie auch direkt ausgereifte Frameworks wie html5shim verwenden.
>!--[wenn IE 9]<
>Skript< src="http://html5shim.googlecode.com/svn/trunk/html5.js">/Skript<
>![endif]--<
10. Beschreiben Sie kurz Ihr Verständnis der HTML-Semantik.
Verwenden Sie die richtigen Etiketten für die richtigen Dinge.
Semantisches HTML strukturiert und übersichtlicher den Seiteninhalt und erleichtert so die Analyse durch Browser und Suchmaschinen.
Wird in einem Dokumentformat angezeigt, das auch ohne CSS-Stile leicht zu lesen ist;
Suchmaschinen-Crawler verlassen sich auch auf HTML-Tags, um den Kontext und die Gewichtung einzelner Schlüsselwörter zu bestimmen, was für die SEO von Vorteil ist;
Erleichtern Sie den Quellcode-Lesern die Aufteilung der Website in Blöcke, um das Lesen, Warten und Verstehen zu vereinfachen.
JavaScript

1. Stellen Sie die grundlegenden Datentypen von js vor
Undefiniert, Null, Boolesch, Zahl, Zeichenfolge
2. Was sind die integrierten Objekte in js?
Objekte der Datenkapselungsklasse: Objekt, Array, Boolean, Zahl und Zeichenfolge
Andere Objekte: Funktion, Argumente, Mathematik, Datum, RegExp, Fehler
3. Verständnis dieses Objekts
dies zeigt immer auf den direkten Aufrufer der Funktion (nicht auf den indirekten Aufrufer);
Wenn ein neues Schlüsselwort vorhanden ist, verweist dieses auf das neue Objekt.
Bei einem Ereignis bezieht sich dies auf das Objekt, das das Ereignis ausgelöst hat. Insbesondere bezieht sich dies in attachEvent im IE immer auf das globale Objekt Window.
4.Was macht eval?
Seine Funktion besteht darin, die entsprechende Zeichenfolge in JS-Code zu analysieren und auszuführen.
Sie sollten die Verwendung von eval vermeiden, da es unsicher und sehr leistungsintensiv ist (zweimal, einmal in JS-Anweisungen analysiert und einmal ausgeführt).
Beim Konvertieren einer JSON-Zeichenfolge in ein JSON-Objekt können Sie eval, var obj =eval('('+ str +')'); verwenden.
5. So fügen Sie Knoten im DOM hinzu, entfernen, verschieben, kopieren, erstellen und finden sie
// Einen neuen Knoten erstellen
createDocumentFragment() //Erstellen Sie ein DOM-Fragment
createElement() //Erstelle ein bestimmtes Element
createTextNode() //Erstelle einen Textknoten
// Hinzufügen, entfernen, ersetzen, einfügen
anhängenKind()
entferneKind()
replaceChild()
insertBefore() //Fügt einen neuen untergeordneten Knoten vor einem vorhandenen untergeordneten Knoten ein
// Suchen
getElementsByTagName() //Nach Tag-Name
getElementsByName() //Durch den Wert des Name-Attributs des Elements
(IE hat eine stärkere Fehlertoleranz und erhält ein Array, das die ID enthält, die dem Namenswert entspricht)
getElementById() //Nach Element-ID, Eindeutigkeit
6. Was ist der Unterschied zwischen null und undefiniert?
null ist ein Objekt, das „nichts“ darstellt, was 0 ergibt, wenn es in einen numerischen Wert umgewandelt wird; undefined ist ein primitiver Wert, der „nichts“ darstellt, was NaN ergibt, wenn es in einen numerischen Wert umgewandelt wird.
undefiniert:
(1) Wenn eine Variable deklariert, aber kein Wert zugewiesen wird, ist sie „undefiniert“.
(2) Wenn eine Funktion aufgerufen wird, wird ein Parameter, der angegeben werden sollte, nicht angegeben und der Parameter ist „undefiniert“.
(3) Wenn einem Objekt keine Eigenschaft zugewiesen ist, ist der Wert der Eigenschaft undefiniert.
(4) Wenn eine Funktion keinen Rückgabewert hat, gibt sie standardmäßig „undefined“ zurück.
null:
(1) Als Funktionsparameter gibt es an, dass der Funktionsparameter kein Objekt ist.
(2) Dient als Endpunkt der Prototypenkette eines Objekts.
7. Was genau macht der neue Betreiber?
(1) Erstellen Sie ein leeres Objekt und die Variable this referenziert das Objekt.
Es erbt auch den Prototyp dieser Funktion.
(2) Dem hiermit referenzierten Objekt werden Eigenschaften und Methoden hinzugefügt.
(3) Das neu erstellte Objekt wird dadurch referenziert und implizit zurückgegeben.
8. Was wissen Sie über JSON?
JSON (JavaScript Object Notation) ist ein leichtes Datenaustauschformat. Es basiert auf einer Teilmenge von JavaScript.
Das Datenformat ist einfach, leicht zu lesen und zu schreiben und benötigt nur wenig Bandbreite.
Format: Schlüssel-Wert-Paare, zum Beispiel: {'age':'12', 'name':'back'}
9. Was sind die Unterschiede und Funktionen von call() und apply()?
Die Funktion apply() verwendet zwei Parameter: Der erste ist der Kontext und der zweite ist ein Parameter-Array. Wenn der Kontext null ist, wird stattdessen das globale Objekt verwendet.
Zum Beispiel: function.apply(this,[1,2,3]);
Das erste Argument für call() ist der Kontext, gefolgt von der an die Instanz übergebenen Argumentfolge.
Zum Beispiel: function.call(this,1,2,3);
10. Wie erhält man UA?
Funktion whatBrowser() {
Dokument.Browser.Name.Wert=navigator.appName;
Dokument.Browser.Version.value=navigator.appVersion;
Dokument.Browser.Code.Wert=navigator.appCodeName;
Dokument.Browser.Agent.Wert=navigator.userAgent;
}

andere
1. Was wissen Sie über HTTP-Statuscodes?
100 Weiter Weiter, normalerweise beim Senden einer Post-Anfrage,
Nach dem http-Header gibt der Server diese Informationen zur Bestätigung zurück und sendet dann spezifische Parameterinformationen
200 OK Normale Antwortinformationen
201 Erstellt Die Anfrage war erfolgreich und der Server hat eine neue Ressource erstellt
202 Akzeptiert Der Server hat die Anfrage akzeptiert, aber noch nicht verarbeitet
301 Dauerhaft verschoben. Die angeforderte Webseite wurde dauerhaft an einen neuen Standort verschoben.
302 – Temporäre Weiterleitung gefunden.
303 (Siehe „Sonstige temporäre Umleitung“). Verwendet wird immer eine GET-Anfrage an die neue URI.
304 Nicht geändert. Die angeforderte Webseite wurde seit der letzten Anforderung nicht geändert.
400 Ungültige Anfrage. Der Server kann das Format der Anfrage nicht verstehen und der Client sollte nicht versuchen, eine Anfrage mit demselben Inhalt erneut zu stellen.
401 Nicht autorisiert. Die Anfrage ist nicht autorisiert.
403 Verboten. Der Zugriff ist verboten.
404 Nicht gefunden. Eine mit der URI übereinstimmende Ressource konnte nicht gefunden werden.
500 Interner Serverfehler. Der am häufigsten auftretende serverseitige Fehler.
503 Service nicht verfügbar. Der Server kann die Anforderung vorübergehend nicht verarbeiten (möglicherweise aufgrund von Überlastung oder Wartung).
2. Welche Methoden zur Leistungsoptimierung haben Sie?
(1) Reduzieren Sie die Anzahl der HTTP-Anfragen: CSS-Sprites, JS, CSS-Quellcode-Komprimierung, große Bilder
Kleine Steuerung ist geeignet; Webseite-Gzip, CDN-Hosting, Datencache, Bildserver.
(2) Front-End-Vorlage JS + Daten zur Reduzierung der durch HTML-Tags verursachten Bandbreitenverschwendung.
Das Front-End verwendet Variablen, um die AJAX-Anforderungsergebnisse zu speichern, und bedient lokale Variablen jedes Mal, wenn keine Anforderungen gestellt werden, wodurch die Anzahl der Anforderungen reduziert wird. (3) Verwenden Sie innerHTML anstelle von DOM-Operationen, um die Anzahl der DOM-Operationen zu reduzieren und die JavaScript-Leistung zu optimieren.
(4) Wenn viele Stile festgelegt werden müssen, legen Sie den Klassennamen fest, anstatt den Stil direkt zu verwenden.
(5) Verwenden Sie globale Variablen seltener und speichern Sie die Ergebnisse von DOM-Knotensuchen im Cache. Reduzieren Sie die IO-Lesevorgänge.
(6) Vermeiden Sie die Verwendung von CSS-Ausdrücken, auch bekannt als dynamische Eigenschaften.
(7) Bilder vorladen, das Stylesheet oben platzieren, das Skript unten platzieren und einen Zeitstempel hinzufügen.
3. Was ist Graceful Degradation und Progressive Enhancement?
Graceful Degradation: Die Website funktioniert ordnungsgemäß in allen modernen Browsern.
Wenn Sie einen älteren Browser verwenden, überprüft der Code, ob er ordnungsgemäß funktioniert.
Aufgrund des einzigartigen Boxmodell-Layouts des IE gibt es Hack-Praktiken für verschiedene IE-Versionen
Graceful Degradation, Hinzufügen alternativer Lösungen für Browser, die die Funktion nicht unterstützen,
Dadurch kann das Erlebnis auf älteren Browsern etwas beeinträchtigt werden, ohne dass die Funktion völlig wirkungslos wird.
Progressive Verbesserung: Beginnen Sie mit den Grundfunktionen, die von allen Browsern unterstützt werden, fügen Sie nach und nach Funktionen hinzu, die nur von neuen Browsern unterstützt werden, und fügen Sie der Seite zusätzliche Stile und Funktionen hinzu, die für Basisbrowser harmlos sind. Sie werden automatisch gerendert und funktionieren, wenn sie vom Browser unterstützt werden.
4. Welche gängigen Vorgänge können Speicherlecks verursachen?
Als Speicherverlust bezeichnet man jedes Objekt, das bestehen bleibt, auch wenn Sie es nicht mehr besitzen oder benötigen.
Der Garbage Collector scannt regelmäßig Objekte und zählt die Anzahl anderer Objekte, die auf jedes Objekt verweisen.
Wenn die Anzahl der Referenzen auf ein Objekt 0 ist (kein anderes Objekt hat auf das Objekt verwiesen),
Oder wenn der einzige Verweis auf das Objekt zirkulär ist, kann der Speicher für das Objekt zurückgefordert werden.
Die Verwendung einer Zeichenfolge anstelle einer Funktion als erstes Argument für setTimeout kann zu einem Speicherverlust führen.
Closures, Konsolenprotokollierung, Schleifen (ein Zyklus tritt auf, wenn zwei Objekte aufeinander verweisen und einander beibehalten)
5. Der Unterschied zwischen Threads und Prozessen Ein Programm hat mindestens einen Prozess und ein Prozess hat mindestens einen Thread.
Der Thread-Aufteilungsmaßstab ist kleiner als der Prozess, wodurch das Multithread-Programm eine hohe Parallelität aufweist.
Darüber hinaus verfügt ein Prozess während der Ausführung über eine unabhängige Speichereinheit, während mehrere Threads den Speicher gemeinsam nutzen.
Dadurch wird die Laufleistung des Programms erheblich verbessert.
Threads unterscheiden sich während der Ausführung von Prozessen. Jeder unabhängige Thread hat einen Einstiegspunkt für die Programmausführung, eine sequentielle Ausführungssequenz und einen Ausstiegspunkt für das Programm. Threads können jedoch nicht unabhängig voneinander ausgeführt werden und müssen in einem Anwendungsprogramm vorhanden sein, das eine Steuerung der Ausführung mehrerer Threads ermöglicht.
Aus logischer Sicht besteht die Bedeutung von Multithreading darin, dass in einer Anwendung mehrere Ausführungsteile gleichzeitig ausgeführt werden können. Das Betriebssystem behandelt mehrere Threads jedoch nicht als mehrere unabhängige Anwendungen, um die Prozessplanung, Verwaltung und Ressourcenzuweisung zu implementieren. Dies ist der wichtige Unterschied zwischen Prozessen und Threads.
Fragen für Vorstellungsgespräche mit Frontend-Entwicklungsingenieuren für Javascript
1. Um den Inhalt einer Ebene dynamisch zu ändern, können Sie die folgenden Methoden verwenden (AB)
a)innerHTML
b)innerText
c) Dies wird erreicht, indem das Ausblenden und Anzeigen der Ebene eingestellt wird
d) Durch Festlegen der Anzeigeeigenschaft der Stileigenschaften der Ebene

2. Wenn Sie A auf der Tastatur drücken, lautet das Ergebnis des Druckens von event.keyCode mit dem Ereignis onKeyDown (A).
a)65
b)13
c)97
d)37

3. In JavaScript ist die folgende Option keine Array-Methode (B);
a)sortieren()
b)Länge()
c) concat ()
d)umkehren()
4. Mit welcher der folgenden Möglichkeiten lässt sich die Indexnummer der ausgewählten Option abrufen? (B)
a) behindert
b)ausgewählterIndex
c)Option
d) mehrere

5. Ich möchte, dass das Bild die gleiche Funktion hat wie der „Absenden“-Button. Wie schreibe ich eine Formularübermittlung? (A)
a) Manuell im onClick-Ereignis des Bildes übermitteln
b) Fügen Sie dem Bild ein onSubmit-Ereignis hinzu
c) Manuelles Senden im onSubmit-Ereignis des Bildes
d) Automatisch im Formular absenden

6. Der richtige Code, um die Div-Ebene und das Textfeld in dieselbe Zeile zu setzen, ist (D);
A)
B)
C)
D)
7. Unter den folgenden Optionen ist die richtige Beschreibung (zwei auswählen). ( ANZEIGE )
a) options.add(new Option('a','A')) kann dynamisch eine Dropdown-Listenoption hinzufügen
b) option.add(new Option('a','A')) kann dynamisch eine Dropdown-Listenoption hinzufügen
c) In neuer Option('a','A') stellt 'a' den Wert der Listenoption dar und 'A' wird verwendet, um ihn auf der Seite anzuzeigen.
d) In neuer Option('a','A') stellt 'A' den Wert der Listenoption dar und 'a' wird verwendet, um ihn auf der Seite anzuzeigen.

8. var emp = neues Array(3);
für (var i in emp)
Die folgenden Antworten können mit dem For-Schleifencode ausgetauscht werden: (eine auswählen). (D )
A für (var i =0; i
B für (var i =0; i
C für (var i =0; i
D für (var i =0; i

9. Beim Erstellen einer kaskadierenden Menüfunktion wird das Ereignis (A) des Dropdown-Listenfelds aufgerufen.
a) bei Änderung
b) onFocus
c)ausgewählt
d) onClick

10. Unter den folgenden Anweisungen zum Deklarieren von Arrays ist (C) die falsche Option.
a)Var arry = neues Array()
b)Var arry = neues Array(3)
c)Var arry[] = neues Array(3)(4)
d)Var arry = neues Array('3','4')

11. Mit welchen der folgenden Eigenschaften lässt sich eine Ebenenverbergung erreichen? (C)
a)Anzeige:false
b)Anzeige:versteckt
c)Anzeige:keine
d)Anzeige:” ”

12. Welche der folgenden Optionen gehört nicht zur Methode des Dokumentobjekts? (D)
ein)Fokus()
b)getElementById()
c)getElementsByName()
d)Hintergrundfarbe()

13. Welches der folgenden Ereignisse ist ein Tastendruckereignis (AB)
a) bei Tastendruck
b) bei Tastendruck
c)Schlüsselcode
d) bei Mausüberlagerung
14. Der Zweck der JavaScript-Formularvalidierung ist (B)
a) Senden Sie die korrekten Benutzerinformationen an den Server
b) Überprüfen Sie, ob die übermittelten Daten mit den tatsächlichen
c) Gestalten Sie die Seite schön und großzügig
d) Reduzieren Sie den Druck auf den Server
15. Allgemeine Werte des Anzeigeattributs enthalten nicht (C)
a) inline
b)Block
c) versteckt
d)keine

16. Welche der folgenden Aussagen zum PixelTop-Attribut und zum Top-Attribut ist richtig? (D )
a) sind alle Eigenschaften des Location-Objekts
b) Bei Verwendung ist der Rückgabewert eine Zeichenfolge
c) Beide geben Werte in Pixeln zurück.
d) Keine der oben genannten

17. Verwenden Sie die Methode open, um ein Fenster mit einer Browser-Symbolleiste, Adressleiste und Menüleiste zu öffnen. Die richtige Option ist __D__
a) öffnen("x.html","HI","toolbas=1,scrollbars=1,status=1");
b)öffnen("HI","Bildlaufleisten=1,Standort=1,Status=1");
c)öffnen("x.html","status=yes,menüleiste=1,standort=1");
d)öffnen("x.html","HI","toolbas=yes,menubar=1,location=1");

18. Der richtige Code zum Schließen der Ebene mit dem Namen mydiv lautet (C)
a)document.getElementByIdx_x_x_x(meindiv).style.display="keine";
b)document.getElementByIdx_x_x_x("mydiv").style.display=none;
c)document.getElementByIdx_x_x_x("mydiv").style.display="keine";
d)document.getElementByIdx_x_x_x("meindiv").style.display=="keine";
19. Warum Div+CSS-Layout verwenden? Die Trennung von Form und Inhalt reduziert den Seitencode erheblich, verbessert die Seiten-Browsing-Geschwindigkeit, gibt eine klare Struktur und ist vorteilhaft für SEO
Verkürzen Sie die Überarbeitungszeit, gestalten Sie das Layout komfortabler, entwerfen Sie einmal und verwenden Sie es viele Male

20. Was sind die Merkmale des Blockelements? Welche Elemente sind standardmäßig Blockelemente? Blockelemente beginnen immer in einer neuen Zeile;
Höhe, Zeilenhöhe sowie obere und untere Ränder sind alle steuerbar;
Die Standardbreite beträgt 100 % des Containers, sofern für ein Blockelement keine Breite festgelegt ist:
,
, und 21. Was sind die Merkmale von Inline-Elementen? Welche Elemente sind Inline-Elemente?
und andere Elemente stehen in einer Zeile;
Höhe, Zeilenhöhe sowie oberer und unterer Rand können nicht verändert werden;
Die Breite entspricht der Breite des Textes bzw. Bildes und kann nicht geändert werden.

Die Inline-Elemente sind: , , ,
, ,
Und.

22. Was ist das Ergebnis des Ausdrucks parseInt("X8X8")+paseFloat('8') in JavaScript? (C)
a)8+8
b)88
c)16
d) "8" + '8

23. Die Methoden des String-Objekts enthalten nicht (C)
a) charAt();
b)Teilzeichenfolge()
c)Länge
d) toUpperCase()

24. Welche der folgenden Aussagen zu setTimeout("check",10) ist richtig? (D)
a) Die Programmschleife wird 10 mal durchlaufen
b) Die Check-Funktion wird alle 10 Sekunden ausgeführt
c) 10 wird als Parameter an die Prüffunktion übergeben
d) Die Check-Funktion wird alle 10 Millisekunden ausgeführt

25. Welches der folgenden Wörter ist kein Javascript-Schlüsselwort: (C)
a) mit
b)Elternteil
c)Klasse
d) nichtig

Vorwort

In diesem Artikel werden einige hochwertige Front-End-Interviewfragen zusammengefasst (die meisten davon stammen aus dem Internet). Anfänger sollten nach der Lektüre auch die darin enthaltenen Prinzipien sorgfältig studieren. Wichtiges Wissen muss systematisch und gründlich studiert werden, um eine eigene Wissenskette zu bilden. Versuchen Sie niemals, Abkürzungen zu nehmen. Es ist falsch, nur zu versuchen, das Vorstellungsgespräch zu bestehen!
Während des Interviews sind einige Punkte zu beachten: (Quelle: Cheng Shaofeis Github: @wintercn)

Fragen im Vorstellungsgespräch: Variiert je nach Ihrer Ebene und Position, vom Einstiegslevel bis zum Expertenlevel: Umfang ↑, Tiefe ↑, Richtung ↑.

Fragetypen: Technische Vision, Projektdetails, Fragen zum theoretischen Wissen, Fragen zum Algorithmus, offene Fragen und Fallfragen.

Nachfragen: Stellen Sie sicher, dass Sie so lange nachfragen, bis Sie oder der Interviewer nicht mehr verstehen. Dadurch können Sie die Differenzierung und Tiefe der Fragen deutlich erhöhen und Ihre tatsächlichen Fähigkeiten erkennen. Denn derartiges assoziatives Wissen wird über einen langen Zeitraum erlernt und ist definitiv nichts, was man sich nur vorübergehend merken kann.

Unabhängig davon, wie gut Sie die Fragen beantworten, wird der Interviewer (möglicherweise Ihr direkter Vorgesetzter) darüber nachdenken, ob er diese Person als Kollegen haben möchte. Die Einstellung ist also wichtig. (Es fühlt sich eher wie ein Blind Date an)

Erfahrene Ingenieure können absolute und relative Werte verwechseln. Es ist besser, solche Leute nicht zu beschäftigen, denn das Team braucht von Ihnen zuverlässige Talente (Zuverlässigkeit).

Übersicht über Wissenspunkte zum Front-End-Entwicklungsinterview:

HTML und CSS:
Verständnis von Webstandards, Browser -Kernelunterschieden, Kompatibilität, Hacks, CSS -Grundlagen: Layout, Boxmodell, Priorität und Verwendung von Selektor, HTML5, CSS3, Mobile Anpassung

JavaScript:
Datentypen, objektorientierte Vererbung, Verschluss, Plug-Ins, Scopes, Cross-Domain, Prototyp-Ketten, Modularisierung, benutzerdefinierte Ereignisse, Speicherlecks, Ereignismechanismen, asynchrone Lade-Rückrufe, Vorlagenmotoren, Nodejs, JSON, Ajax usw.

andere:
HTTP, Sicherheit, reguläre Ausdrücke, Optimierung, Refaktoring, Reaktionsfähigkeit, Mobile, Teamwork, Wartbarkeit, SEO, UED, Architektur, Karriere

Als Front-End-Ingenieur sollten Sie unabhängig davon, wie viele Jahre Sie gearbeitet haben, die folgenden Wissenspunkte beherrschen:

Dieser Artikel wurde von Wang Zimo in Front-End-Essays veröffentlicht

1. Dom -Struktur - Welche Beziehungen können zwischen zwei Knoten existieren und wie man willkürlich zwischen Knoten bewegt?

2. DOM -Operationen - So fügen, entfernen, verschieben, kopieren, erstellen und suchen Sie Knoten usw.

3. Ereignisse - So verwenden Sie Ereignisse und die Unterschiede zwischen dem IE und dem Standard -DOM -Ereignismodell.

4. XMLHTTPREQUEST - Was ist das, wie man eine vollständige Get -Anfrage ausführt und wie Fehler erfasst werden.

5. Strenge Modus und promiskuitiver Modus - So auslösen Sie diese beiden Modi und welche Bedeutung hat die Unterscheidung.

6. Boxmodell - Die Beziehung zwischen Rändern, Polsterung und Rändern und dem Boxmodell in Browsern unter IE8

7. Elemente auf Blockebene und Inline -Elemente - wie man sie mit CSS steuert und wie man sie vernünftig benutzt

8. schwimmende Elemente - wie man sie benutzt, welche Probleme sie haben und wie sie sie lösen können.

9. HTML und XHTML - Was sind die Unterschiede zwischen den beiden?

10. JSON - Funktion, Verwendung und Entwurfsstruktur.