Zusammenfassung der neuesten schriftlichen Front-End-Testfragen

Da viele Freunde nach schriftlichen Front-End-Testfragen fragen, habe ich einige Interviewfragen für Sie zusammengestellt. Dies sind die aktuellsten Fragen im Jahr 2017. Ich hoffe, dass sie Ihnen dabei helfen, Ihre Fähigkeiten zu verbessern. Ich wünsche Ihnen auch, dass Sie in das Unternehmen einsteigen können, in dem Sie arbeiten möchten.

In diesem Artikel werden die neuesten schriftlichen Front-End-Testfragen für 2017 gesammelt und detaillierter analysiert. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:

1. Zwei Divs auf einer Seite decken den gesamten Browser ab. Stellen Sie sicher, dass das linke Div immer 100 Pixel groß ist und das rechte Div sich mit der Größe des Browsers ändert (z. B Der Browser ist 500 und das rechte Div ist 400, der Browser ist 900 und das rechte Div ist 800. Bitte notieren Sie den ungefähren CSS-Code.

1. Verwenden Sie Flex

//html
<div class=&#39;box&#39;><div class=&#39;left&#39;></div> <div class=&#39;right&#39;></div></div>
//css
.box {
    width: 400px;
    height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #c3c3c3;
}
.left {
    flex-basis：100px;
    -webkit-flex-basis: 100px;
    /* Safari 6.1+ */
    background-color: red;
    height: 100%;
}
.right {
    background-color: blue;
    flex-grow: 1;
}

2. Floating-Layout

<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
#left {
    float: left;
    width: 220px;
    background-color: green;
}
#content {
    background-color: orange;
    margin-left: 220px;
    /*==等于左边栏宽度==*/
}
</style>

2. Bitte schreiben Sie etwas Front-End-Leistung Optimierung Je mehr Möglichkeiten, desto besser

1. DOM-Operationen reduzieren

2. Vor der Bereitstellung Bildkomprimierung, Codekomprimierung

3 .JS-Codestruktur optimieren und redundanten Code reduzieren

4. Reduzieren Sie HTTP-Anfragen und richten Sie den HTTP-Cache angemessen ein

5 Caching

7. Verzögertes Laden von Bildern

3. Was passiert im Prozess von der Eingabe der URL bis zum Abschluss des Seitenladens und der Anzeige auf einer Seite? ? (Je detaillierter der Vorgang, desto besser)

Geben Sie die Adresse ein

1 Der Browser sucht nach der IP-Adresse des Domainnamens

2. Dieser eine Schritt umfasst den spezifischen Suchprozess von DNS, einschließlich: Browser-Cache->System-Cache->Router-Cache...

3. Der Browser sendet eine HTTP-Anfrage an das Web Server

4. Server Permanente Weiterleitungsantwort (von http://example.com zu http://www.example.com)

5. Der Browser verfolgt die Weiterleitungsadresse

6. Der Server verarbeitet die Anfrage

Der Server sendet eine HTTP-Antwort

9 Erhalten Sie in HTML eingebettete Ressourcen (wie Bilder, Audio, Video, CSS, JS usw.)

10. Der Browser sendet eine asynchrone Anfrage

4. Bitte beschreiben Sie kurz die Einschränkungen für Seitenzugriffscookies

Domainübergreifende Probleme

Set HttpOnly

5. Beschreiben Sie das Neuzeichnen und Umfließen des Browsers. Welche Methoden können den durch Dom-Operationen verursachten Umfluss verbessern?

1. Ändern Sie den Klassennamen direkt , verwenden Sie cssText

// 不好的写法
var left = 1;
var top = 1;
el.style.left = left + "px";
el.style.top = top + "px"; // 比较好的写法
el.className += " className1";
// 比较好的写法
el.style.cssText += ";
left: " + left + "px;
top: " + top + "px;";

2. Lassen Sie die zu bedienenden Elemente „offline verarbeiten“ und aktualisieren Sie sie nach der Verarbeitung gemeinsam

a) Verwenden Sie DocumentFragment für den Caching-Vorgang und lösen Sie einmal Reflow und Neuzeichnen aus.

b) Verwenden Sie die display:none-Technologie, um nur zwei Reflows und Neuzeichnungen auszulösen. wahr oder falsch) und replaceChild-Technologie zum Auslösen eines Reflows und Neuzeichnens

6. Vue-Lebenszyklus-Hooks

1 .beforecreate

2.created

3.beformount

4.mounted

5.beforeUpdate

6.updated

7.aktiviert

8.deaktiviert

9.vor Zerstörung

10.zerstört

7. Wie viele JS-Anforderungsmethoden können domänenübergreifend geschrieben werden? Ändern von document.domain

3. Verwenden Sie window.name für domänenübergreifend

4. Verwenden Sie die in HTML5 neu eingeführte Methode window.postMessage, um Daten domänenübergreifend zu übertragen (d. h. 67 unterstützt sie nicht). )

5. CORS erfordert, dass der Server Header setzt: Access-Control-Allow-Origin.

6. Diese Methode des Nginx-Reverse-Proxys wird selten erwähnt, erfordert jedoch nicht die Mitarbeit des Zielservers, sondern Sie müssen einen Transit-Nginx-Server erstellen, um Anforderungen weiterzuleiten

8. Verständnis für Frontend-Engineering

Entwicklungsspezifikationen

Modulare Entwicklung

Komponentenentwicklung

Komponentenlager

Leistungsoptimierung

Projektbereitstellung

Entwicklungsprozess

Entwicklungstools

Neun, js Deep Copy-Methode

1. Verwenden Sie jqs $.extend(true, target, obj)

2. create(sourceObj), // Aber dabei gibt es ein Problem: Änderungen an newobj wirken sich nicht auf sourceobj aus, aber Änderungen an sourceobj wirken sich auf newObj aus

3.newobj = JSON.parse(JSON. stringify(sourceObj) )

10. js-Designmuster

Im Allgemeinen werden Designmuster in drei Kategorien unterteilt:

Kreative Muster, insgesamt fünf Typen: Fabrikmethodenmuster,

Abstraktes Fabrikmuster

, Singleton-Muster,

Builder-Muster
und Prototypmuster.

Insgesamt gibt es sieben Strukturmodi:

Adaptermodus

, Dekoratormodus, Proxy-Modus, Erscheinungsmodus, Bridge-Modus, Kombinationsmodus und Fliegengewichtsmodus.

Verhaltensmuster, insgesamt elf Typen: Strategiemuster, Vorlagenmethodenmuster,

Beobachtermuster

, iteratives Untermuster,

Verantwortungskettenmuster, Befehlsmuster, Memo Modus, Statusmodus, Besuchermodus, Vermittlermodus

11. Bildvorschau

12. Abflachen mehrdimensionales Array

Alte Methode

var result = []
function unfold(arr){
     for(var i=0;i< arr.length;i++){
      if(typeof arr[i]=="object" && arr[i].length>1) {
       unfold(arr[i]);
     } else {        
       result.push(arr[i]);
     }
  }
}
var arr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
unfold(arr)

2、使用tostring

var c=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
var b = c.toString().split(',')

3、使用es6的reduce函数

var arr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
var result = flatten(arr)

十三、iframe有那些缺点？

iframe会阻塞主页面的Onload事件；

搜索引擎的检索程序无法解读这种页面，不利于SEO;

iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

以上就是我收集的前端笔试题以及答案，所述对大家有所帮助。

推荐阅读：

作为前端开发工程师一定要关注三点的性能指标

前端JS面试题

php学习之为什么说PHP适合做前端JAVA适合做后端？

Das obige ist der detaillierte Inhalt vonZusammenfassung der neuesten schriftlichen Front-End-Testfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!