Teilen Sie einen Artikel über echte Front-End-Interviewfragen

Ich habe einige hochfrequente Interviewfragen gesammelt und sie für bedürftige Studenten aufgezeichnet. Dieser Artikel konzentriert sich auf grundlegende Interviewfragen. Er testet hauptsächlich, ob die Grundlage der Front-End-Technologie solide ist und ob das Front-End-Wissenssystem in Reihe geschaltet werden kann.

F: So entwerfen Sie eine Komponentenkapselung

1. Der Zweck der Komponentenkapselung besteht in der Wiederverwendung, der Verbesserung der Entwicklungseffizienz und der Codequalität.
2. Geringe Kopplung, Einzelverantwortung, wiederverwendbare Leistung , Wartbarkeit

F: js asynchrone Lademethode

1 Die Rendering-Engine stoppt, wenn sie auf ein Skript-Tag trifft, wartet, bis das Skript ausgeführt wird, und rendert weiter nach unten/
2, defer bedeutet „nach dem Rendern ausführen“, async bedeutet „nach dem Herunterladen ausführen“. Wenn defer mehrere Skripte hat, werden diese in der Reihenfolge geladen, in der sie auf der Seite erscheinen. Bei mehreren asynchronen Skripten kann die Ladereihenfolge nicht garantiert werden
3. Laden Wenn Sie type=module für das es6-Modul festlegen, wird der Browser durch das asynchrone Laden nicht blockiert. Sie können auch das async-Attribut hinzufügen, um das Skript asynchron auszuführen (dies entspricht einem undefinierten Syntaxpunkt). , Sie können den aktuellen Code erkennen (ob er sich im ES6-Modul befindet)

F: Der Unterschied zwischen CSS-Animation und JS-Animation
1 Codekomplexität, JS-Animationscode ist relativ kompliziert
2. Steuerung der Animation, wenn die Animation ausgeführt wird. Bis zu einem gewissen Grad kann js animieren, anhalten, abbrechen und beenden, aber CSS-Animationen können keine Ereignisse hinzufügen
3. Betrachtet man die Animationsleistung, verfügt die js-Animation über einen zusätzlichen js-Analyseprozess und die Leistung ist nicht so gut wie CSS-Animation

F: Zwei Arten von Cross-Site-Angriffen, XSS und CSRF
1. XSS-Cross-Site-Scripting-Angriffe finden hauptsächlich auf der Front-End-Ebene statt. Benutzer fügen Angriffsskripte ein auf der Eingabeebene, um die Anzeige der Seite zu ändern oder Website-Cookies zu stehlen: Nicht glauben Bei allen Benutzervorgängen werden Benutzereingaben maskiert und js darf keine Cookies lesen und schreiben
2. CSRF-Kreuz -Fälschung von Site-Anfragen, Senden böswilliger Anfragen in Ihrem Namen, Filterung durch Cookies und Parameter usw.
3. Wir können Angriffe nicht vollständig verhindern, wir können nur die Angriffsschwelle erhöhen

F: Ereignisdelegation, Zweck, Funktion, Schreibmethode
1. Ereignisse eines oder einer Gruppe von Elementen an die übergeordnete Ebene oder an äußere Elemente delegieren
2. Vorteile: Speicherverbrauch reduzieren, Ereignisse dynamisch binden
3. Ziel ist das spezifischstes Element, das das Ereignis auslöst, und currenttarget ist das Element, an das das Ereignis gebunden ist (im Allgemeinen gleich diesem in der Funktion) )

F: Thread, Prozess

Thread ist die kleinste Ausführungseinheit, und der Prozess ist die kleinste Ressourcenverwaltungseinheit
2. Ein Thread kann nur zu einem Prozess gehören, und ein Prozess kann mehrere Threads haben, aber es muss mindestens einen Thread geben

F: Lastausgleich

Wenn das System einer großen Anzahl von Benutzerbesuchen ausgesetzt ist und die Last zu hoch ist, ist es normalerweise erforderlich, die Anzahl der Server für die horizontale Erweiterung zu erhöhen und Clustering und Lastausgleich zu verwenden, um das zu verbessern Verarbeitungskapazität des gesamten Systems

F: Was ist CDN-Cache

1. CDN ist eine Bereitstellungsstrategie, die Dienste wie Nginx nach verschiedenen Regionen bereitstellt. Statische Ressourcen werden zwischengespeichert. Wenn das Front-End das Projekt optimiert, ist es üblich, der Plattformressource einen Hash-Wert hinzuzufügen und den Hash bei jeder Aktualisierung zu ändern. Wenn sich der Hash-Wert ändert, ruft der Dienst die Ressource erneut ab
2. (CDN) ist ein strategisch eingesetztes Gesamtsystem, das vier Elemente umfasst: verteilter Speicher, Lastausgleich, Netzwerkanforderungsumleitung und Inhaltsverwaltung

F: Wie schreibt man Abschlüsse, die Rolle von Abschlüssen und die Mängel von Abschlüsse

1. Der Zweck der Verwendung von Abschlüssen besteht darin, Variablen auszublenden, indirekt auf eine Variable zuzugreifen und Funktionen außerhalb des lexikalischen Bereichs der definierten Funktion aufzurufen
2. Der Speicherverlust von Abschlüssen ist ein Fehler des IE . Schließungen Nach der Verwendung des Pakets kann der Verweis auf die Schließung nicht wiederhergestellt werden, was zu Speicherverlusten führt

F: Domänenübergreifendes Problem, wer domänenübergreifend einschränkt und wie man es löst

1. Verursacht durch die Same-Origin-Richtlinie des Browsers.
2. Wichtiger Sicherheitsmechanismus zum Isolieren potenziell bösartiger Dateien
3 Reverse-Proxy (interne Konfiguration des Nginx-Dienstes Access-Control-Allow-Origin *)
CORS-Front-End- und Back-End-Zusammenarbeit zum Festlegen von Anforderungsheadern, Access-Control-Allow-Origin und anderen Header-Informationen

F: Häufige Speicherleckfallen in Javascript

1. Speicherlecks verursachen eine Reihe von Problemen, wie zum Beispiel: langsamer Betrieb, Abstürze, hohe Latenz

2. Speicherlecks beziehen sich auf Variablen, die Sie nicht verwenden können verwenden (kann nicht darauf zugreifen), belegen immer noch Speicherplatz und können nicht erneut verwendet werden. Nutzen Sie es
3. Unerwartete globale Variablen. Dies sind Variablen, die nicht recycelt werden (sofern sie nicht auf Null gesetzt oder neu zugewiesen werden), insbesondere solche Variablen, die vorübergehend verwendet wurden Speichern Sie große Informationsmengen
4. Periodische Funktionen werden immer während des Betriebs verwendet. jq entfernt den Ereignis-Listener vor dem Entfernen des Knotens
5. Es gibt einen Verweis auf den DOM-Knoten in js Wenn der Dom-Knoten entfernt wird, bleibt die Referenz erhalten.

F: Was ist das Prinzip der Babel-Konvertierung von ES6? Die Eingabesprache ist ES6+ und die Kompilierungszielsprache ist ES5

2 , Parsen: Analysieren Sie die Codezeichenfolge in einen abstrakten Syntaxbaum

3. Transformation: Transformieren Sie den abstrakten Syntaxbaum

4. Rekonstruktion: Generieren Sie den Code neu Zeichenfolge gemäß dem transformierten abstrakten Syntaxbaum

F: Promise-Simulation wird beendet

1 Wenn das neue Objekt im Status „ausstehend“ bleibt, beendet die ursprüngliche Promise-Kette die Ausführung.

2. return new Promise(()=>{}); // Das Promise-Objekt im Status „ausstehend“ zurückgeben

F: Was sind die Ergebnisse, wenn man Promise in Try Catch einfügt? an die nächste übergeben. Catch-Anweisungserfassung
2. Wenn ein Fehler in der Promise-Kette ausgelöst wird, werden die Fehlerinformationen entlang des Links zurückgereicht, bis sie erfasst werden

F: Optimierung der Website-Leistung

1. Reduzieren Sie in Bezug auf http-Anfragen die Anzahl der Anfragen und das Anfragevolumen. Der entsprechende Ansatz besteht darin, die Projektressourcen zu komprimieren, die DNS-Auflösung der Projektressourcen auf 2 bis 4 Domänennamen zu steuern und die Stile zu extrahieren Ankündigungen, öffentliche Komponenten, Sprites und Cache-Ressourcen.

2. Komprimieren Sie Ressourcen, extrahieren Sie öffentliche Ressourcen, extrahieren Sie CSS, öffentliche JS-Methoden Bibliothek)
4. Verwenden Sie CDN, werfen Sie nutzlose Cookies weg
5. Reduzieren Sie das Neuzeichnen und Umfließen, trennen Sie das Lesen und Schreiben von CSS-Attributen. Verwenden Sie am besten kein js, um Stile zu ändern, dom offline zu aktualisieren und die Größe anzugeben des Bildes vor dem Rendern
6. Optimieren Sie die js-Codeebene, um sie zu reduzieren. Verwenden Sie bei der Berechnung von Zeichenfolgen Verschlüsse entsprechend und platzieren Sie das Laden von js-Ressourcen auf dem ersten Bildschirm unten

F: Implementierung benutzerdefinierter js-Ereignisse

1. Bietet nativ 3 Methoden zum Implementieren benutzerdefinierter Ereignisse. Definieren Sie Ereignisse.

2. Legen Sie den Ereignistyp fest, ob es sich um ein HTML-Ereignis oder ein initEvent-Initialisierungsereignis handelt. ob Sprudeln erlaubt ist, ob benutzerdefinierte Ereignisse blockiert werden sollen

4. DispatchEvent-Triggerereignis

F: Angular bidirektionale Datenbindung und vue data bidirektionale Datenbindung

1 typische Vertreter der MVVM-Musterentwicklung

2. Angular wird durch Dirty-Erkennung implementiert. Angular stellt UI-Ereignisse, Anforderungsereignisse, Settimeout und andere verzögerte Objekte in die Dirty-Warteschlange der Ereignisüberwachung Wird ausgelöst, um die Daten zu aktualisieren und die Ansicht zu rendern.

3. Vue führt die Implementierung von Datenattributen im Daten-Hijacking und Publish-Subscribe-Modell grob so aus, dass sie aus drei Modulen besteht Rendering von Vorlagenfragmenten, und der Watcher dient als Brücke, um die beiden zu verbinden, indem er Datenänderungen abonniert und Ansichten aktualisiert.

F: Der Unterschied zwischen Get- und Post-Kommunikation
1. Get-Anfragen können zwischengespeichert werden , aber Post kann nicht

2. Post ist etwas sicherer als Get, da Get-Anfragen in der URL enthalten sind und zwischengespeichert werden. Der Browser speichert den Verlauf, Post jedoch nicht, aber das Gleiche gilt für die Paketerfassung .

3. Post kann mehr Daten übertragen als Get über diese Technologie.
4 Die URL hat eine Längenbeschränkung, die sich auf die Get-Anfrage auswirkt Browser, nicht RFC-Bestimmungen
5. Post unterstützt mehr Codierungstypen und schränkt die Datentypen nicht ein

F: Haben Sie einige Prinzipien und Mechanismen von Webpack studiert und wie man sie implementiert?
1 Webpack-Konfigurationsparameter: Führen Sie die von der Shell übergebenen und in der Datei webpack.config.js konfigurierten Parameter zusammen, um das endgültige Konfigurationsergebnis zu erzielen.

2. Registrieren Sie alle konfigurierten Plug-Ins, damit die Plug-Ins die Ereignisknoten des Webpack-Build-Lebenszyklus überwachen und entsprechend reagieren können.

3. Beginnen Sie mit dem Parsen der Dateien aus der konfigurierten Eintragsdatei, um einen AST-Syntaxbaum zu erstellen, ermitteln Sie die Dateien, von denen jede Datei abhängt, und fahren Sie rekursiv fort.
4. Suchen Sie während des rekursiven Prozesses der Dateianalyse den geeigneten Loader zum Konvertieren der Datei basierend auf dem Dateityp und der Loader-Konfiguration.
5. Nach Abschluss der Rekursion wird das Endergebnis jeder Datei abgerufen und der Codeblockblock gemäß der Eintragskonfiguration generiert.
6. Alle Chunks in das Dateisystem ausgeben.

F: Der Unterschied zwischen ES6-Modul und CommonJS-Modul

1 Das CommonJS-Modul gibt eine Kopie des Werts aus, während das ES6-Modul einen Verweis auf den Wert ausgibt

2 Das CommonJS-Modul wird zur Laufzeit geladen, das ES6-Modul ist die Ausgabeschnittstelle zur Kompilierungszeit

3. Die von ES6 eingegebene Modulvariable ist nur ein symbolischer Link, daher ist diese Variable schreibgeschützt und es wird ein Fehler gemeldet, wenn dies der Fall ist wird neu zugewiesen

F: Modul lädt AMD-, CMD-, CommonJS-Module/2.0-Spezifikationen
1 Der Zweck dieser Spezifikationen ist die modulare Entwicklung von JavaScript, insbesondere auf der Browserseite

Für abhängige Module, AMD wird im Voraus ausgeführt, CMD verzögert die Ausführung

3. CMD fördert Abhängigkeiten in der Nähe, AMD fördert Abhängigkeiten im Vordergrund

F: Knotenereignisschleife, Unterschiede in der js-Ereignisschleife

1. Node.js-Ereignisschleife ist in 6 Phasen unterteilt

2. Der Ausführungszeitpunkt der Mikrotask-Aufgabenwarteschlange ist in der Browser- und Node-Umgebung unterschiedlich

In Node.js wird Mikrotask zwischen verschiedenen Phasen der Ereignisschleife ausgeführt

Auf der Browserseite wird die Mikrotask ausgeführt
, nachdem die Makrotask der Ereignisschleife ausgeführt wurde. 3. Der rekursive Aufruf von „process.nextTick()“ führt zu einer E/A-Verknappung. Die offizielle Empfehlung lautet, setImmediate() zu verwenden >
F: Probleme mit flachem Kopieren und tiefem Kopieren gelten nur für komplexe Typen wie Objekt und Array.
2 Mit anderen Worten: a und b verweisen auf denselben Speicher Wenn also ein Wert geändert wird, folgt der andere Wert den Änderungen. Dies ist eine flache Kopie. 3. Flache Kopie: Die Methode „Object.assign()“ wird verwendet, um die Werte aller aufzählbaren Eigenschaften von einem oder mehreren zu kopieren Weitere Quellobjekte werden zum Zielobjekt zurückgegeben
4. Deep Copy, JSON.parse() und JSON.stringify() geben uns eine grundlegende Lösung, aber die Funktion kann nicht korrekt verarbeitet werden

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