Im Web-Front-End-Interview werden Sie gefragt: 1. HTML- und HTML5-bezogene Wissenspunkte, z. B. „Was ist Semantik“ und „Was sind die neuen Funktionen von HTML5?“ 2. CSS- und JS-Wissenspunkte; wie „Wie erreicht man eine vertikale Zentrierung“, „Was ist js-Abschluss“ und andere Fragen.
Web-Front-End-Interviews fragen im Allgemeinen: HTML- und HTML5-bezogene Wissenspunkte, z. B. was ist Semantik, was sind die neuen Funktionen von HTML5; CSS und JS Wissenspunkte, zum Beispiel, wie man eine vertikale Zentrierung erreicht, was ist js-Abschluss usw.
Dieser Artikel sammelt einige Interviewfragen, die häufig in Interviews auftreten, und gibt entsprechende Antworten, was einen gewissen Referenzeffekt hat Ich hoffe, es kann mehr Front-End-Interviewern und Leuten helfen, die Front-End lernen.
[Empfohlenes Tutorial: JavaScript-Tutorial]
HTML/HTML5
1. Kennst du Semantik? Sprechen Sie über die Semantik, die Sie verstehen. Was würden Sie normalerweise tun, um die Semantik sicherzustellen?
Neue Tags wie Kopfzeile, Fußzeile, Abschnitt usw. in HTML5 sind Semantik
Einerseits ermöglicht die Semantik, dass Computer Inhalte schnell verstehen und Informationen effizient verarbeiten können Seien Sie benutzerfreundlicher für Suchmaschinen
Andererseits erleichtert es die Zusammenarbeit mit anderen. Andere können die Bedeutung Ihrer Webseiten-Tags verstehen, indem sie den Code lesen
Wenn der Stil entfernt wird oder verloren geht , die Seite kann eine klare Struktur präsentieren
ist gut für SEO: Eine gute Kommunikation mit Suchmaschinen hilft Crawlern, effektivere Informationen zu crawlen: Crawler verlassen sich auf Tags, um den Kontext und die Gewichtung jedes Schlüsselworts zu bestimmen
Bequem für andere Geräte zum Parsen (z. B. Screenreader, Blindreader, mobile Geräte), um Webseiten auf sinnvolle Weise darzustellen
Einfach für die Teamentwicklung und -wartung, die Semantik ist besser lesbar und die nächste Schritt zur Transformation von Webseiten Wichtige Trends: Teams, die W3C-Standards befolgen, müssen diesen Standard befolgen, um Differenzierung zu reduzieren
2. Einführung der neuen Funktionen von HTML5
Neue DOCTYPE-Anweisung< ! DOCTYPE html>
Vollständige Unterstützung von CSS3
Video und Audio
Lokaler Speicher
Semantische Blende
Canvas neue Ereignisse wie Ondrag onresize
3. Wenn Sie das Problem lösen, dass Ajax nicht zurückgehen kann
HTML5 hat eine neue API eingeführt, nämlich: History.pushState, History.replaceState
Sie können den Browserverlauf über pushState und replaceSate verbinden und die URL der aktuellen Seite ändern
onpopstate hört zurück
4 >
Websocket ist ein neues in HTML5 vorgeschlagenes Protokoll, das die Kommunikation zwischen Client und Server und die Push-Funktion des Servers realisieren kannDer Vorteil besteht darin, dass der Lebenslauf solange ist Sobald die Verbindung hergestellt ist, können Sie kontinuierlich Server-Push-Nachrichten erhalten, was Bandbreite und serverseitigen Druck spart. Die Ajax-Abfragesimulation einer konstanten Verbindung besteht darin, von Zeit zu Zeit (0,5 Sekunden) eine Ajax-Anfrage an den Server zu initiieren, um abzufragen, ob der Server über Datenaktualisierungen verfügt.Der Nachteil ist, dass eine HTTP-Verbindung besteht muss jedes Mal eingerichtet werden, auch wenn nur sehr wenige Daten übertragen werden müssen, es verschwendet Bandbreite5 🎜>Laden Sie eine js-Datei über worker = new worker(url), um einen Worker zu erstellen und eine Worker-Instanz zurückzugeben
Senden Sie Daten über die Methode worker.postMessage(data) an den Worker . Worker.onmessage-Methode binden, um von Worder gesendete Daten zu empfangen
Sie können worker.terminate() verwenden, um die Ausführung eines Worders zu beenden.
Websocketist ein Transportprotokoll für Webanwendungen, das einen bidirektionalen, sequentiell ankommenden Datenfluss bereitstellt. Es handelt sich um ein HTML5-Protokoll. Durch die Aufrechterhaltung einer bidirektionalen Verbindung zwischen dem Client und dem Server können Serveraktualisierungen zeitnah an den Client gesendet werden, ohne dass der Client eine bestimmte Zeit lang abfragen muss
6. Welche Rolle spielt Doctype? Wie unterscheidet man zwischen striktem Modus und gemischtem Modus? Bedeutung? Die
-Deklaration wird am Anfang des Dokuments vor dem Tag platziert. Teilen Sie dem Browser mit, in welchem Modus das Dokument gerendert werden soll
Der Satz- und JS-Betriebsmodus im strikten Modus läuft nach dem höchsten vom Browser unterstützten StandardIm gemischten Modus wurde die Seite entspannt bis abwärtskompatibel angezeigt werden. Simulieren Sie das Verhalten alter Browser, um zu verhindern, dass Websites nicht funktionieren.
DOCTYPE, der nicht existiert oder falsch formatiert ist, führt dazu, dass das Dokument im Promiscuous-Modus gerendert wird
7 Welche Dokumenttypen gibt es in Doctype?Dieses Tag kann drei DTD-Typen deklarieren, die jeweils eine strikte Version, eine Übergangsversion und ein Framework-basiertes HTML-Dokument darstellen.
HTML4.01 spezifiziert drei Dokumenttypen: Strikt, Übergangsversion und FramesetXHTML 1.0 spezifiziert drei XML-Dokumenttypen: Strict, Transitional und Franmeset
Der Standardmodus (Standard) (d. h. der strikte Rendering-Modus) wird zum Rendern von Webseiten verwendet, die den neuesten Tags folgen Der Quirks-Modus (inklusive) (d. h. der lose Rendering-Modus oder der Kompatibilitätsmodus) wird zum Rendern von Webseiten verwendet, die für herkömmliche Browser entwickelt wurden
8. Was ist der Unterschied zwischen HTML und XHTML?Alle Tags müssen ein entsprechendes schließendes Tag haben
Alle Tag-Element- und Attributnamen müssen in Kleinbuchstaben geschrieben sein
Alle XML-Tags müssen ordnungsgemäß verschachtelt sein
Alle Attribute müssen in Kleinbuchstaben geschrieben sein in Anführungszeichen gesetzt „“
Alle <- und &-Sondersymbole kodieren
Allen Attributen einen Wert zuweisen
Anmerkungsinhalte verwenden nicht „--“
Bilder müssen Bildunterschriften haben
CSS
1. Warum scheint Content-Box sinnvoller zu sein? , aber border-box wird immer noch oft verwendet?
content-box ist das Standard-Box-Modell von W3C Element width+padding+border
border-Box ist ein seltsames Box-Modell Die Breite des Elements entspricht der Breite des Inhalts
. Das Hinzufügen von Abstand oder Rahmen zum Element führt jedoch manchmal dazu, dass dies der Fall ist leicht zu erledigen
2. Drei DIVs gleichmäßig in einer Zeile anordnen (Rahmen prüfen)
1. Rahmenbreite auf 33,33 % einstellen
2.flexbox flex:1
3. Welche Methoden gibt es, um ein zweispaltiges Layout zu implementieren?
Methode 1:
*{
margin: 0;
padding:0;
}
html,body{
height: 100%;
}
#left{
width: 300%;
height: 100%;
float: left;
}
#right{
height: 100%;
margin-left: 300px;
background-color: #eee;
}Methode 2:
*{
margin: 0;
padding: 0;
}
html,body{height: 100%;}
#left{
width: 300px;
height: 100%;
float: left;
}
#right{
height: 100%;
overflow: hidden;
backrgound-color: #eee;
}Die obige zweite Methode wird implementiert, indem das Prinzip der Erstellung eines neuen BFC (Formatierungsrest auf Blockebene) verwendet wird, um Textumbrüche zu verhindern. BFC ist eine relativ unabhängige Layoutumgebung und das Layout seiner internen Elemente wird durch das externe Layout nicht beeinflusst.
Es kann auf die nächste und eine andere Weise erstellt werden
Der Wert von float ist nicht none
Der Wert von position ist nicht statisch oder relativ
display Der Wert ist table-cell, table-caption, inline-block, flex oder inline-flex Einer der Werte
Überlauf ist nicht sichtbar
4. Der Wert des Flex-Attributs ist „Wie viele?“
Das Flex-Attribut ist die Abkürzung für Flex-Grow, Flex-Shrink und Flex-Basis
Das Flex-Grow-Attribut definiert das Vergrößerungsverhältnis des Elements, der Standardwert ist 0
Das Flex-Shrink-Attribut definiert das Schrumpfungsverhältnis des Artikels, und der Standardwert ist 1
Das Flex-Basis-Attribut definiert den festen Raum des Artikels
5. So implementieren Sie ein DIV von der oberen linken Ecke in die untere rechte Ecke. Welche Methoden gibt es zum Verschieben? Wie erreicht man es?
Ändern Sie den linken Wert in Fensterbreite - Div-Breite, oberen Wert in Fensterhöhe = Div-Höhe
jquerys Animationsmethode
CSS3-Übergang
6. Vertikale Zentrierung
Einzeiliges Inline-Element
Sie können Polsterung oben und Polsterung unten einstellen
und ändern height und Zeilenhöhe auf gleich setzen
Mehrzeilige Inline-Elemente
Sie können die Elemente in den Tabellenstil konvertieren und dann „vertikal-align:middle;“ festlegen 🎜>
Flex-Layout verwendenElemente auf Blockebene
Bekannte Höhe, absolute Positionierung, negative RänderUnbekannte Höhe transform:translateY(-50 %);Flex-Layout
display: flex; justify-content: center; aligin-items: center;
7. Was ist der Unterschied zwischen rem und em?
em ist relativ zum übergeordneten Element, rem ist relativ zum Wurzelelement8. Floats löschen
Verwenden Sie das Attribut „clear“. zum AufräumenFügen Sie am Ende des übergeordneten Containers ein leeres Tag ein
<div style="clear: both;"></div>
.clearfix:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}, um das zu bilden übergeordneter Container in einen BFC
BFC kann Die Hauptanwendung zum Aufräumen von Floats sind seine Layoutregeln: Interne Boxen werden nacheinander in vertikaler Richtung platziert der Boxen wird durch den Rand bestimmt. Die Ränder zweier benachbarter Boxen, die zum selben BFC gehören, überlappen sich Die linke Seite der Randbox jedes Elements steht in Kontakt mit der linken Seite der Randbox, die die schnelle Randbox enthält (für links nach links). -richtige Formatierung, sonst das Gegenteil). Dies gilt auch dann, wenn ein Float vorhanden ist Der Bereich von BFC überschneidet sich nicht mit der Float-BoxBFC ist ein isolierter unabhängiger Container auf der Seite und die darin enthaltenen Unterelemente Der Container hat keinen Einfluss auf die Elemente außerhalb. Das Gegenteil ist auch der FallBei der Berechnung der BFC-Höhe sind auch schwebende Elemente an der Berechnung beteiligtMit welcher Methode wird BFC ausgelöst?
WurzelelementFloat-Attribut ist nicht „none“Position ist absolut oder festAnzeige ist Inline-Block, Tabellenzelle, Tabelle -caption, flex, inline-flexÜberlauf ist nicht sichtbar9. Die Werte „Position“, „Relativ“ und „Absolut“ sind relativ zu wem positioniert.
relativ: Relative Positionierung, relativ zur eigenen Position im normalen Dokumentenfluss. absolut: Erzeugen Sie eine absolute Positionierung, eine Positionierung relativ zum übergeordneten Element, dessen letzte Positionierung nicht statisch ist. behoben: (wird von älteren IE-Versionen nicht unterstützt) Generieren Sie eine absolute Positionierung relativ zum Browserfenster oder -rahmen. statisch: Standardwert, keine Positionierung, das Element erscheint im normalen Dokumentenfluss. klebrig: Generieren Sie klebrige Positionierungselemente. Die Position des Containers wird basierend auf dem normalen Dokumentenfluss berechnet.10. Was sind die CSS-Selektoren? Welche Eigenschaften können vererbt werden? Wie wird der Prioritätsalgorithmus berechnet? Was sind die neuen Pseudoklassen in CSS3?
Selektoren:
ID-Selektor (#myId) Klassenselektor (.myClassName) Tag-Selektor ( div, p, h1)Angrenzender Selektor (h1 + p)
Untergeordneter Selektor (ul > li)
Nachkommenselektor (li a) Platzhalter-Selektor (*) Attribut-Selektor (button[disabled="true"]) Pseudo-Klassen-Selektor (a:hover,li :nth-child)
Priorität
!important > 行内样式（比重1000） > id（比重100） > class/属性（比重10） > tag / 伪类（比重1）;
11、介绍sass
定义变量css嵌套，允许在代码中使用算式，支持if判断for循环
12、transition 和 margin的百分比根据什么计算？
transition是相对于自身；margin相对于参照物
13、display:none和visibility:hidden的区别？
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
15、CSS中link 和@import的区别是？
link属于HTML标签，而@import是CSS提供的;
页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;
import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
link方式的样式的权重 高于@import的权重.
JS
1、介绍一下闭包和闭包常用场景？
使用闭包主要为了设计私有的方法和变量，闭包的有点事可以避免变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念。
闭包有三个特性：
函数嵌套函数
函数内部可以引用外部的参数和变量
参数和变量不会被垃圾回收机制回收
闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包常见方式，就是在一个函数的内部创建另一个函数
应用场景，设置私有变量的方法
不适用场景：返回闭包的函数是个非常大的函数
闭包的缺点就是常驻内存，会增大内存使用量，使用不当会造成内存泄漏
2、为什么会出现闭包这种东西？解决了什么问题？
受javascript链式作用域链的影响，父级变量中无法访问到子级的变量值
3、介绍一下你所了解的作用域链，作用域链的尽头是什么？为什么？
每一个函数都有一个作用域，比如创建了一个函数，函数里面又包含了一个函数，那么现在又三个作用域，这样就形成了一个作用域链
作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域链网上找
4、ajax创建的过程是怎样的，主要用到哪些状态码？
创建XMLHttpRequest对象，也就是创建一个异步调用对象
创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息
设置响应HTTP请求状态变化函数
发送HTTP请求
获取异步调用返回的数据
使用javascript和DOM实现局部刷新
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState === 4 & xmlHttp.status === 200){
}
}5、事件委托
利用冒泡原理，把时间加到父级上，触发执行效果
可以大量节省内存占用，减少事件注册
可以方便地动态添加和修改元素，不需要因为元素的改动而修改时间绑定
var ul = document.querySelector('ul');
var list = document.querySelectorAll('ul li');
ul.addEventListener('click', function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElemnt;
for(var i = 0, len = list.length; i < len; i++){
if(list[i] == target){
alert(i + "----" + target.innerHTML);
}
}
});6、javascript的内存回收机制？
垃圾回收器会每隔一段时间找出那些不再使用的内存，然后为其释放内存
一般使用标记清除方法 当变量进入环境标记为进入环境，离开环境标记为离开环境
还有引用计数方法
stack为自动分配的内存空间，它由系统自动释放；而heap则是动态分配的内存，大小不定也不会自动释放
基本数据类型存放在栈中
引用类型存放在堆内存中，首先从栈中获得该对象的地址指针，然后再从堆内存中取得所需的数据
7、javascript中的this是什么，有什么用，指向上面？
全局代码中的this是指向全局对象
作为对象的方法调用时指向调用这个函数的对象
作为构造函数指向创建的对象
使用apply和call设置this
8、判断数组有哪些方法？
a instanceof Array
a.constructor == Array
Object.protype.toString.call(a) == [Object Array]
9、严格模式的特性？
对javascript的语法和行为，都做了一些改变
全局变量必须显式的声明
对象不能有重名的属性
函数必须声明在顶层
消除js语法的一些不合理，不严谨之处，减少一些怪异行为
消除代码运行的一些不安全之处，保证代码运行的安全
提高编译效率，增加运行速度
为未来新版本的js做好铺垫
10、js的原型链，如何实现继承？
function foo(){};
foo.prototype.z = 3;var obj = new foo();
obj.x = 1;
obj.y = 2;
obj.x //1
obj.y //2
obj.z //311、图片懒加载
当页面滚动的时间被触发->执行加载图片操作->判断图片是否在可视区域内->在，则动态将data-src的值赋予该图片
12、webpack常用到哪些功能？
设置入口
设置输出目录
设置loader
extract-text-webpack-plugin将css从js代码中抽出并合并
处理图片文字等功能
解析jsx解析bable
13、函数组合继承
原型继承，构造函数继承，call apply继承
var super = function(name){ this.name = name;
}
super.prototype.func1 = function() {console.log('func1')}var sub = function(name, age){
super.call(this, name); this.age = age;
}
sub.prototype = new super()'14、对作用域链的理解
作用域链的作用是保证执行环境里有权访问的变量和函数是有序耳朵，作用域链额变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的
15、js垃圾回收方法
标记清除（mark and sweep）
这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。
垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了
引用计数(reference counting)
在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时 候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。
在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的， 也就是说只要涉及BOM及DOM就会出现循环引用问题。
16、js继承方式及其优缺点
原型链继承的缺点
一是字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数
借用构造函数（类试继承）
借用构造函数虽然解决了刚才两种问题，但是没有原型，则复用无从谈起，需要原型链+借用构造函数的模式，这种模式成为组合继承
组合式继承
组合式继承是比较常用的一种继承方法，其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承，这样，即通过在原型上定义方法实现了函数复用，有保证每个实例都有它自己的属性
ES6
1、let和const的区别？
let声明的变量可以改变，值和类型都可以改变，没有限制
const声明的变量不得改变值
2、平时用了es6的哪些内容，和es5有什么不同？
let,const,箭头函数，字符串模板，class类，模块化，promise
ES5 reuqire,react,createclass
3、介绍promise
就是一个对象，用来传递异步操作的消息。有三种状态：pending(进行中)，resolved(已完成)和rejected(失败)
有了promise对象，就可以将异步操作以同步操作的流程表示出来，避免了层层嵌套的回调函数
前端框架
模块化
1、使用模块化加载时，模块记载的顺序是怎么样的，如果不知道，根据已有的知识，加载顺序是怎么样的
commonjs 同步循序执行
AMD 提前加载，不管是否调用模块，先解析所有模块require速度快 有可能浪费资源
CMD提前加载，在正真需要使用（依赖）模块时才解析该模块
seajs按需解析，性能比AMD差
框架问题
1、什么是MVVM，和MVC有什么区别，原理是什么？
mvc的界面和逻辑关联紧密，数据直接从数据库读取，必须通过controller来承上启下，通信都是单向的
mvvm的view 和 viewModel可以互相通信，界面数据从viewmodel中获取
2、父子组件通信
vue：父组件是通过props属性给子组件通信，在子组件里面emit，在父组件监听
react：props传递 父给子穿一个回调函数，将数据传给父亲处理
3、兄弟组件怎么通信的？
vuex 建立一个vue的实例，emit触发时间 on监听时间
redux 子A ->父->子B
4、生命周期有哪些，怎么用？
beforecreated: el 和 data并未初始化
created： 完成了 data数据的舒适化，el没有
beforeMount：完成了el 和 data初始化
mounted：完成挂载，updated,destroyed
浏览器
1、跨域通信有哪些解决方案？
（1）JSONP
由于同源策略的限制，XMLHttpRequest只允许请求当前资源（域名、协议、端口）的资源，script标签没有同源限制，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
通过动态
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
