Ab heute beginnen wir mit der Aktualisierung der Basis-Fragendatenbank für Front-End-Interviews und teilen jeden Tag zehn klassische Front-End-Interviewfragen. Willkommen zum gemeinsamen Lernen.
Inhaltsverzeichnis
4. Welche Bereiche und Eigenschaften haben let, const und var in JavaScript?
5. Bitte beschreiben Sie kurz Ihr Verständnis des MVVM-Frameworks
6. Bitte geben Sie ein Beispiel für den Abschluss.
7. Was ist das MVC-Architekturmuster?
8. Wie implementiert man Lazy Loading?
9. Wie optimieren Sie die Website-Performance?
10. Wie lassen sich Browserkompatibilitätsprobleme lösen?
1. Was ist ein Verschluss? Bitte beschreiben Sie kurz die Eigenschaften und Anwendungsszenarien des Verschlusses .
Ein Abschluss ist eine in einer Funktion verschachtelte Funktion, die auf Variablen im Rahmen anderer Funktionen zugreifen kann, auch wenn diese Variablen nach Beendigung des Funktionsaufrufs noch vorhanden sind.
Eigenschaften von Verschlüssen:
1. Kann auf Variablen außerhalb der Funktion zugreifen
2. Die innere Funktion enthält den Umfang der äußeren Funktion
3. Kann auf Parameter und lokale Variablen externer Funktionen zugreifen
4. Nachdem die externe Funktion zurückgekehrt ist, behält die interne Funktion weiterhin den Umfang der externen Funktion
Anwendungsszenarien von Verschlüssen:
1. Kapseln Sie Klassenbibliotheken und verbergen Sie interne Implementierungsdetails
2. Verzögerte Ausführung, z. B. Ereignisbindung und Rückruffunktionen
3. Simulieren Sie den Umfang auf Blockebene, z. B. das Erstellen eines Timers in einer Schleife
4. Wird als Funktion zur sofortigen Ausführung (IIFE) verwendet, um zu verhindern, dass Variablen den globalen Namespace verschmutzen
2. Welche Lösungen gibt es zur Frontend-Performance-Optimierung? Bitte listen Sie mindestens drei Lösungen und beschreiben Sie diese im Detail.
Zu den Lösungen zur Front-End-Leistungsoptimierung gehören:
1. Netzwerkanfragen reduzieren: JS- und CSS-Dateien zusammenführen, CSS Sprites, Iconfont, WebFont und andere Methoden verwenden, um Bildanfragen zu reduzieren, JS-, CSS-, HTML-Codes usw. komprimieren.
2. Reduzieren Sie die Ladezeit von Ressourcen: Verwenden Sie CDN-Dienste, Browser-Caching, Server-Caching, HTTP-Caching, LocalStorage-Caching und andere Technologien.
3. Reduzieren Sie das Neuzeichnen und Umfließen von Seiten: Reduzieren Sie DOM-Vorgänge, verwenden Sie CSS3-Animationen anstelle von JS-Animationen, verwenden Sie Attribute wie Transformation, Deckkraft, Position, Überlauf usw. anstelle von Rand und Auffüllung.
3. Bitte beschreiben Sie kurz den Unterschied zwischen HTTPS und HTTP . Wie kann die Sicherheit von HTTPS gewährleistet werden?
HTTPS (HyperText Transfer Protocol Secure) ist eine erweiterte Version des HTTP-Protokolls. Es verschlüsselt und überträgt Daten über das SSL/TLS-Protokoll, um eine sichere und zuverlässige Kommunikation zu gewährleisten.
Die Unterschiede sind wie folgt:
1. Die HTTP-Kommunikation verwendet Klartextübertragung und weist eine geringe Sicherheit auf. HTTPS verwendet SSL/TLS, um Daten für die Übertragung zu verschlüsseln, und weist eine hohe Sicherheit auf.
2. HTTP verwendet standardmäßig Port 80 und HTTPS verwendet standardmäßig Port 443.
3. HTTPS erfordert die Verwendung digitaler Zertifikate, die von CA-Organisationen ausgestellt werden, um die Legitimität der Identitäten beider Kommunikationsparteien sicherzustellen.
Maßnahmen zur Gewährleistung der HTTPS-Sicherheit:
1. Während des TLS-Handshake-Prozesses werden asymmetrische Verschlüsselungsalgorithmen (RSA, DSA, ECC usw.) verwendet, um symmetrische Verschlüsselungsalgorithmen und Schlüssel auszuhandeln.
2. Die Überprüfung der Zertifikatskette stellt die Legitimität der Identitäten beider Kommunikationsparteien sicher.
3. Verwenden Sie schnelle Verschlüsselungsalgorithmen wie AES (Advanced Encryption Standard) usw.
4. Cookie-Sicherheitsverwaltung, z. B. Verhindern der Übertragung über http, Verwendung von Secure-, HttpOnly-Attributen usw.
5. Aktivieren Sie HTTP Strict Transport Security (HSTS), um Man-in-the-Middle-Angriffe zu verhindern, und verwenden Sie Content Security Policy (CSP), um XSS- und CSRF-Angriffe zu verhindern.
4. Welche Bereiche und Eigenschaften haben let , const und var in JavaScript ?
Eigenschaften von let und const:
1. Es ist nur innerhalb dieses Bereichs auf Blockebene gültig. Auf Variablen außerhalb des Bereichs auf Blockebene kann nicht zugegriffen werden.
2. Doppelte Deklarationen im gleichen Geltungsbereich sind nicht möglich.
3. Sobald eine von const deklarierte Variable deklariert und ihr ein Wert zugewiesen wurde, darf sie nicht mehr geändert werden.
Eigenschaften von var
1. Es gibt eine Variablenförderung, die zuerst verwendet und dann deklariert werden kann, und die Deklaration und Zuweisung kann separat geschrieben werden. Wenn Sie typeof vor der Variablen verwenden, wird kein Fehler gemeldet.
2. Die Deklaration wird an die Spitze des globalen Bereichs oder Funktionsbereichs verschoben.
3. Wenn eine Variable im globalen Bereich deklariert wird, wird eine Eigenschaft des globalen Objekts erstellt und auf die Variable kann über das globale Objekt zugegriffen werden.
5. Bitte beschreiben Sie kurz Ihr Verständnis des MVVM- Frameworks.
MVVM ist die Abkürzung für Model-View-ViewModel, eine Front-End-Framework-Idee. In der MVWM-Architektur sind View und
ViewModel ist unabhängig voneinander und die beiden verwenden Datenbindungstechnologie, um eine bidirektionale Datenbindung zu erreichen.
Vorteile des MVVM-Frameworks:
1. Durch die bidirektionale Datenbindung und die automatische Aktualisierung von Ansichten wird eine große Menge an manuellem DOM-Manipulationscode reduziert.
2. Eine klare Codeorganisation, modulare Entwicklung und die Trennung von View und ViewModel erleichtern die Codepflege und die gemeinsame Entwicklung.
3. Umfangreiche offizielle Bibliotheken und Bibliotheken von Drittanbietern bieten eine große Anzahl vorgefertigter Komponenten und Funktionen.
Nachteile des MVVM-Frameworks:
1. Die Datenbindung verbraucht eine gewisse Menge an Speicher und Leistung, insbesondere bei umfangreichen Datenaktualisierungen ist der Leistungsverbrauch offensichtlicher.
2. Sie müssen einige neue Grammatik- und Gebrauchsregeln lernen.
3. Die Anpassbarkeit von Komponenten ist gering und muss innerhalb des vom Framework bereitgestellten Rahmens angepasst werden.
6. Bitte geben Sie ein Beispiel für den Abschluss.
function outerFunc(){
var name = 'Jack';
function innerFunc(){
console.log(name);
}
retun ineFunc;
}
var func = outerFunc();
func();//'Jack'
In diesem Beispiel hat die Funktion innerFunc() Zugriff auf die äußere Namensvariable, es handelt sich also um eine Abschlussfunktion. Die Funktion „outerFunc()“ gibt die Funktion „innerFunc()“ zurück und weist die Funktion „innerFunc()“ der Variablen func zu. Wenn func() aufgerufen wird, kann die Funktion „innerFunc()“ auf den Namen der externen Variablen zugreifen und Jack ausgeben.
7. Was ist das MVC- Architekturmuster ?
Das MVC-Architekturmuster (Model View Controller) ist eine Möglichkeit, eine Anwendung in drei grundlegende Teile zu unterteilen:
1. Modell, Ansicht und Controller.
2. Das Modell wird verwendet, um die Kerndaten der Anwendung darzustellen, die Ansicht wird verwendet, um die Daten anzuzeigen, und der Controller wird verwendet, um die Benutzerinteraktion abzuwickeln.
3. Das MVC-Muster erleichtert die Anwendungsentwicklung und -wartung und hilft Entwicklern, den Code besser zu verwalten und sich auf die Kernlogik der Anwendung zu konzentrieren.
8. Wie implementiert man Lazy Loading?
1. Intersection Observer-API
2. Verwenden Sie Bildplatzhalter
3. Verwenden Sie die Attribute data-src und data-srcset
4. Verwenden Sie JavaScript, um Elemente zu geeigneten Zeitpunkten usw. einzufügen.
Unter anderem ist die Intersection Observer API eine von modernen Browsern bereitgestellte Methode zur Beobachtung, ob sich ein Element im Ansichtsfenster befindet, und kann Funktionen wie das verzögerte Laden von Bildern implementieren.
9. Wie optimieren Sie die Website-Performance?
Die Optimierung der Website-Performance umfasst Methoden wie die Reduzierung der Anzahl von Anfragen, die Komprimierung von Dateien und die Optimierung von Bildern. Insbesondere können Sie die CDN-Beschleunigung verwenden, Browser-Caching aktivieren, Komprimierungsalgorithmen zum Komprimieren von Dateien verwenden usw.
10. Wie lassen sich Browserkompatibilitätsprobleme lösen?
Sie können CSS-Hack, JavaScript Polyfill, IE6-8-spezifische CSS-Eigenschaften und andere Methoden verwenden, um Browserkompatibilitätsprobleme zu lösen. Sie können auch CSS-Spezifikationen und JavaScript-Details verwenden, um Kompatibilitätsprobleme zu vermeiden.