Häufig gestellte Fragen zu Front-End-Interviews

Führt zu häufig gestellten Fragen bei Vorstellungsgesprächen mit Front-End-Ingenieuren. Auf einige von ihnen gibt es keine Antworten. Sie können in Ihrer Freizeit über diese Fragen nachdenken.

1. Welche Browser werden üblicherweise zum Testen verwendet? Welche Kernel (Layout Engine) gibt es?

(F1) Browser: IE, Chrome, Firefox, Safari, Opera.

(Q2) Kernel: Trident, Gecko, Presto, Webkit.

2. Erzählen Sie mir den Unterschied zwischen Inline-Elementen und Block-Level-Elementen? Kompatibilitätsverwendung von Inline-Blockelementen? (Unter IE8)

(Q1) Inline-Elemente: werden in horizontaler Richtung angeordnet und können keine Elemente auf Blockebene enthalten. Die Einstellung „Breite“ ist ungültig, „Höhe“ ist ungültig (Zeilenhöhe kann festgelegt werden). , Rand nach oben und unten ist ungültig, Auffüllen nach oben und unten ist ungültig.

Elemente auf Blockebene: Jedes belegt eine Zeile und ist vertikal angeordnet. Beginnt in einer neuen Zeile und endet 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?

(Q1)

(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 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 muss die Breite definieren.

(7) Das übergeordnete Div definiert display:table.

(8) Fügen Sie am Ende den br-Tag „clear:both“ hinzu.

(F2) Die bessere Methode ist die dritte Methode, die von vielen Websites verwendet wird.

4. Was sind die am häufigsten verwendeten Attribute der Boxgröße? Welche Funktionen haben sie jeweils?

(Q1)box-sizing: content-box|border-box|inherit;

(Q2)content-box: Die Breite und Höhe werden auf die Inhaltsbox von angewendet das Element bzw. Zeichnet die Abstände und Ränder des Elements außerhalb der Breite und Höhe (der Standardeffekt des Elements).

border-box: Alle vom Element angegebenen Abstände und Ränder werden innerhalb der festgelegten Breite und Höhe gezeichnet. Die Breite und Höhe des Inhalts werden durch Subtrahieren des Rands und der Polsterung von der eingestellten Breite bzw. Höhe ermittelt.

5. Welche Rolle spielt Doctype? Was ist der Unterschied zwischen dem Standardmodus und dem Kompatibilitätsmodus?

(Q1) 1a309583e26acea4f04ca31122d8c535 teilt dem Parser des Browsers mit, welcher Dokumentstandard zum Parsen dieses Dokuments verwendet werden soll. Ein nicht vorhandener oder falsch formatierter DOCTYPE führt dazu, dass das Dokument im Kompatibilitätsmodus gerendert wird.

(F2) Die Formatierung und der JS-Betriebsmodus im Standardmodus laufen nach den höchsten vom Browser unterstützten Standards. Im Kompatibilitätsmodus werden Seiten weitgehend abwärtskompatibel angezeigt, wodurch das Verhalten älterer Browser simuliert wird, um zu verhindern, dass die Website nicht funktioniert.

6. Warum müssen Sie nur fef50554eca1a427827adaa329da8122 schreiben?

HTML5 basiert nicht auf SGML, daher besteht keine Notwendigkeit, auf die DTD zu verweisen, aber ein Doctype ist erforderlich, um das Browserverhalten zu regulieren (Browser so laufen zu lassen, wie sie sollten).

HTML4.01 basiert auf SGML, daher müssen Sie auf die DTD verweisen, um dem Browser den vom Dokument verwendeten Dokumenttyp mitzuteilen.

7. Was ist der Unterschied zwischen der Verwendung von Link und @import beim Importieren von Stilen in die 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. @import wird von CSS bereitgestellt und kann Wird nur zum Laden von CSS verwendet. ;

(2) Wenn die Seite geladen wird, wird gleichzeitig der Link geladen und das von @import referenzierte CSS wartet, bis die Seite geladen ist, bevor es geladen wird.

(3) Der Import ist CSS2. 1 vorgeschlagen, er kann nur in IE5 oder höher erkannt werden und der Link ist ein XHTML-Tag, daher gibt es kein Kompatibilitätsproblem.

8. Bitte stellen Sie Ihr Verständnis des Browserkerns vor.

Es ist hauptsächlich in zwei Teile unterteilt: Rendering-Engine (Layout-Ingenieur 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, daher sind auch die Rendering-Effekte unterschiedlich. 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.

Am Anfang 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.

9. Was sind die neuen Funktionen von HTML5? Wie gehe ich mit Browserkompatibilitätsproblemen mit neuen HTML5-Tags um? Wie kann man zwischen HTML und HTML5 unterscheiden?

(Q1)

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

(1) Malleinwand

(2) Video- und Audioelemente für die Medienwiedergabe

(3) Lokaler Offline-Speicher, Langzeitspeicherung von Daten geht nach dem Schließen nicht verloren;

(4) sessionStorage-Daten werden nach dem Schließen des Browsers automatisch gelöscht

(5) Inhaltselemente mit besserer Semantik, wie Artikel, Fußzeile, Kopfzeile, Navigation , Abschnitt;

(6) Formularsteuerelemente, Kalender, Datum, Uhrzeit, E-Mail, URL, Suche;

(7) Neue Technologien Webworker, Websocket, Geolocation;

(F2)

IE8/IE7/IE6 unterstützt Tags, die von der document.createElement-Methode generiert werden,

Mit dieser Funktion können Sie dafür sorgen, dass diese Browser neue HTML5-Tags unterstützen.

Nachdem der Browser die neuen Tags unterstützt, müssen Sie den Standardstil der Tags hinzufügen.

Natürlich können Sie auch direkt ausgereifte Frameworks wie html5shim verwenden,

6fc79538f41ba7309e847292db36ab30

32e61bffab02d0270fa5334285b6797e

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

Machen Sie das Richtige mit den richtigen Tags.

HTML-Semantik strukturiert den Inhalt der Seite und macht die Struktur klarer, sodass sie für Browser und Suchmaschinen einfacher zu analysieren ist.

Es wird auch ohne Stil-CSS in einem Dokumentformat angezeigt ist leicht zu lesen;

Suchmaschinen-Crawler verlassen sich auch auf HTML-Tags, um den Kontext und die Gewichtung jedes Schlüsselworts zu bestimmen, was für die Suchmaschinenoptimierung von Vorteil ist;

Machen Sie die Website für Leute, die das lesen, einfacher Quellcode Unterteilen Sie die Website in Abschnitte, um das Lesen, Warten und Verstehen zu erleichtern.

JavaScript

1. Einführung in die grundlegenden Datentypen von js

Undefiniert, Null, Boolean, Zahl, String

2 Was sind die integrierten Objekte in js?

Objekte der Datenkapselungsklasse: Objekt, Array, Boolescher Wert, 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 den indirekten Aufrufer);

Wenn es ein neues Schlüsselwort gibt, zeigt dies auf Neu. Das Objekt;

In diesem Fall verweist dies auf das Objekt, das das Ereignis ausgelöst hat. Insbesondere verweist dies im attachmentEvent im IE immer auf das globale Objektfenster.

4. Was macht die Evaluierung?

Seine Funktion besteht darin, die entsprechende Zeichenfolge in JS-Code zu analysieren und auszuführen.

Sie sollten die Verwendung von eval vermeiden, da diese unsicher und sehr leistungsintensiv ist (zweimal, einmal analysiert). js-Anweisung, einmal ausgeführt).

Beim Konvertieren von JSON-String in 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

// 创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
// 添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
// 查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性

6. Was ist der Unterschied zwischen null und undefiniert?

null ist ein Objekt, das „none“ darstellt und 0 ist, wenn es in einen numerischen Wert umgewandelt wird; undefiniert ist ein primitiver Wert, der „none“ darstellt und NaN ist, wenn es in einen numerischen Wert umgewandelt wird.

undefiniert:

(1) Wenn die Variable deklariert, aber kein Wert zugewiesen ist, ist sie gleich undefiniert.

(2) Beim Aufruf der Funktion wird der Parameter, der bereitgestellt werden soll, nicht bereitgestellt und der Parameter ist gleich undefiniert.

(3) Dem Objekt ist kein Attribut zugewiesen und der Wert dieses Attributs ist undefiniert.

(4) Wenn die Funktion keinen Wert zurückgibt, gibt sie standardmäßig undefiniert zurück.

null:

(1) Als Parameter einer Funktion bedeutet dies, dass der Parameter der Funktion kein Objekt ist.

(2) dient als Endpunkt der Objektprototypkette.

7. Was genau macht der neue Operator?

(1) Erstellt ein leeres Objekt, und die Variable this verweist auf das Objekt und erbt auch die Funktion Prototyp.

(2) Dem dadurch referenzierten Objekt werden Eigenschaften und Methoden hinzugefügt.

(3) Das neu erstellte Objekt wird dadurch referenziert und am Ende implizit zurückgegeben.

8. Kennen Sie 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 beansprucht wenig Bandbreite.

Format: Verwenden Sie Schlüssel-Wert-Paare, zum Beispiel: {'age':'12', 'name':'back'🎜>

9 () Was sind die Unterschiede und Funktionen?

Die Funktion apply() hat zwei Parameter: Der erste Parameter ist der Kontext und der zweite Parameter ist ein Array von Parametern. Wenn der Kontext null ist, wird stattdessen das globale Objekt verwendet.

Zum Beispiel: function.apply(this,[1,2,3]);

Der erste Parameter von call() ist der Kontext, gefolgt von der Parametersequenz, die von übergeben wird Beispiel.

Zum Beispiel: function.call(this,1,2,3);

10.

function whatBrowser() {
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
}

Andere

1. Was wissen Sie über HTTP-Statuscodes?

100 Weiter Im Allgemeinen gibt der Server beim Senden einer Post-Anfrage diese Informationen zurück, nachdem er den HTTP-Header gesendet hat, um eine Bestätigung anzuzeigen, und sendet dann spezifische Parameterinformationen

200 OK Normal Rückgabeinformationen

201 Erstellt Die Anfrage war erfolgreich und der Server hat eine neue Ressource erstellt

202 Akzeptiert Der Server hat die Anfrage angenommen, aber noch nicht verarbeitet

301 Permanent verschoben Die angeforderte Webseite wurde dauerhaft an einen neuen Speicherort verschoben.

302 Temporäre Weiterleitung gefunden.

303 Siehe „Andere temporäre Weiterleitung“ und verwenden Sie immer GET, um einen neuen URI anzufordern.

304 Nicht geändert Die angeforderte Webseite wurde seit der letzten Anforderung nicht geändert.

400 Bad Request Der Server kann das Format der Anfrage nicht verstehen und der Client sollte nicht erneut versuchen, eine Anfrage mit demselben Inhalt zu initiieren.

401 Nicht autorisiert Die Anfrage ist nicht autorisiert.

403 Verboten Der Zugriff ist verboten.

404 Nicht gefunden Die mit dem URI übereinstimmende Ressource konnte nicht gefunden werden.

500 Interner Serverfehler Der häufigste serverseitige Fehler.

503 Dienst nicht verfügbar Der Server kann die Anfrage vorübergehend nicht verarbeiten (möglicherweise aufgrund von Überlastung oder Wartung).

2. Welche Methoden zur Leistungsoptimierung gibt es?

(1) Reduzieren Sie die Anzahl der HTTP-Anfragen: CSS-Sprites, JS, CSS-Quellcode-Komprimierung, entsprechende Kontrolle der Bildgröße für Webseiten, CDN-Hosting, Datencache, Bildserver.

(2) Front-End-Vorlage JS + Daten, Reduzierung der durch HTML-Tags verursachten Bandbreitenverschwendung. Das Front-End verwendet Variablen zum Speichern von Ajax-Anforderungsergebnissen, wodurch keine Anforderung erforderlich ist die Anzahl der Anfragen

( 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 bedienen.

(5) Verwenden Sie weniger globale Variablen und speichern Sie die Ergebnisse der DOM-Knotensuche im Cache. Reduzieren Sie E/A-Lesevorgänge.

(6) Vermeiden Sie die Verwendung von CSS-Ausdrücken (CSS-Ausdrücken), auch bekannt als dynamische Eigenschaften (dynamische Eigenschaften).

(7) Bild vorab laden, das Stylesheet oben und das Skript unten mit Zeitstempel platzieren.

3. Was sind „Graceful Degradation“ und „Progressive Enhancement“?

Stilvolle Verschlechterung: Die Website funktioniert in allen modernen Browsern einwandfrei. Wenn der Benutzer einen älteren Browser verwendet, überprüft der Code, ob sie ordnungsgemäß funktionieren.

Aufgrund des einzigartigen Box-Modell-Layoutproblems des IE wurden die Hack-Praktiken für verschiedene Versionen des IE ordnungsgemäß herabgestuft und Kandidaten für Browser hinzugefügt, die keine Funktionen unterstützen, sodass sie in irgendeiner Weise auf älteren Browsern funktionieren können mindert die Erfahrung, macht sie aber nicht völlig ungültig.

Progressive Verbesserung: Ausgehend von den Grundfunktionen, die von allen Browsern unterstützt werden, schrittweises Hinzufügen derjenigen Funktionen, die nur von neuen Browsern unterstützt werden, und Hinzufügen zusätzlicher Stile und Funktionen zur Seite, die für den Basisbrowser nicht schädlich sind. Sie werden automatisch gerendert und funktionieren, wenn sie vom Browser unterstützt werden.

4. Welche häufigen Vorgänge können Speicherverluste verursachen?

Ein Speicherverlust ist jedes Objekt, das bestehen bleibt, nachdem Sie es nicht mehr besitzen oder benötigen.

Der Garbage Collector scannt regelmäßig Objekte und zählt die Anzahl anderer Objekte, die Verweise auf jedes Objekt haben. Wenn ein Objekt 0 Referenzen hat (keine anderen Objekte verweisen darauf) oder die einzige Referenz auf das Objekt zirkulär ist, kann der Speicher des Objekts zurückgefordert werden.

Wenn der erste Parameter von setTimeout eine Zeichenfolge anstelle einer Funktion verwendet, führt dies zu einem Speicherverlust.

Abschlüsse, Konsolenprotokolle, Schleifen (eine Schleife entsteht, wenn zwei Objekte aufeinander verweisen und sich gegenseitig beibehalten).

5. Der Unterschied zwischen Threads und Prozessen

Ein Programm hat mindestens einen Prozess und ein Prozess hat mindestens einen Thread.

Die Teilungsskala von Threads ist kleiner als die von Prozessen, wodurch Multithread-Programme eine hohe Parallelität aufweisen.

Darüber hinaus verfügt der Prozess während der Ausführung über eine unabhängige Speichereinheit, und mehrere Threads teilen sich den Speicher, wodurch die Ausführungseffizienz des Programms erheblich verbessert wird.

Threads unterscheiden sich immer noch von Prozessen während der Ausführung. Jeder unabhängige Thread verfügt über 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 ausgeführt werden und müssen im Anwendungsprogramm vorhanden sein, und das Anwendungsprogramm bietet eine Steuerung für die Ausführung mehrerer Threads.

Aus logischer Sicht bedeutet Multithreading, dass in einer Anwendung mehrere Ausführungsteile gleichzeitig ausgeführt werden können. Das Betriebssystem betrachtet mehrere Threads jedoch nicht als mehrere unabhängige Anwendungen zur Implementierung der Prozessplanung und -verwaltung sowie der Ressourcenzuweisung. Dies ist der wichtige Unterschied zwischen Prozessen und Threads.

HTML

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

HTML5 Warum müssen Sie nur fef50554eca1a427827adaa329da8122 schreiben?

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

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

Stellen Sie Ihr Verständnis des Browserkerns vor?

Was sind die gängigen Browser-Kernel?

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?

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

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

Wie verwaltet und lädt der Browser HTML5-Offline-Speicherressourcen?

Bitte beschreiben Sie den Unterschied zwischen Cookies, sessionStorage und localStorage?

Was sind die Nachteile von iframe?

Welche Funktion hat Label? Wie wird es verwendet? (Für oder Paket hinzufügen)

Wie deaktiviere ich die Funktion zur automatischen Vervollständigung im HTML5-Formular?

Wie realisiere ich die Kommunikation zwischen mehreren Registerkarten im Browser? (Ali)

Wie ist webSocket mit Low-End-Browsern kompatibel? (Alibaba)

Wozu dient die Page Visibility API?

Wie implementiert man einen kreisförmigen anklickbaren Bereich auf der Seite?

Erzielen Sie das Zeichnen einer 1 Pixel hohen Linie ohne Verwendung eines Rahmens, wodurch im Quirksmode und CSSCompat-Modus verschiedener Browser der gleiche Effekt erzielt werden kann.

Wofür wird der Webseiten-Bestätigungscode verwendet? Welche Sicherheitsprobleme werden damit gelöst?

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

CSS

Das Standard-CSS-Box-Modell einführen? Wie unterscheidet es sich vom Box-Modell niedrigerer IE-Versionen?

Was sind die CSS-Selektoren? Welche Eigenschaften können vererbt werden?

Wie wird der CSS-Prioritätsalgorithmus berechnet?

Was sind die neuen Pseudoklassen in CSS3?

Wie zentriere ich ein Div? Wie zentriere ich ein schwebendes Element? Wie zentriere ich ein absolut positioniertes Div?

Was sind die Anzeigewerte? Erklären Sie ihre Rolle.

Was sind die relativen und absoluten Positionierungsursprünge der Position?

Was sind die neuen Funktionen von CSS3?

Bitte erläutern Sie die Flexbox (flexibles Box-Layout-Modell) von CSS3 und ihre anwendbaren Szenarien.

Was ist das Prinzip beim Erstellen eines Dreiecks mit reinem CSS?

Wie entwerfe ich ein Wortlayout im Vollbildmodus?

Häufige Kompatibilitätsprobleme?

Was ist der Grund für den unsichtbaren weißen Raum zwischen li und li? Gibt es eine Lösung?

Wie ist die Kompatibilität häufig verwendeter Browser? Der Grund, welche Lösungen gibt es und welche häufig verwendeten Hack-Techniken?

Warum CSS-Stile initialisieren?

Wie unterscheidet sich die Berechnungsmethode des absoluten Einschlussblocks von der des normalen Durchflusses?

Wofür wird der Attributwert „collapse“ des Sichtbarkeitsattributs in CSS verwendet? Was wird der Unterschied zwischen verschiedenen Browsern sein?

Was passiert, wenn die Merkmale Position, Anzeige, Randkollaps, Überlauf und Float einander überlagern?

Verständnis der BFC-Spezifikation (Blockformatierungskontext)?

Wie wird die CSS-Gewichtungspriorität berechnet?

Bitte erläutern Sie, warum es zum Floating kommt und wann es gelöscht werden muss. So löschen Sie Floats

Haben Sie jemals Medienabfragen für das mobile Layout verwendet?

CSS-Präprozessor verwenden? So wie dieser?

Welche Methoden gibt es, um die Leistung von CSS zu optimieren und zu verbessern?

Wie analysiert der Browser CSS-Selektoren?

Soll ich auf Webseiten eine ungerade oder gerade Anzahl an Schriftarten verwenden? Warum?

Für welche Szenarien eignen sich Rand und Polsterung?

Wie schreibe ich das abstrakte Stilmodul? Sagen Sie mir Ihre Ideen. Haben Sie praktische Erfahrungen? [Frage im Interview mit Alibaba Air Travel] Ist die vertikale prozentuale Einstellung eines Elements relativ zur Höhe des Containers?

Was ist das Prinzip des Vollbild-Scrollens? Welche CSS-Eigenschaften werden verwendet?

Was ist responsives Design? Was sind die Grundprinzipien des responsiven Designs? Wie kann ich mit niedrigeren IE-Versionen kompatibel sein?

Parallax-Scrolling-Effekt, wie erstelle ich unterschiedliche Animationen für jede Seite? (Zurück nach oben gehen, nach unten schieben, damit es erneut erscheint, oder damit es nur einmal erscheint?) Was ist der Unterschied zwischen Doppelpunkt und Einzelpunkt in

::before und :after? Erklären Sie die Rolle dieser beiden Pseudoelemente.

Wie ändere ich den gelben Hintergrund des automatisch ausgefüllten Formulars, nachdem Chrome sich das Passwort merkt?

Was versteht man unter Zeilenhöhe?

Wie hoch ist der Anzeigewert des Elements, nachdem das Element auf Float gesetzt wurde? (Es wird automatisch zu display:block)

Wie kann ich dafür sorgen, dass Chrome Text kleiner als 12 Pixel unterstützt?

Wie kann man die Schriftarten auf der Seite mithilfe von CSS klarer und dünner machen? (-webkit-font-smoothing: antialiased;)

Dem Attribut „font-style“ kann der Wert „oblique“ zugewiesen werden. Was bedeutet oblique?

position:fixed; ist auf Android ungültig.

Wenn Sie Animationen manuell schreiben müssen, was ist Ihrer Meinung nach das Mindestzeitintervall und warum? (Ali)

display:inline-block Wann wird die Lücke angezeigt? (Ctrip)

Überlauf: Wie kann das Problem gelöst werden, dass beim Scrollen kein reibungsloser Bildlauf möglich ist?

Es gibt ein höhenadaptives Div mit zwei Divs darin, eines mit einer Höhe von 100 Pixeln, und ich hoffe, das andere füllt die verbleibende Höhe aus.

Erklären Sie diese Bildformate PNG, JPG und GIF und wann Sie sie verwenden. Haben Sie jemals etwas über WebP gelernt?

Was ist Cookie-Isolation? (Oder: So verhindern Sie, dass beim Anfordern von Ressourcen Cookies übertragen werden)

Was ist der Unterschied zwischen dem Schreiben des Style-Tags nach dem Text und vor dem Text?

JavaScript

Führt in die grundlegenden Datentypen von JavaScript ein.

Erzählen Sie mir etwas über die grundlegenden Spezifikationen zum Schreiben von JavaScript?

JavaScript-Prototyp, Prototypkette? Was sind seine Eigenschaften?

Wie viele Arten von Werten hat JavaScript? (Heap: primitiver Datentyp und Stack: Referenzdatentyp), können Sie ihr Speicherdiagramm zeichnen?

Wie implementiert Javascript die Vererbung?

Auf wie viele Arten kann Javascript Objekte erstellen?

Javascript-Bereichskettendomäne?

Sprechen Sie über das Verständnis dieses Objekts.

Was macht Evaluierung?

Was ist ein Fensterobjekt? Was ist ein Dokumentobjekt?

Was ist der Unterschied zwischen null und undefiniert?

Schreiben Sie eine allgemeine Ereignis-Listener-Funktion (Computertestfrage).

[„1“, „2“, „3“].map(parseInt) Was ist die Antwort?

Was ist in Bezug auf Ereignisse der Unterschied zwischen den Ereignismechanismen von IE und Firefox? Wie kann man das Sprudeln stoppen?

Was ist Schließung und warum sollten wir sie verwenden?

Was bedeutet „strikte Verwendung“ im JavaScript-Code? Was ist der Unterschied zwischen der Verwendung?

Wie kann man feststellen, ob ein Objekt zu einer bestimmten Klasse gehört?

Was genau macht der neue Operator?

Wurde eine Funktion mit nativem JavaScript implementiert?

In Javascript gibt es eine Funktion, die bei der Suche nach Objekten während der Ausführung niemals nach dem Prototyp sucht.

Kennen Sie JSON?

[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1< ;<24))).toString(16) }) Können Sie erklären, was dieser Code bedeutet?

Wie kann ich das Laden von js verzögern?

Was ist Ajax? Wie erstelle ich ein Ajax?

Was ist der Unterschied zwischen synchron und asynchron?

Wie löst man domänenübergreifende Probleme?

Was tun, wenn die Seitenkodierung und die angeforderte Ressourcenkodierung inkonsistent sind?

Wie führt man eine modulare Entwicklung durch?

Was sind die Unterschiede zwischen AMD- (Module/Asynchronous-Definition) und CMD- (Common Module Definition) Spezifikationen?

Was ist das Grundprinzip von requireJS? (Wie lade ich dynamisch? Wie vermeide ich mehrfaches Laden? Wie speichere ich?)

Lassen Sie sich ein requireJS selbst entwerfen und implementieren.

Sprechen Sie über Ihr Verständnis von ECMAScript6?

Wie schreibe ich Klassen in ECMAScript6? Warum erscheint eine Klasse?

Welche Methoden gibt es für das asynchrone Laden?

Was ist der Unterschied zwischen document.write und innerHTML?

DOM-Operationen – wie füge ich Knoten hinzu, entferne, verschiebe, kopiere, erstelle und finde?

.call( ) und Was ist die Bedeutung und der Unterschied von .apply()?

Was sind die nativen Methoden von Arrays und Objekten?

So implementieren Sie eine Klasse in JS. Wie instanziiere ich diese Klasse?

Bereichs- und Variablendeklarationsförderung in JavaScript?

Wie schreibe ich leistungsstarkes Javascript?

Welche Vorgänge verursachen Speicherverluste?

Haben Sie den Quellcode von JQuery gesehen? Können Sie einen kurzen Überblick über das Umsetzungsprinzip geben?

Auf welches Objekt bezieht sich diese Rückgabe der Init-Methode von jQuery.fn? Warum das zurückgeben?

Wie konvertiere ich ein Array in jquery in einen JSON-String und dann wieder zurück?

Was ist das Implementierungsprinzip der Attributkopie (Extend) von jQuery und wie implementiert man Deep Copy?

Was ist der Unterschied zwischen jquery.extend und jquery.fn.extend?

Wie wird die Warteschlange von jQuery implementiert? Wo können Warteschlangen eingesetzt werden?

Sprechen Sie über die Unterschiede zwischen bind(), live(), delegate() und on() in Jquery?

JQuery kann mehrere Ereignisse gleichzeitig an ein Objekt binden.

Kennen Sie sich mit benutzerdefinierten Veranstaltungen aus? Was bedeutet die Feuerfunktion in jQuery und wann wird sie verwendet?

Wie lässt sich jQuery mit dem Sizzle-Selektor kombinieren? (jQuery.fn.find() into Sizzle)

Optimierungsmethode für die jQuery-Leistung?

Was ist der Unterschied zwischen Jquery und jQuery UI?

Haben Sie den Quellcode von JQuery gesehen? Können Sie kurz auf das Umsetzungsprinzip eingehen?

Wie konvertiere ich ein Array in jquery in einen JSON-String und dann wieder zurück?

Was ist der Unterschied zwischen jQuery und Zepto? Was sind ihre jeweiligen Nutzungsszenarien?

Optimierungsmethode für jQuery?

Wie löst man das Click-through-Problem von Zepto?

Wie passe ich jQueryUI-Komponenten an?

Anforderung: Implementierung einer Website, die bei Seitenvorgängen nicht die gesamte Seite aktualisiert und korrekt reagieren kann, wenn sich der Browser vorwärts oder rückwärts bewegt. Geben Sie Ihren technischen Umsetzungsplan an?

Wie kann festgestellt werden, ob das aktuelle Skript in der Browser- oder Knotenumgebung ausgeführt wird? (Alibaba)

Was ist die minimale Berührungsfläche auf dem mobilen Endgerät?

jQuerys slideUp-Animation: Wenn das Zielelement durch externe Ereignisse gesteuert wird und die Maus externe Elementereignisse schnell und kontinuierlich auslöst, wird die Animation wiederholt mit Verzögerung ausgeführt. Wie soll damit umgegangen werden? 🎜>Skript ersetzen Was ist der Unterschied zwischen der Platzierung des Tags am Ende der Seite, bevor der Textkörper geschlossen wird, und nach dem Schließen? Wie wird der Browser sie analysieren?

Es gibt eine Verzögerung bei Klickereignissen auf dem mobilen Endgerät. Wie lange dauert es und warum? Wie kann diese Verzögerung behoben werden? (Klick hat eine Verzögerung von 300 ms. Um das Doppelklick-Ereignisdesign von Safari zu implementieren, muss der Browser wissen, ob Sie doppelklicken möchten.)

Kennen Sie verschiedene JS-Frameworks (Angular, Backbone, Ember, React). , Meteor, Knockout ...)? Können Sie mir ihre jeweiligen Vor- und Nachteile nennen?

Welche nativen JS-Objekte erweitert Underscore und welche nützlichen Funktionsmethoden bietet es?

Erklären Sie den Geltungsbereich und das Heben von Variablendeklarationen in JavaScript.

Welche Vorgänge verursachen Speicherverluste?

JQuery kann mehrere Ereignisse gleichzeitig an ein Objekt binden.

Welche Szenarien gelten für Node.js?

(Wenn Sie wissen, wie man Node verwendet) Kennen Sie Route, Middleware, Cluster, Nodemon, PM2, serverseitiges Rendering?

Erklären Sie die MVC-Implementierung von Backbone?

Was ist „Front-End-Routing“? Wann ist es sinnvoll, „Front-End-Routing“ zu verwenden? Wissen Sie, was ein Webkit ist? Wissen Sie, wie man einen Browser verwendet?

Wie man Front-End-Code testet? Testen Sie Ihr Front-End-Projekt (Mokka, Sinon, Jasmin, qUnit...) ?

Wofür wird Front-End-Templating (Mustache, Unterstrich, Lenker) verwendet und wie wird es verwendet?

Beschreiben Sie kurz die grundlegende Verwendung von Lenkern.

Beschreiben Sie kurz den grundlegenden Vorlagenverarbeitungsprozess von Handlerbars. Wie wird es zwischengespeichert?

Verwenden Sie js, um Tausendertrennzeichen zu implementieren? (Quelle: Front-End-Wanderarbeiter, Tipp: Normal + Ersetzen)

Wie können Browserversionen erkannt werden?

Wir binden zwei Klickereignisse gleichzeitig an einen Dom, eines über Capture und eines über Bubbling. Können Sie mir sagen, wie oft das Ereignis ausgeführt wird und ob Bubbling oder Capture zuerst ausgeführt wird? 🎜>

Weitere Fragen

Was ist der ursprüngliche Arbeitsprozess des Unternehmens und wie arbeitet man mit anderen Menschen zusammen? Wie loben Sie die Ressortzusammenarbeit?

Was war das schwierigste technische Problem, auf das Sie gestoßen sind? Wie haben Sie es gelöst?

Entwurfsmuster Wissen Sie, was Singleton, Factory, Strategie und Decrator sind?

Was sind die häufig verwendeten Bibliotheken? Häufig verwendete Front-End-Entwicklungstools? Welche Anwendungen oder Komponenten haben Sie entwickelt?

Wie rekonstruiere ich die Seite?

Listen Sie die Funktionen auf, die den IE von anderen Browsern unterscheiden.

Welches Buch besagt, dass 99 % der Websites überarbeitet werden müssen?

Was sind „Graceful Degradation“ und „Progressive Enhancement“?

Verstehen Sie die Verschlüsselung mit öffentlichem Schlüssel und die Verschlüsselung mit privatem Schlüssel?

Welche Möglichkeiten gibt es für WEB-Anwendungen, Daten aktiv vom Server an den Client zu übertragen?

Haben Sie Ihre eigene Meinung zu den Vor- und Nachteilen von Node?

Welche Methoden zur Front-End-Leistungsoptimierung haben Sie verwendet?

Was sind die HTTP-Statuscodes? Was bedeuten sie?

Was passiert im Prozess von der Eingabe der URL bis zum Abschluss des Seitenladens und der Anzeige einer Seite? (Je detaillierter der Prozess ist, desto besser)

Benutzer in einigen Bereichen berichteten, dass die Website sehr feststeckt. Was sind die möglichen Gründe und Lösungen?

Was passiert im gesamten Prozess vom Öffnen der App bis zum Aktualisieren des Inhalts? Wenn es sich langsam anfühlt, wie kann man das Problem lokalisieren und wie kann man es lösen?

Zusätzlich zum Front-End? Kennen Sie weitere Technologien? Was ist Ihre größte Fähigkeit?

Mit welcher Editor- und Entwicklungsumgebung sind Sie vertraut?

Wie verstehen Sie die Position des Front-End-Schnittstelleningenieurs? Wie sind seine Aussichten?

Was halten Sie von Web App, Hybrid App, Native App?

Verstehen Sie sich mit der mobilen Frontend-Entwicklung aus? (Was ist der Hauptunterschied zur Web-Frontend-Entwicklung?)

Was halten Sie von Überstunden?

Wie verwalten Sie normalerweise Ihre Projekte?

Erzählen Sie uns etwas über die beliebtesten Dinge der letzten Zeit? Welche Websites besuchen Sie häufig?

Wie entwerfe ich eine plötzliche, groß angelegte Parallelitätsarchitektur?

Erzählen Sie uns etwas über die beliebtesten Dinge der letzten Zeit? Welche Websites besuchen Sie häufig?

Kennen Sie die Open-Source-Tools Bower, NPM, Yeoman, Grunt, Gulp und welche notwendigen Felder hat package.json in einem NPM-Paket? (Name, Versionsnummer, Abhängigkeiten)

Die Codestruktur jedes Moduls sollte relativ einfach sein und die Beziehung zwischen den einzelnen Modulen sollte auch sehr klar sein. Mit zunehmender Anzahl von Funktionen und Iterationen sollten Sie wissen, wie Sie vorgehen diesen Zustand beibehalten?

Kennt Git Branch, Diff, Merge?

Wie entwerfe ich eine plötzliche, groß angelegte Parallelitätsarchitektur?

Wenn das Team nicht genügend Arbeitskräfte hat und Überstunden machen muss, um den Funktionscode fertig zu schreiben, werden Sie dann Front-End-Codetests durchführen?

Erzählen Sie uns etwas über die beliebtesten Dinge der letzten Zeit? Welche Websites besuchen Sie normalerweise?

Wissen Sie, was SEO ist und wie man es optimiert? Kennen Sie die Bedeutung verschiedener Metadaten?

Wie kann man das Benutzererlebnis auf dem mobilen Endgerät (Android iOS) verbessern?

Eine kurze Beschreibung Erzählen Sie uns etwas über den Entwicklungsprozess für mobile APP-Projekte, den Sie durchgeführt haben?

Welche Rolle spielen Sie im aktuellen Team und welche wichtige Rolle spielen Sie?

Was ist Ihrer Meinung nach ein Full-Stack-Entwickler?

Stellen Sie eines Ihrer stolzesten Werke vor?

Haben Sie einen eigenen Technologie-Blog? Welche Technologien verwenden Sie?

Was halten Sie von der Front-End-Sicherheit?

Verstehen Sie Web-Injection-Angriffe? Inwieweit verstehen Sie die beiden häufigsten Angriffe (XSS und CSRF)?

Welche beeindruckenden technischen Probleme traten im Projekt auf? Was waren die konkreten Probleme und wie wurden sie gelöst? .

Was lernst du in letzter Zeit?

Was sind deine Stärken? Was sind die Nachteile?

Wie leitet man ein Front-End-Team?

Was lernen Sie in letzter Zeit? Können Sie über Ihre Pläne für die nächsten 3 oder 5 Jahre sprechen?