Schauen Sie sich diese Browser-Interviewfragen an. Wie viele können Sie richtig beantworten?
青灯夜游
Freigeben： 2022-03-23 10:39:59
nach vorne
3659 Leute haben es durchsucht
In diesem Artikel finden Sie einige Interviewfragen zu Browsern. Sehen Sie, wie viele Sie beantworten können. Analysieren Sie die richtigen Antworten und sehen Sie, wie viele Sie richtig machen können!
1. Was sind die gängigen Browserkerne?
Der Kernel des Browsers kann in zwei Teile unterteilt werden:
渲染引擎和JS引擎 (Hinweis: Der Browser-Kernel, auf den wir uns oft beziehen, bezieht sich auf die Rendering-Engine)
Da die JS-Engine immer beliebter wird Unabhängig, der Kernel bezieht sich nur auf die Rendering-Engine. Die Rendering-Engine wird hauptsächlich verwendet, um Netzwerkseitenressourcen anzufordern, die analysiert und gesetzt und dem Benutzer präsentiert werden sollen
Browser/RunTime
Kernel (Rendering-Engine)
JavaScript-Engine
Chrome
Blink ( 28~) Webkit (Chrome 27)
V8
FireFox
Gecko
SpiderMonkey
Safari
Webkit
JavaScriptCore
Edge
EdgeHTML
Chakra (für JavaScript)
IE
Trident
Chakra (für JScript)
Opera
Presto->blink
Linear A (4.0-6.1) /Linear B (7.0 -9.2)/Futhark (9.5-10.2)/ Carakan (10.5-)
Browser-Engine: überträgt Anweisungen zwischen der Benutzeroberfläche und der Rendering-Engine.
Rendering-Engine: wird zum Zeichnen von Anforderungsinhalten verwendet
Netzwerk: Wird zum Abschließen von Netzwerkaufrufen wie http-Anfragen verwendet, verfügt über eine plattformunabhängige Schnittstelle und kann auf verschiedenen Plattformen arbeiten
JavaScript-Interpreter: Wird zum Parsen und Ausführen von JavaScript-Code verwendet
Benutzeroberfläche Backend: Wird zum Zeichnen grundlegender Widgets wie Kombinationsfelder und Fenster verwendet.
Datenspeicher: Er gehört zur Persistenzschicht. Der Browser speichert verschiedene Daten wie Cookies auf der Festplatte Festplatte, HTML5 Definiert die Webdatenbanktechnologie, eine leichte und vollständige clientseitige Speichertechnologie. Jede Registerkarte ist ein unabhängiger Prozess
3 Sagen Sie mir, was von der Eingabe der URL bis zum Rendern der Seite passiert. Man kann sagen, dass diese Frage die häufigste Frage in Vorstellungsgesprächen ist und unendlich schwierig sein kann. Im Allgemeinen stellen Interviewer diese Frage, um die Tiefe Ihres Front-End-Wissens zu testen.
1. Der Browser akzeptiert die URL und öffnet den Netzwerkanforderungsthread (einschließlich: Browsermechanismus, Thread und Prozess usw.)
2. Öffnet den Netzwerkthread und gibt eine vollständige http-Anfrage aus (einschließlich: DNS-Abfrage, TCP). /IP-Anfrage, 5-Schicht-Netzwerkprotokoll usw.)
3. Empfangen Sie die Anfrage vom Server an das entsprechende Backend, um die Anfrage zu empfangen (einschließlich: Lastausgleich, Sicherheitsabfangen, interne Backend-Verarbeitung usw.) 4 . HTTP-Interaktion zwischen dem Backend und dem Frontend (einschließlich: http-Header, Antwortcodes, Nachrichtenstrukturen, Cookies usw.)
6. Browser Der Analyseprozess nach dem Empfang des http-Datenpakets (einschließlich lexikalischer HTML-Analyse, Analyse in einen DOM-Baum, Analyse von CSS zum Generieren eines CSSOM-Baums und Zusammenführen zum Generieren eines Renderbaums. Dann Layout, Mal-Rendering, zusammengesetzte Ebenensynthese, GPU-Zeichnung, Verarbeitung externer Links usw.)
7. Visuelles CSS-Modell (einschließlich: Element-Rendering-Regeln, wie z. B. enthaltender Block, Steuerfeld, BFC, IFC usw.)
8. JS-Engine-Analyseprozess (einschließlich: JS-Analysephase, Vorverarbeitungsphase, die Ausführungsphase generiert Ausführungskontext, VO (globales Objekt), Bereichskette, Recyclingmechanismus usw.)
Sie werden feststellen, dass es so viele gibt Haben Sie das Gefühl, dass die Prozesse zwischen einer einfachen Eingabe-URL und dem Rendern der Seite sofort abstürzen? (Keine Sorge, wir werden in diesem Kapitel nicht näher darauf eingehen. Wir zeigen Ihnen zunächst, wie Sie diese Frage beantworten können.) . Dieser Abschnitt wird später in einem separaten Artikel behandelt)
Der Browser erhält die IP-Adresse des Domänennamens über den DNS-Server und sendet eine Anfrage an diese IP-Adresse, um den HTML-Text abzurufenDer Browser-Rendering-Prozess analysiert den HTML-Text und erstellt den DOM-Baum
Wenn beim Parsen des HTML ein Inline-Stil oder eine Stildatei gefunden wird, werden die Stilregeln heruntergeladen und erstellt. Wenn es auf ein JavaScript-Skript stößt, wird es heruntergeladen
Nachdem der DOM-Baum und CSSOM erstellt wurden, führt der Renderprozess die beiden zu einem Renderbaum zusammen.
Der Renderprozess beginnt mit dem Layout des Renderbaums und der Generierung eines Layoutbaums.
Renderbaum versus Layoutbaum. Zeichnen und generieren Zeichnungsdatensätze
4. Wie analysiert der Browser den Code?
HTML analysieren
HTML wird Zeile für Zeile analysiert, und die Rendering-Engine des Browsers analysiert und konvertiert das HTML-Dokument in DOM-Knoten.
HTML in viele Token analysierenToken in Objekte analysieren
Objekte in einem DOM-Baum kombinieren
CSS analysieren
Der Browser analysiert CSS-Selektoren von rechts nach links
Das wissen wir Der DOM-Baum und der CSSOM-Baum werden im Renderbaum zusammengeführt, der das CSSOM tatsächlich an den DOM-Baum anhängt. Daher muss der DOM-Baum basierend auf den vom Selektor bereitgestellten Informationen durchlaufen werden. Sehen wir uns ein Beispiel an:
Suchen Sie zunächst alle Knotenbereiche ganz rechts und suchen Sie für jeden Bereich aufwärts nach dem Knoten div.title
von h3 und dann nach oben Wenn der Knoten von div.nav
schließlich das Stammelement HTML findet, endet die Durchquerung dieses Zweigs.
JS analysieren
Der Browser verfügt über ein JS-Parser-Tool, das speziell zum Parsen unseres JS-Codes verwendet wird.
Wenn der Browser auf JS-Code stößt, ruft er sofort den „JS-Parser“ auf, um zu arbeiten. Der Parser findet alle Variablen, Funktionen, Parameter usw. in js und weist den Variablenwert undefiniert zu.
Nehmen Sie die Funktion in einen Funktionsblock und speichern Sie ihn im Warehouse. Danach wird der Code Zeile für Zeile analysiert (von oben nach unten, von links nach rechts) und dann mit dem Warehouse abgeglichen.
5.Was ist der Unterschied zwischen DOMContentLoaded und Load?
DOMContentLoaded: Wird erst ausgelöst, nachdem die DOM-Analyse abgeschlossen ist, ausgenommen Stylesheets, Bilder und andere Ressourcen.
Laden: Wird ausgelöst, wenn alle DOM, Stylesheets, Skripte, Bilder und anderen Ressourcen auf der Seite geladen wurden.
6. Was ist der Unterschied zwischen Browser-Neuzeichnung und Domain-Neuanordnung?
Neuanordnung: Ein Teil des Rendering-Baums oder der gesamte Rendering-Baum muss erneut analysiert und die Knotengröße neu berechnet werden, was sich in der Neugenerierung des Layouts und der Neuanordnung von Elementen äußert.
Neuzeichnung: Aufgrund von Änderungen in der geometrische Eigenschaften oder Stile der Knoten Änderungen, wie z. B. Elementhintergrundelemente, manifestieren sich darin, dass das Erscheinungsbild bestimmter Elemente geändert wird
Neuzeichnen führt nicht unbedingt zu Neufließen, aber Neuzeichnen führt definitiv zu Neuzeichnen
Anleitung Neuzeichnen und Umfließen auslösen?
Jede Änderung der zum Erstellen des Renderbaums verwendeten Informationen führt zu einem Reflow oder Neuzeichnen:
DOM-Knoten hinzufügen, löschen, aktualisieren
Einen DOM-Knoten über Anzeige ausblenden: keine – Reflow und Neuzeichnen auslösen
Verstecken Sie einen DOM-Knoten über Sichtbarkeit: Ausgeblendet – löst nur ein Neuzeichnen aus, da es keine geometrischen Änderungen gibt.
DOM-Knoten auf der Seite verschieben oder animieren.
Ein Stylesheet hinzufügen und Stileigenschaften anpassen.
Benutzerverhalten, z. B. die Größe des Fensters ändern. Schriftgröße ändern oder scrollen.
Wie vermeide ich ein Neuzeichnen oder Umfließen?
Konzentrierte Stiländerung: Verwenden Sie beispielsweise die Klasse, um Stile kollektiv zu ändern.
Verwenden Sie document.createDocumentFragment(): Wir können ein Dokument erstellen, das frei vom DOM-Baum ist Über den Knoten „createDocumentFragment“ werden dann Stapeloperationen auf diesem Knoten ausgeführt und schließlich in den DOM-Baum eingefügt, sodass nur ein Reflow ausgelöst wird. document.createDocumentFragment()：我们可以通过createDocumentFragment创建一个游离于DOM树之外的节点，然后在此节点上批量操作，最后插入DOM树中，因此只触发一次重排
Die Teile der Kompositionsebene Das Bild wird von der GPU synthetisiert, was schneller ist als die CPU-Verarbeitung
Beim repaint</code > ist erforderlich, nur <code>repaint< /code> selbst hat keinen Einfluss auf andere Ebenen<p><strong></strong></p>Für die Effekte <code>transform und opacity, layout</ code> und <code wird nicht ausgelöst >paint
Der beste Weg, eine Kompositionsebene zu verbessern, ist die Verwendung der CSS-Eigenschaft will-change
7. Warum ist JS Single-Threaded?
Dies hängt hauptsächlich mit dem Zweck von JS zusammen. Als Skriptsprache des Browsers wurde JS zunächst hauptsächlich dazu verwendet, die Interaktion zwischen dem Benutzer und dem Browser zu realisieren und das DOM zu bedienen. Dies legt fest, dass es nur Single-Threaded sein kann, da es sonst viele komplexe Synchronisationsprobleme mit sich bringt.
Zum Beispiel:
Wenn JS multithreaded ist, ein Thread ein DOM-Element ändern möchte und ein anderer Thread das DOM-Element löschen möchte, weiß der Browser nicht, auf wen er hören soll. Um Komplexität zu vermeiden, wurde JavaScript von Anfang an so konzipiert, dass es Single-Threaded ist.
Um die Rechenleistung von Multi-Core-CPUs zu nutzen, schlägt HTML5 den Web Worker-Standard vor, der es JavaScript-Skripten ermöglicht, mehrere Threads zu erstellen, die untergeordneten Threads werden jedoch vollständig vom Haupt-Thread gesteuert und dürfen den nicht bedienen DOM. Daher ändert dieser neue Standard nichts an der Single-Threaded-Natur von JavaScript.
8 Wird das Laden von CSS das DOM blockieren?
🎜🎜Zuerst die Schlussfolgerung🎜🎜🎜
🎜🎜CSS blockiert nicht das Parsen von DOM, aber es blockiert das Rendern von DOM< /code> 🎜🎜<code>CSS blockiert die Ausführung von JS, aber nicht den Download von JS-Dateien🎜🎜
🎜🎜🎜Die Rolle von CSSOM🎜 🎜🎜🎜🎜🎜Die erste besteht darin, JavaScript die Möglichkeit zu geben, Stylesheets zu bedienen. 🎜🎜🎜🎜 Die zweite besteht darin, grundlegende Stilinformationen für die Synthese von Layoutbäumen bereitzustellen. 🎜🎜🎜🎜Dieses CSSOM wird im DOM als document .styleSheets widergespiegelt 🎜🎜🎜🎜Wir können anhand des zuvor erwähnten Browser-Rendering-Prozesses erkennen: 🎜🎜🎜🎜DOM und CSSOM werden normalerweise parallel erstellt, sodass 🎜CSS nicht geladen wird DOM-Parsing blockieren🎜🎜🎜 🎜🎜Der Renderbaum hängt vom DOM-Baum und dem CSSOM-Baum ab, daher muss er warten, bis beide geladen sind, bevor er mit dem Erstellen des Renderings beginnen kann, sodass 🎜CSS-Laden das Rendern des DOM blockiert🎜🎜🎜🎜 🎜Da JavaScript DOM und CSS bedienen kann, können beim Rendern der Schnittstelle die Eigenschaften dieser Elemente geändert werden (d. h. der JavaScript-Thread und der UI-Thread werden gleichzeitig ausgeführt), die Elemente können vor und nach dem Rendering-Thread abgerufen werden inkonsistent sein. Um unerwartete Rendering-Ergebnisse zu verhindern, stellt der Browser den 🎜GUI-Rendering-Thread und den JavaScript-Thread so ein, dass sie sich gegenseitig ausschließen. JS muss auf den Download von CSS warten. (CSS blockiert die DOM-Ausführung)🎜🎜🎜
Wenn der Inhalt des JS-Skripts darin besteht, den Stil des Elements zu erhalten, muss es auf CSS zurückgreifen. Da der Browser nicht erkennen kann, was in JS vor sich geht, muss er warten, bis alle vorherigen Stile heruntergeladen wurden, bevor er JS ausführt, um eine Stilübernahme zu vermeiden. Allerdings werden JS-Dateien und CSS-Dateien parallel heruntergeladen. Die CSS-Datei wird geladen und ausgeführt, bevor die nachfolgende JS-Datei ausgeführt wird, sodass JS脚本的内容是获取元素的样式，那它就必然依赖CSS。因为浏览器无法感知JS内部到底想干什么，为避免样式获取，就只好等前面所有的样式下载完毕再执行JS。但JS文件与CSS文件下载是并行的，CSS文件会在后面的JS文件执行前先加载执行完毕，所以CSS会阻塞后面JS的执行
defer是在JS加载完成后，整个文档解析完成后，触发 DOMContentLoaded 事件前执行，如果缺少 srcCSS die Ausführung nachfolgender JS blockiert
Vermeiden Sie den weißen Bildschirm und verbessern Sie die Ladegeschwindigkeit von CSS
Verwenden Sie CDN (CDN wählt den nächstgelegenen Knoten mit zwischengespeichertem Inhalt aus, um Ihnen Ressourcen basierend auf Ihren Netzwerkbedingungen bereitzustellen, sodass die Ladezeit verkürzt werden kann) Komprimieren Sie CSS Verwenden Sie den Cache sinnvoll
Reduzieren Sie die Anzahl der HTTP-Anfragen und führen Sie CSS-Dateien zusammen.
9 Wird JS die Seite blockieren?
Lassen Sie uns zuerst zum Schluss kommen
JS blockiert das Parsen des DOM
und daher das Laden der Seite
Aus diesem Grund sagen wir oft, dass wir die JS-Datei unten platzieren sollten
Da JavaScript das DOM manipulieren kann, werden die Elementdaten vor und nach dem Rendering-Thread abgerufen, wenn Sie die Eigenschaften dieser Elemente während des Renderns der Schnittstelle ändern (dh der JavaScript-Thread und der UI-Thread werden gleichzeitig ausgeführt). kann inkonsistent sein.
Um unerwartete Rendering-Ergebnisse zu verhindern, legt der Browser daher eine **„GUI-Rendering-Thread und JavaScript-Engine schließen sich gegenseitig aus“**-Beziehung fest.
Wenn die JavaScript-Engine ausgeführt wird, wird der GUI-Thread angehalten und GUI-Updates werden in einer Warteschlange gespeichert und sofort ausgeführt, wenn der Engine-Thread inaktiv ist.
Wenn der Browser ein JavaScript-Programm ausführt, wird der GUI-Rendering-Thread in einer Warteschlange gespeichert und erst ausgeführt, wenn das JS-Programm abgeschlossen ist.
Wenn also die Ausführungszeit von JS zu lang ist, führt dies dazu, dass das Rendern der Seite inkohärent ist, was zu dem Gefühl führt, dass das Rendern und Laden der Seite blockiert ist.
10. Was ist der Unterschied zwischen aufschieben und asynchron?
Beide laden externe JS-Dateien asynchron und blockieren die DOM-Analyse nicht.
Async wird ausgeführt, nachdem das externe JS-Laden abgeschlossen ist, wenn der Browser inaktiv ist und bevor das Load-Ereignis ausgelöst wird Befolgen Sie die Reihenfolge, in der sie ausgeführt werden. Dieses Attribut hat keine Auswirkung auf Inline-Skripte (d. h. Skripte ohne das Attribut „src“).
defer wird ausgeführt, nachdem das JS geladen wurde, nachdem das gesamte Dokument analysiert wurde und bevor das Ereignis DOMContentLoaded ausgelöst wird, wenn das Attribut src (d. h. eingebettetes Skript) vorhanden ist. fehlt, sollte dieses Attribut nicht verwendet werden, da es in diesem Fall nicht funktioniert
11. Garbage-Collection-Mechanismus des Browsers
Die Garbage-Collection ist ein automatischer Speicherverwaltungsmechanismus. Dynamischer Speicher auf Ihrem Computer sollte freigegeben werden, wenn er nicht mehr benötigt wird.
Es ist zu beachten, dass automatisch bedeutet, dass der Browser uns automatisch dabei helfen kann, Speichermüll zu recyceln. Dies bedeutet jedoch nicht, dass wir uns nicht um die Speicherverwaltung kümmern müssen. Wenn es nicht ordnungsgemäß ausgeführt wird, kommt es in JavaScript immer noch zu einem Speicherüberlauf , was zum Absturz des Systems führt. 🎜🎜🎜Da Strings, Arrays, Objekte usw. keine feste Größe haben, müssen sie dynamisch zugewiesen werden, wenn ihre Größe bekannt ist. Jedes Mal, wenn ein JavaScript-Programm eine Zeichenfolge, ein Array oder ein Objekt erstellt, muss der Interpreter Speicher zum Speichern dieser Entität zuweisen. 🎜🎜Der JavaScript-Interpreter kann erkennen, wenn das Programm ein Objekt nicht mehr verwendet. Wenn es feststellt, dass das Objekt nutzlos ist, weiß es, dass das Objekt nicht mehr benötigt wird, und kann den von ihm belegten Speicher freigeben. 🎜🎜Es gibt zwei Methoden der Garbage Collection, die normalerweise von Browsern verwendet werden: 🎜Mark Sweep🎜, 🎜Reference Counting🎜. 🎜🎜🎜🎜Mark Clearing🎜🎜🎜🎜🎜Dies ist die am häufigsten verwendete Garbage-Collection-Methode in JavaScript🎜🎜🎜Seit 2012 verwenden alle modernen Browser die Mark-Clearing-Garbage-Collection-Methode, mit Ausnahme niedrigerer Versionen des IE. Referenzzählung. 🎜🎜🎜Was ist also die Entfernung von Markierungen? 🎜🎜🎜🎜Es gibt ein globales Objekt in JavaScript. Der Garbage Collector beginnt regelmäßig mit diesem globalen Objekt, sucht alle Objekte, auf die von diesem globalen Objekt verwiesen wird, und findet dann die Objekte, auf die diese Objekte verweisen ... Für diese aktiven Objekte Markierung, dies ist die Markierungsphase. In der Löschphase werden die nicht markierten Objekte gelöscht. 🎜🎜🎜Ein Problem beim Löschen von Markierungen besteht darin, dass der Speicherplatz nach dem Löschen diskontinuierlich ist, d. h. es kommt zu einer Speicherfragmentierung. Wenn später ein relativ großer kontinuierlicher Speicherplatz benötigt wird, wird dieser den Anforderungen nicht gerecht. Die Methode der „Markenorganisation“ kann dieses Problem effektiv lösen. 🎜🎜Beim Markieren wird das Konzept der dreifarbigen Markierung eingeführt. Die drei Farben sind: 🎜🎜🎜Weiß: Nicht markierte Objekte, also nicht erreichbare Objekte (Objekte, die nicht gescannt werden), können recycelt werden. 🎜🎜Grau : Objekte, die markiert wurden (erreichbare Objekte), aber die Objekte wurden noch nicht gescannt und können nicht recycelt werden 🎜🎜Schwarz: wurden gescannt (erreichbare Objekte) und können nicht recycelt werden 🎜🎜🎜🎜 Markierungssortierung: 🎜🎜
Die Markierungsphase unterscheidet sich nicht von der Markierungs- und Löschmethode, außer dass die Markierungs- und Löschmethode nach Abschluss der Markierung die verbleibenden Objekte auf eine Seite des Speichers verschiebt und schließlich den Grenzspeicher bereinigt.
Referenzzählung
Die Bedeutung der Referenzzählung besteht darin, zu verfolgen, wie oft auf jeden Wert verwiesen wird. Wenn einer Variablen A ein Wert zugewiesen wird, beträgt die Anzahl der Verweise auf diesen Wert 1. Wenn Variable A neu zugewiesen wird, verringert sich die Anzahl der Verweise auf den vorherigen Wert um 1. Wenn die Anzahl der Referenzen 0 wird, bedeutet dies, dass es keine Möglichkeit mehr gibt, auf diesen Wert zuzugreifen, sodass der von diesem Wert belegte Speicher gelöscht werden kann.
Die meisten Browser haben diese Recyclingmethode aufgegeben
Speicherleck
Um Speicherlecks zu vermeiden, ist es am besten, den Wert auf null</ zu setzen, sobald die Daten nicht mehr verwendet werden. Code>Um seine Referenz freizugeben, heißt diese Methode <code>null来释放其引用，这个方法叫做接触引用
看上面这张图，有些资源的size值是大小，有些是from disk cache，有些是from memory cache，显示大小的是请求的服务器资源，而显示后面两种的则是读取的缓存。
disk cache： 就是将资源存储在磁盘中，等待下次访问时不需重新下载，直接从磁盘中读取，它的直接操作对象为CurlCacheManagerKontaktreferenz
Welche Situationen führen zu Speicherverlusten? Wie kann man es vermeiden?
Am Beispiel von Vue gibt es normalerweise folgende Situationen:
Ereignisse, die in window/body überwacht werden, sind nicht ungebunden
Ereignisse, die an EventBus gebunden sind, sind nicht entbunden Nach dem Entbinden von
Vuexs $store wird watch nicht mit unwatch
erstellt Die korrekte Zerstörungsfunktion wird nicht aufgerufen
Lösung: Rechtzeitig zerstören in beforeDestroy
Binden Sie das Ereignis addEventListener< im <code>DOM/BOM Objekt /code>, removeEventListener.
Beobachtermodus $on, $off Verarbeitung.
Wenn in einer Komponente ein Timer verwendet wird, sollte dieser zerstört werden.
Wenn eine Bibliotheksinitialisierung eines Drittanbieters im Hook mounted/created verwendet wird, wird diese entsprechend zerstört.
Verwenden Sie schwache Referenzen weakMap, weakSet.
Wann werden die Speicher verschiedener Variablentypen im Browser freigegeben?
Referenztypen
werden von V8 automatisch recycelt, wenn keine Referenzen vorhanden sind.
Basistyp🎜
🎜Wenn es sich in einem Verschluss befindet, wird es von V8 erst recycelt, wenn der Verschluss keinen Verweis mehr hat. 🎜🎜Im Falle einer Nichtschließung wird es recycelt, während auf den Wechsel der neuen V8-Generation gewartet wird. 🎜🎜🎜🎜
12. Erzählen Sie uns etwas über den Caching-Mechanismus des Browsers?
🎜🎜🎜Browser-Cache verstehen🎜🎜🎜🎜Wenn der Browser eine Website anfordert, werden verschiedene Ressourcen geladen. Bei einigen Ressourcen, die sich nicht häufig ändern, speichert der Browser sie für das nächste Mal im lokalen Speicher. Laden Sie diese Ressourcen direkt während des Zugriffs, um die Zugriffsgeschwindigkeit zu verbessern. 🎜🎜🎜🎜Woher weiß ich, ob die Ressource vom Server angefordert oder aus dem Cache gelesen wird? 🎜🎜🎜🎜🎜 🎜Sehen Sie sich das Bild oben an. Der Größenwert einiger Ressourcen ist die Größe, einige sind aus dem Festplatten-Cache und andere sind aus dem Speicher-Cache Die beiden letztgenannten werden als Lesecache angezeigt. 🎜
🎜🎜Festplatten-Cache: 🎜 dient dazu, Ressourcen auf der Festplatte zu speichern und auf den nächsten Zugriff zu warten, ohne sie erneut herunterzuladen. Sein direktes Operationsobjekt ist CurlCacheManager . (Die Effizienz ist langsamer als beim Speichercache, aber die Speicherkapazität ist groß und die Speicherzeit ist lang) 🎜🎜🎜Speichercache: 🎜 Es dient dazu, Ressourcen im Speicher zwischenzuspeichern und auf den nächsten Zugriff zu warten, ohne sie erneut herunterzuladen. direkt aus dem Gedächtnis lesen. (Aus Sicht der Effizienz ist es am schnellsten und aus Sicht der Überlebenszeit am kürzesten.) Speichern Sie nur einige abgeleitete Ressourcendateien.🎜🎜Nur einige abgeleitete Ressourcendateien können gespeichert werden.🎜🎜🎜🎜Der Unterschied Ressourcen🎜🎜Allgemeine Skripte, Schriftarten und Bilder werden im Speicher gespeichert. Im Allgemeinen werden Nicht-Skripte wie CSS usw. im Speicher gespeichert.🎜🎜🎜🎜
Browser-Cache-Klassifizierung
Starker Cache
Verhandlungscache
Wenn der Browser Ressourcen vom Server anfordert, ermittelt er zunächst, ob er auf den starken Cache trifft, und wenn dies fehlschlägt, bestimmt er, ob er trifft der Verhandlungscache
Starker Cache
Wenn der Browser Ressourcen lädt, ermittelt er zunächst anhand des Headers der lokalen Cache-Ressource, ob er trifft , wird die Ressource im Cache direkt verwendet und nicht erneut an den Cache gesendet. Der Server sendet die Anfrage. header中判断是否命中强缓存，如果命中则直接使用缓存中的资源，不会再向服务器发送请求。 （这里的header中的信息指的是 expires 和 cache-control）
Expires
该字段是 http1.0 时的规范，它的值为一个绝对时间的 GMT 格式的时间字符串，比如 Expires:Mon,18 Oct 2066 23:59:59 GMT。这个时间代表着这个资源的失效时间，在此时间之前，即命中缓存。这种方式有一个明显的缺点，由于失效时间是一个绝对时间，所以当服务器与客户端时间偏差较大时，就会导致缓存混乱。所以这种方式很快在后来的HTTP1.1版本中被抛弃了。
当强缓存没命中时，浏览器会发送一个请求到服务器，服务器根据 header 中的信息来判断是否命中协商缓存。如果命中，则返回304 ，告诉浏览器资源未更新，可以使用本地缓存。 （这里的header信息指的是Last-Modify/If-Modify-Since 和 ETag/If-None-Match(Die Informationen in der Kopfzeile hier beziehen sich auf expires und cache-control)
Expires
Dieses Feld ist
http1.0
Bei der Zeitangabe handelt es sich bei dem Wert um eine
absolute Zeit
Zeitzeichenfolge im GMT-Format, z. B. Läuft ab:Mo,18. Okt. 2066 23:59:59 GMT. Diese Zeit stellt die Ablaufzeit dieser Ressource dar. Vor diesem Zeitpunkt wird der Cache erreicht. Diese Methode weist einen offensichtlichen Nachteil auf. Da es sich bei der Ablaufzeit um eine absolute Zeit handelt, führt eine große Zeitabweichung zwischen dem Server und dem Client zu Cache-Verwirrung. Daher wurde diese Methode in der späteren Version von HTTP 1.1 schnell aufgegeben.
Cache-Control
Cache-Control ist die Header-Information, die bei http1.1 angezeigt wird. Sie wird hauptsächlich anhand des
max-age
-Werts dieses Felds beurteilt relative Zeit
Zum Beispiel bedeutet Cache-Control:max-age=3600, dass die Ressourcengültigkeitsdauer 3600 Sekunden beträgt. Zusätzlich zu diesem Feld verfügt die Cache-Steuerung auch über die folgenden häufiger verwendeten Einstellungswerte:
no-cache
: Sie müssen den Cache aushandeln und eine Anfrage an den Server senden, um zu bestätigen, ob der Cache verwendet werden soll.
no-store
: Caching deaktivieren und Daten jedes Mal neu anfordern.
öffentlich: Kann von allen Benutzern zwischengespeichert werden, einschließlich Endbenutzern und zwischengeschalteten Proxyservern wie CDN.
privat: Es kann nur vom Browser des Endbenutzers zwischengespeichert werden und darf nicht von Relay-Cache-Servern wie CDN zwischengespeichert werden.
Cache-Control und Expires können gleichzeitig in der Serverkonfiguration aktiviert werden. Bei gleichzeitiger Aktivierung hat Cache-Control eine höhere Priorität.
Negotiation Cache🎜🎜Wenn der starke Cache fehlschlägt, sendet der Browser eine Anfrage an den Server und der Server bestimmt anhand der Informationen im header, ob der Aushandlungcache erreicht wird . Bei einem Treffer wird 🎜304🎜 zurückgegeben und teilt dem Browser mit, dass die Ressource nicht aktualisiert wurde und der lokale Cache verwendet werden kann. 🎜(Die Header-Informationen hier beziehen sich auf Last-Modify/If-Modify-Since und ETag/If-None-Match)🎜🎜🎜🎜🎜🎜Last-Modify / If-Modify-Since🎜🎜🎜🎜🎜Wenn der Browser zum ersten Mal eine Ressource anfordert, wird „Last-Modify“ zum vom Server zurückgegebenen Header hinzugefügt. „Last-Modify“ ist eine Zeitangabe, die den Zeitpunkt der letzten Änderung der Ressource angibt . 🎜🎜Wenn der Browser die Ressource erneut anfordert, enthält der Anforderungsheader „If-Modify-Since“, also die letzte Änderung, die vor dem Caching zurückgegeben wird. Nachdem der Server If-Modify-Since empfangen hat, bestimmt er anhand der letzten Änderungszeit der Ressource, ob der Cache erreicht wird. 🎜🎜Wenn der Cache erreicht wird, wird 304 zurückgegeben und der Ressourceninhalt wird nicht zurückgegeben und Last-Modify wird nicht zurückgegeben. 🎜🎜Nachteile:🎜🎜Wenn sich die Ressourcen in kurzer Zeit ändern, ändert sich Last-Modified nicht. 🎜🎜Zyklische Veränderungen. Wenn diese Ressource innerhalb eines Zyklus wieder in ihr ursprüngliches Aussehen zurückversetzt wird, gehen wir davon aus, dass sie zwischengespeichert werden kann, Last-Modified glaubt dies jedoch nicht, daher gibt es ein ETag. 🎜🎜🎜🎜🎜ETag/If-None-Match🎜🎜🎜🎜🎜Der Unterschied zu Last-Modify/If-Modify-Since besteht darin, dass Etag/If-None-Match einen Prüfcode zurückgibt. ETag kann garantieren, dass jede Ressource einzigartig ist und Ressourcenänderungen zu ETag-Änderungen führen. Der Server bestimmt anhand des vom Browser gesendeten If-None-Match-Werts, ob der Cache erreicht wird. 🎜🎜Der Unterschied zu Last-Modified besteht darin, dass, wenn der Server eine 304 Not Modified-Antwort zurückgibt, das ETag im Antwortheader zurückgegeben wird, da das ETag neu generiert wurde, auch wenn sich das ETag gegenüber dem vorherigen nicht geändert hat. 🎜🎜🎜Last-Modified und ETag können zusammen verwendet werden. Der Server überprüft zunächst das ETag, vergleicht es dann weiter und entscheidet schließlich, ob 304 zurückgegeben wird. 🎜🎜🎜🎜🎜Zusammenfassung🎜🎜🎜🎜🎜Wenn der Browser auf eine bereits besuchte Ressource zugreift, sind seine Schritte: 🎜🎜🎜1. Überprüfen Sie zunächst, ob der starke Cache getroffen wird?, Verwenden Sie den Cache direkt . Wenn der starke Cache nicht erreicht wird, wird die Anfrage an den Server gesendet, um zu sehen, ob er den Verhandlungscache erreicht. 🎜🎜3 Wenn der Verhandlungscache erreicht wird, gibt der Server 304 zurück, um dem Browser mitzuteilen, dass der lokale Cache vorhanden ist 4. Wenn der Verhandlungscache nicht erreicht wird, gibt der Server neue Ressourcen an den Browser zurück🎜
13.什么是浏览器的同源策略，以及跨域？
同源策略
同源策略是浏览器的一种自我保护行为。所谓的同源指的是：协议，域名，端口均要相同
浏览器中大部分内容都是受同源策略限制的，但是以下三个标签不受限制：
<img src="..." / alt="Schauen Sie sich diese Browser-Interviewfragen an. Wie viele können Sie richtig beantworten?" >
<link href="..." />
<script src="..."></script>
<img src="http://bank.example/withdraw?amount=10000&for=hacker" alt="Schauen Sie sich diese Browser-Interviewfragen an. Wie viele können Sie richtig beantworten?" >
Ein Hacker kann das Cookie des Opfers nur verwenden, um das Vertrauen des Servers zu missbrauchen, aber der Hacker kann das **„Cookie“** nicht erhalten und den Inhalt des **„Cookies“ nicht sehencookie 骗取服务器的信任，但是黑客并不能凭借拿到**「cookie」**，也看不到 **「cookie」的内容。另外，对于服务器返回的结果，由于浏览器「同源策略」**的限制，黑客也无法进行解析。
这就告诉我们，我们要保护的对象是那些可以直接产生数据改变的服务，而对于读取数据的服务，则不需要进行CSRF. Darüber hinaus können Hacker die vom Server zurückgegebenen Ergebnisse aufgrund der Einschränkungen der „Same Origin Policy“** des Browsers nicht analysieren. Dies sagt uns, dass es sich bei den Objekten, die wir schützen möchten, um Dienste handelt, die direkt Datenänderungen hervorrufen können, und dass für Dienste, die Daten lesen, kein CSRF-Schutz erforderlich ist. Der Schlüssel zum Schutz ist
„Fügen Sie Informationen in die Anfrage ein, die Hacker nicht fälschen können“
Originalerkennung
Da die meisten CSRFs von Websites Dritter stammen, verbieten wir direkt externe Domänen (oder nicht vertrauenswürdige Domänen). Namen) Anfragen an uns richten.
Dann stellt sich die Frage: Wie stellen wir fest, ob die Anfrage von einer externen Domain kommt?
Im HTTP-Protokoll trägt jede asynchrone Anfrage zwei Header, die zum Markieren des Quelldomänennamens verwendet werden:
Origin-Header
Referer-Header
Wenn der Browser eine Anfrage initiiert, werden diese beiden Header in den meisten Fällen verwendet automatisch gebracht und der Inhalt kann nicht vom Frontend angepasst werden. Der Server kann die Quelldomäne der Anforderung ermitteln, indem er die Domänennamen in diesen beiden Headern analysiert.
Verwenden Sie den Origin-Header, um den Quelldomänennamen zu bestimmen.
Bei einigen CSRF-bezogenen Anfragen wird das Origin-Feld im angeforderten Header enthalten. Das Feld enthält den angeforderten Domänennamen (ohne Pfad und Abfrage).
Wenn Origin vorhanden ist, können Sie die Felder in Origin direkt verwenden, um den Quelldomänennamen zu bestätigen.
Aber Origin existiert in den folgenden beiden Fällen nicht:
IE11 Gleiche Origin-Richtlinie: IE 11 fügt den Origin-Header nicht bei standortübergreifenden CORS-Anfragen hinzu, der Referer-Header bleibt weiterhin die eindeutige Kennung. Der grundlegendste Grund ist, dass sich die Definition des gleichen Ursprungs in IE 11 von der anderer Browser unterscheidet. Sie können sich auf
MDN Same-origin_policy#IE_Exceptions
302-Umleitung beziehen:
Ursprung nach 302-Umleitung Nicht enthalten Umgeleitete Anfragen, da Origin als vertrauliche Informationen aus anderen Quellen angesehen werden kann. Bei 302-Weiterleitungen wird die URL an den neuen Server weitergeleitet, sodass der Browser den Ursprung nicht an den neuen Server weitergeben möchte.
Verwenden Sie den Referrer-Header, um den Quelldomänennamen zu ermitteln.
Gemäß dem HTTP-Protokoll gibt es im HTTP-Header ein Feld namens Referer, das die Quelladresse der HTTP-Anfrage aufzeichnet. Bei Ajax-Anfragen, Ressourcenanfragen wie Bildern und Skripten ist der Referrer die Seitenadresse, die die Anfrage initiiert. Bei Seitensprüngen ist Referer die Adresse der vorherigen Seite, die den Seitenverlauf geöffnet hat. Daher können wir den Ursprungsteil des Links im Referrer verwenden, um den Quelldomänennamen der Anfrage zu ermitteln.
Diese Methode ist nicht narrensicher. Der Wert von Referer wird vom Browser bereitgestellt. Obwohl es klare Anforderungen an das HTTP-Protokoll gibt, gibt es keine Garantie dafür, dass der Browser selbst keine Sicherheitslücken aufweist. . Die Methode zur Überprüfung des Referrer-Werts hängt von der Drittpartei (d. h. dem Browser) ab, um die Sicherheit zu gewährleisten. Theoretisch ist dies nicht sehr sicher. In einigen Fällen können Angreifer den von ihnen angeforderten Referrer verbergen oder sogar ändern.
Im Jahr 2014 veröffentlichte die Web Application Security Working Group des W3C den Referrer-Richtlinienentwurf, der detaillierte Bestimmungen darüber enthielt, wie Browser Referer senden sollten. Mittlerweile unterstützen die meisten neuen Browser diesen Entwurf und wir können endlich die Referrer-Strategie unserer Website flexibel steuern. Die neue Version der Referrer-Richtlinie legt fünf Referrer-Richtlinien fest: „Kein Referrer“, „Kein Referrer bei Downgrade“, „Nur Ursprung“, „Ursprung bei Cross-Origin“ und „Unsichere URL“. Die drei bestehenden Strategien „Nie“, „Standard“ und „Immer“ wurden im neuen Standard umbenannt. Ihre Entsprechung ist wie folgt:
<img src="http://bank.example/withdraw?amount=10000&for=hacker" referrerpolicy="no-referrer" alt="Schauen Sie sich diese Browser-Interviewfragen an. Wie viele können Sie richtig beantworten?" >
Das obige ist der detaillierte Inhalt vonSchauen Sie sich diese Browser-Interviewfragen an. Wie viele können Sie richtig beantworten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
1. Der Browser akzeptiert die URL und öffnet den Netzwerkanforderungsthread (einschließlich: Browsermechanismus, Thread und Prozess usw.) 
