Umfassend: Detaillierte Zusammenfassung der Front-End-Interviewfragen
不言
Freigeben： 2020-09-01 16:12:49
nach vorne
6233 Leute haben es durchsucht
Beim Inhalt dieses Artikels geht es um Vollständigkeit: Eine detaillierte Zusammenfassung der Front-End-Interviewfragen, die einen gewissen Referenzwert hat, kann darauf verweisen.
1. Selbstvorstellung: Neben grundlegenden persönlichen Informationen möchte der Interviewer erfahren, was Sie einzigartig macht und welche Stärken Sie haben.
2. Projekteinführung
3. Wie sehen Sie die Frontend-Entwicklung?
4. Wie lernt man normalerweise Frontend-Entwicklung?
5. Was ist der Plan für die nächsten drei bis fünf Jahre?
Die Werte Position, Relativ und Absolut sind relativ zu wem positioniert?
absolut: Erzeugt absolut positionierte Elemente, relativ zur nächstgelegenen Ebene erfolgt die Positionierung nicht
statisches übergeordnetes Element zur Positionierung.
fixed (vom alten IE nicht unterstützt) generiert absolut positionierte Elemente, normalerweise relativ zum Browserfenster oder
Rahmen zur Positionierung.
relativ Erzeugt ein relativ positioniertes Element, das relativ zu seiner Position im normalen Fluss positioniert ist.
statischer Standardwert. Es gibt keine Positionierung, das Element erscheint im normalen Fluss
Sticky generiert klebrige Positionierungselemente, die Position des Containers wird basierend auf dem normalen Dokumentenfluss berechnet
So lösen Sie Kreuz -Domänenprobleme
JSONP:
Das Prinzip ist: Fügen Sie das Skript-Tag dynamisch ein und führen Sie eine JS-Datei über das Skript-Tag ein. Nachdem die JS-Datei erfolgreich geladen wurde, wird die Funktion ausgeführt Der im URL-Parameter angegebene Parameter wird ausgeführt und übergibt die JSON-Daten, die wir als Parameter benötigen.
Aufgrund der Einschränkung der Same-Origin-Richtlinie erlaubt XmlHttpRequest nur Anfragen für Ressourcen von der aktuellen Quelle (Domänenname, Protokoll, Port). Um domänenübergreifende Anfragen zu implementieren, können Sie domänenübergreifende Anfragen implementieren. Domänenanfragen über das Skript-Tag, dann JSON-Daten auf dem Server ausgeben und die Rückruffunktion ausführen, um domänenübergreifende Datenanfragen zu lösen.
Der Vorteil besteht darin, dass es eine gute Kompatibilität aufweist, einfach und benutzerfreundlich ist und die bidirektionale Kommunikation zwischen dem Browser und dem Server unterstützt. Der Nachteil besteht darin, dass nur GET-Anfragen unterstützt werden.
JSONP: json+padding (inneres Auffüllen) dient, wie der Name schon sagt, dazu, JSON in eine Box zu füllen
<script>
function createJs(sUrl){
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = sUrl;
document.getElementsByTagName('head')[0].appendChild(oScript);
}
createJs('jsonp.js');
box({
'name': 'test'
});
function box(json){
alert(json.name);
}
</script>
Nach dem Login kopieren
CORS
Serverseitig Für CORS wird die Unterstützung hauptsächlich durch die Einstellung Access-Control-Allow-Origin bereitgestellt. Wenn der Browser die entsprechenden Einstellungen erkennt, kann er den domänenübergreifenden Ajax-Zugriff ermöglichen.
Übergreifen Sie Subdomains, indem Sie document.domain ändern.
Legen Sie die document.domain der Subdomain und der Hauptdomain auf dieselbe Hauptdomain fest. Voraussetzung: Die beiden Domainnamen müssen zur selben Basisdomain gehören Name! Und die verwendeten Protokolle und Ports müssen konsistent sein, sonst kann document.domain nicht für domänenübergreifende Zwecke verwendet werden
Wenn die Hauptdomäne dieselbe ist, verwenden Sie document.domain
Fenster verwenden. Name für domänenübergreifend
Das Fensterobjekt verfügt über ein Namensattribut, das eine Eigenschaft aufweist: Das heißt, innerhalb des Lebenszyklus eines Fensters (Fensters) teilen sich alle vom Fenster geladenen Seiten einen window.name. und jede Seite window.name verfügt über Lese- und Schreibberechtigungen. window.name bleibt auf allen von einem Fenster geladenen Seiten bestehen
Verwenden Sie die in HTML5 neu eingeführte Methode window.postMessage, um Daten domänenübergreifend zu übertragen
Es gibt auch domänenübergreifende Methoden wie Flash und das Einrichten von Proxy-Seiten auf dem Server. Persönlich denke ich, dass die window.name-Methode nicht kompliziert ist und mit fast allen Browsern kompatibel ist. Dies ist wirklich eine hervorragende domänenübergreifende Methode.
Was ist der Unterschied zwischen XML und JSON?
(1).
Im Vergleich zu XML hat JSON eine kleinere Datengröße und eine schnellere Übertragungsgeschwindigkeit.
(2).
Die Interaktion zwischen JSON und JavaScript ist bequemer, einfacher zu analysieren und zu verarbeiten und sorgt für eine bessere Dateninteraktion.
(3).
JSON beschreibt Daten weniger als XML.
(4).
JSON ist viel schneller als XML.
Sprechen Sie über Ihre Ansichten zu Webpack
WebPack ist ein Modulpaketierungstool. Sie können WebPack verwenden, um Ihre Modulabhängigkeiten zu verwalten und zu kompilieren, was die Ausgabemodule benötigen . Es kann HTML, JavaScript, CSS und verschiedene statische Dateien (Bilder, Schriftarten usw.), die in der Webentwicklung verwendet werden, gut verwalten und verpacken, wodurch der Entwicklungsprozess effizienter wird. Für verschiedene Arten von Ressourcen verfügt Webpack über entsprechende Modullader. Der Webpack-Modul-Packager analysiert schließlich die Abhängigkeiten zwischen Modulen
Es werden optimierte und zusammengeführte statische Ressourcen generiert.
2.Loader kann verschiedene Arten statischer Dateien verarbeiten und unterstützt Verkettungsvorgänge
Webpack schreibt Skripte in Form von commonJS, bietet aber auch umfassende Unterstützung für AMD/CMD, was die Codemigration alter Projekte erleichtert.
Webpack verfügt über die Funktionen von requireJs und browserify, verfügt aber dennoch über viele eigene neue Funktionen:
1 Kompatibel mit CommonJS-, AMD- und ES6-Syntax
2 . Paketierung wird für Ressourcendateien wie JS, CSS und Bilder unterstützt
3.
Der Inline-Modullader und der Plug-in-Mechanismus ermöglichen eine bessere Flexibilität und Skalierbarkeit, z. B. die Bereitstellung von Unterstützung für CoffeeScript und ES6
4.
Es gibt eine unabhängige Konfigurationsdatei webpack.config.js
5 Der Code kann in verschiedene Abschnitte geschnitten werden, um ihn bei Bedarf zu laden, wodurch die Initialisierungszeit verkürzt wird
6
SourceUrls und SourceMaps, einfach zu debuggen
Verfügt über eine leistungsstarke Plugin-Schnittstelle, hauptsächlich interne Plug-Ins, die flexibler zu verwenden sind
8 Mehrstufiger Cache. Dies macht das Webpack bei der inkrementellen Kompilierung schneller und noch schneller
Sprechen Sie über den Drei-Wege-Handshake und die Vier-Wellen-Strategie der TCP-Übertragung
Um die Daten genau zu liefern Beim Ziel verwendet das TCP-Protokoll eine Drei-Wege-Handshake-Strategie. Nachdem das Datenpaket über das TCP-Protokoll gesendet wurde, wird TCP dies nicht tun
Wenn Sie die letztere Situation ignorieren, wird der anderen Partei auf jeden Fall bestätigt, ob die Zustellung erfolgreich war. Während des Handshakes werden TCP-Flags verwendet: SYN und ACK.
Die sendende Seite sendet zunächst ein Datenpaket mit dem SYN-Flag an die andere Partei. Nach dem Empfang sendet der Empfänger ein Datenpaket mit dem SYN/ACK-Flag zurück, um Bestätigungsinformationen zu übermitteln. Schließlich sendet die sendende Seite ein Datenpaket mit einem ACK-Flag zurück, das das Ende des „Handshakes“ anzeigt. Wenn es irgendwann während des Handshake-Vorgangs zu einer unerklärlichen Unterbrechung kommt, sendet das TCP-Protokoll dieselben Datenpakete in derselben Reihenfolge erneut.
Das Trennen einer TCP-Verbindung erfordert einen „Vier-Wege-Handshake“:
Die erste Welle: Die aktive schließende Partei sendet ein FIN, um die Datenübertragung von der aktiven Partei zur passiven schließenden Partei zu schließen . Das heißt, der aktive Abschlusspartner sagt dem passiven Abschlusspartner: Ich nicht mehr
Sendet Ihnen erneut Daten (natürlich sendet die aktive Abschlusspartei die Daten erneut, wenn die vor dem Fin-Paket gesendeten Daten keine entsprechende Bestätigungsnachricht erhalten), aber zu diesem Zeitpunkt kann die aktive Abschlusspartei noch Daten akzeptieren .
Die zweite Welle: Nachdem die passive Abschlusspartei das FIN-Paket empfangen hat, sendet sie eine ACK an die andere Partei, und die Bestätigungssequenznummer ist die empfangene Sequenznummer + 1 (dasselbe wie SYN, eine FIN belegt). eine Sequenznummer).
Die dritte Welle: Die passive Abschlusspartei sendet eine FIN, die verwendet wird, um die Datenübertragung von der passiven Abschlusspartei zur aktiven Abschlusspartei zu schließen, d. h. um der aktiven Abschlusspartei mitzuteilen, dass meine Daten vorhanden sind gesendet und werden nicht noch einmal gesendet. Sie haben die Daten gesendet.
Die vierte Welle: Nachdem die aktive Abschlusspartei die FIN erhalten hat, sendet sie eine ACK an die passive Abschlusspartei und die Bestätigungssequenznummer ist die empfangene Sequenznummer + 1. Zu diesem Zeitpunkt sind vier Wellen abgeschlossen .
Der Unterschied zwischen TCP und UDP
TCP (Transmission Control Protocol, Transmission Control Protocol) ist ein verbindungsbasiertes Protokoll, das heißt, vor dem offiziellen Senden und Empfangen von Daten , es muss eine zuverlässige Verbindung mit der anderen Partei herstellen. Eine TCP-Verbindung muss drei „Gespräche“ durchlaufen, bevor sie hergestellt werden kann
UDP (User Data Protocol, User Datagram Protocol) ist das Protokoll, das TCP entspricht. Es handelt sich um ein nicht verbindungsorientiertes Protokoll. Es stellt keine Verbindung zur Gegenpartei her, sondern sendet das Datenpaket direkt dorthin! UDP eignet sich für Anwendungsumgebungen, die jeweils nur kleine Datenmengen übertragen und keine hohe Zuverlässigkeit erfordern.
Erzählen Sie mir etwas über Ihr Verständnis der Bereichskette
Die Funktion der Bereichskette besteht darin, sicherzustellen, dass die Variablen und Funktionen, auf die Sie in der Ausführungsumgebung Zugriff haben, vorhanden sind Auf Variablen in der Bereichskette kann nur dann zugegriffen werden, wenn sie auf das Fensterobjekt zugreifen. Der Zugriff auf Variablen in der Bereichskette ist nicht zulässig.
Ajax-Prozess erstellen
(1) Erstellen Sie ein XMLHttpRequest-Objekt, das ein asynchron aufrufendes Objekt erstellen soll.
(2) Erstellen Sie ein neues HTTP-Anfrage und geben Sie die Methode, URL und Verifizierungsinformationen der HTTP-Anfrage an. (3) Legen Sie die Funktion fest, die auf die Statusänderung der HTTP-Anfrage reagiert 🎜>(4) HTTP-Anfrage senden.
(5) Erhalten Sie die vom asynchronen Aufruf zurückgegebenen Daten.
(6) Verwenden Sie JavaScript und DOM, um eine teilweise Aktualisierung zu implementieren .
Progressive Verbesserung und elegante Verschlechterung
Progressive Verbesserung: Erstellen Sie Seiten für Browser mit niedriger Version, um die grundlegendsten Funktionen sicherzustellen, und verbessern Sie dann Effekte, Interaktionen und fügen Sie hinzu Funktionen für fortgeschrittene Browser, um ein besseres Benutzererlebnis zu erzielen.
Anmutiges Downgrade: Erstellen Sie von Anfang an die vollständige Funktionalität und machen Sie sie dann mit Browsern niedrigerer Versionen kompatibel.
Gemeinsame Web-Sicherheits- und Schutzprinzipien
SQL-Injection-Prinzip
besteht darin, einen Domänennamen oder eine Seitenanforderung zu übermitteln oder einzugeben, indem SQL-Befehle in eine eingefügt werden Webformular-Abfragezeichenfolge, die letztendlich den Server dazu verleitet, bösartige SQL-Befehle auszuführen. Im Allgemeinen gibt es die folgenden Punkte:
1. Um die Eingabe des Benutzers zu überprüfen, können Sie einfache Anführungszeichen und doppelte Anführungszeichen verwenden. -" zur Konvertierung usw.
2. Verwenden Sie niemals die dynamische Assemblierung von SQL. Sie können parametrisiertes SQL verwenden oder gespeicherte Prozeduren direkt für die Datenabfrage und den Zugriff verwenden.
3. Verwenden Sie niemals eine Datenbankverbindung mit Administratorrechten. Verwenden Sie für jede Anwendung eine separate Datenbankverbindung mit eingeschränkten Berechtigungen.
4. Speichern Sie vertrauliche Informationen nicht im Klartext. Bitte verschlüsseln oder hashen Sie Passwörter und vertrauliche Informationen.
XSS-Prinzipien und Prävention
XSS-Angriff (Cross-Site-Scripting) bezieht sich auf einen Angreifer, der bösartige HTML-Tags oder Javascript-Code in eine Webseite einfügt. Beispiel: Der Angreifer platziert ein
客户端发起 HTTP GET 请求一个文件，注意这个时候客户端同时发送一个If-None-Match头，这个头的内容就是第一次请求时服务器返回的Etag：2e681a-6-5d0448402.服务器判断发送过来的Etag和计算出来的Etag匹配，因此If-None-Match为False，不返回200，返回304，客户端继续使用本地缓存；流程很简单，问题是，如果服务器又设置了Cache-Control:max-age和Expires呢，怎么办
<script type="text/javascript">
function quickSort(arr){
if(arr.length<=1){
return arr;//如果数组只有一个数，就直接返回；
}
var num = Math.floor(arr.length/2);//找到中间数的索引值，如果是浮点数，则向下取整
var numValue = arr.splice(num,1);//找到中间数的值
var left = [];
var right = [];
for(var i=0;i<arr.length;i++){
if(arr[i]<numValue){
left.push(arr[i]);//基准点的左边的数传到左边数组
}
else{
right.push(arr[i]);//基准点的右边的数传到右边数组
}
}
return quickSort(left).concat([numValue],quickSort(right));//递归不断重复比较
}
alert(quickSort([32,45,37,16,2,87]));//弹出“2,16,32,37,45,87”
</script>
4. Kontrollieren Sie die Lebensdauer von Cookies, damit sie nicht ewig gültig sind. Ein Dieb hat möglicherweise ein abgelaufenes Cookie erhalten.
Nachteile:
1. Begrenzung der Anzahl und Länge von „Cookies“. Jede Domain darf nur maximal 20 Cookies haben und die Länge jedes Cookies darf 4 KB nicht überschreiten, da es sonst gekürzt wird
2. Wenn das Cookie von jemandem abgefangen wird, kann diese Person alle Sitzungsinformationen erhalten. Selbst eine Verschlüsselung hilft nicht weiter, denn der Abfangjäger muss die Bedeutung des Cookies nicht kennen, er kann den Zweck erreichen, indem er das Cookie einfach so weiterleitet, wie es ist.
3. Einige Zustände können nicht auf dem Client gespeichert werden. Um beispielsweise doppelte Formularübermittlungen zu verhindern, müssen wir einen Zähler auf der Serverseite speichern. Wenn wir diesen Zähler auf der Clientseite speichern, hat er keine Auswirkung.
Lokaler Browserspeicher
In höheren Browserversionen stellt js sessionStorage und globalStorage bereit. LocalStorage wird in HTML5 bereitgestellt und ersetzt globalStorage.
Web in HTML5
Der Speicher umfasst zwei Speichermethoden: sessionStorage und localStorage.
sessionStorage wird zum lokalen Speichern von Daten in einer Sitzung verwendet. Auf diese Daten kann nur von Seiten in derselben Sitzung zugegriffen werden und die Daten werden zerstört, wenn die Sitzung endet. Daher handelt es sich bei sessionStorage nicht um einen dauerhaften lokalen Speicher, sondern nur um einen Speicher auf Sitzungsebene.
LocalStorage wird für die dauerhafte lokale Speicherung verwendet, sofern die Daten nicht aktiv gelöscht werden.
Der Unterschied zwischen Webspeicher und Cookies
Das Konzept des Webspeichers ähnelt dem von Cookies, der Unterschied besteht jedoch darin, dass es für eine größere Speicherkapazität konzipiert ist. Die Größe des Cookies ist begrenzt und das Cookie wird jedes Mal gesendet, wenn Sie eine neue Seite anfordern, was Bandbreite verschwendet. Darüber hinaus muss das Cookie einen Bereich angeben und kann nicht domänenübergreifend aufgerufen werden.
Darüber hinaus verfügt Web Storage über setItem, getItem, removeItem, clear und andere Methoden. Im Gegensatz zu Cookies müssen Front-End-Entwickler setCookie und getCookie selbst kapseln.
Aber Cookies sind auch unverzichtbar: Die Rolle von Cookies besteht darin, mit dem Server zu interagieren und als Teil der HTTP-Spezifikation zu existieren
, und Web Storage wird nur erstellt, um Daten lokal zu „speichern“
Browser-Unterstützung Mit Ausnahme von IE7 und niedriger werden andere Standardbrowser vollständig unterstützt (dh und FF müssen auf dem Webserver ausgeführt werden), es lohnt sich Erwähnen Sie, dass der IE immer gute Dinge leistet. Beispielsweise sind userData in IE7 und IE6 tatsächlich eine Lösung für die lokale Speicherung von Javascript. Durch einfache Codekapselung kann es vereinheitlicht werden, sodass alle Browser das Web unterstützen
Lagerung.
Sowohl localStorage als auch sessionStorage haben die gleichen Betriebsmethoden, wie z. B. setItem, getItem und removeItem usw.
Der Unterschied zwischen Cookie und Sitzung:
1. Cookie Die Daten werden im Browser des Clients gespeichert und die Sitzungsdaten werden auf dem Server abgelegt.
2. Cookies sind nicht sehr sicher. Andere können das lokal gespeicherte COOKIE analysieren und COOKIE täuschen.
Aus Sicherheitsgründen sollte eine Sitzung verwendet werden.
3. Die Sitzung wird innerhalb eines bestimmten Zeitraums auf dem Server gespeichert. Wenn der Zugriff zunimmt, wird die Leistung Ihres Servers stärker beansprucht
Um die Serverleistung zu verringern, sollten COOKIE verwendet werden.
4. Die von einem einzelnen Cookie gespeicherten Daten dürfen 4 KB nicht überschreiten. Viele Browser beschränken die Speicherung auf bis zu 20 Cookies.
5. Persönlicher Vorschlag:
Speichern Sie wichtige Informationen wie Anmeldeinformationen als SITZUNG
Wenn andere Informationen gespeichert werden müssen, können diese in COOKIE abgelegt werden
Was ist der Unterschied zwischen display:none und Visibility:hidden?
display:none verbirgt das entsprechende Element, weist ihm im Dokumentlayout keinen Platz mehr zu und die Elemente auf allen Seiten werden geschlossen, als ob es nie existiert hätte.
visibility:hidden Versteckt das entsprechende Element, behält aber weiterhin den ursprünglichen Platz im Dokumentlayout bei.
Was ist der Unterschied zwischen Link und @import in CSS?
(1) Der Link gehört zum HTML-Tag und @import wird von CSS bereitgestellt.
(2) Beim Laden der Seite wird gleichzeitig der Link geladen und @; import wird von CSS referenziert. Es wartet, bis die CSS-Datei geladen ist, die darauf verweist, bevor es geladen wird.
(3) import kann nur von IE5 oder höher erkannt werden und der Link ist ein HTML-Tag, daher gibt es kein Kompatibilitätsproblem;
(4) Link Die Gewichtung des Stils der Methode ist höher als die Gewichtung von @import.
Ähnlichkeiten und Unterschiede zwischen position:absolute und Float-Attribute
Gemeinsamer Punkt: Festlegen von Float für Inline-Elemente und absolute Attribute, wodurch das Element aus dem Dokumentfluss genommen und seine Breite und Höhe festgelegt werden kann.
Unterschied: Float wird immer noch die Position einnehmen, absolute wird andere Elemente im Dokumentenfluss abdecken.
Das Attribut „Boxgröße“ einführen?
Das Box-Sizing-Attribut wird hauptsächlich zur Steuerung des Parsing-Modus des Box-Modells des Elements verwendet. Der Standardwert ist content-box.
content-box: Lassen Sie das Element das W3C-Standardboxmodell beibehalten. Die Breite/Höhe des Elements wird durch den Rand bestimmt
+ Polsterung + wird durch die Breite/Höhe des Inhalts bestimmt. Das Festlegen der Breite/Höhe-Attribute bezieht sich auf die Breite/Höhe des Inhaltsteils
border-box: Lassen Sie das Element das traditionelle IE-Box-Modell beibehalten (Versionen). unter IE6 und IE6~7) seltsamer Modus). Das Festlegen der Breiten-/Höheneigenschaften bezieht sich auf den Rand
+ Polsterung + Inhalt
