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) 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 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,
