Résumé des dernières questions du test écrit frontal

Voyant que de nombreux amis demandent des questions de test écrit initial, j'ai rassemblé quelques questions d'entretien pour vous. Ce sont toutes les dernières questions de 2017. J'espère qu'elles vous aideront à améliorer vos compétences. J'aimerais également que vous puissiez intégrer l'entreprise dans laquelle vous souhaitez travailler.

Cet article rassemble et analyse plus en détail les dernières questions du test écrit frontal de 2017. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

1. Deux divs sur une page couvrent tout le navigateur. Assurez-vous que le div de gauche fait toujours 100 px et que le div de droite change en fonction de la taille du navigateur (par exemple, le div de droite). le navigateur est 500 et le div de droite est 400, le navigateur est 900 et le div de droite est 800), veuillez noter le code CSS approximatif.

1. Utilisez 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. Mise en page flottante

<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. Veuillez écrire des performances frontales. optimisation Plus il y a de façons, mieux c'est

1. Réduire les opérations DOM

2. Avant le déploiement, compression d'image, compression de code

3. .Optimisez la structure du code js et réduisez le code redondant

4. Réduisez les requêtes http et configurez raisonnablement le cache HTTP

5 Utilisez le CDN de distribution de contenu pour accélérer

6. mise en cache

7. Chargement retardé des images

3. Que se passe-t-il dans le processus depuis la saisie de l'URL jusqu'à la fin du chargement de la page et de son affichage sur une page ? (Plus le processus est détaillé, mieux c'est)

Entrez l'adresse

1. Le navigateur recherche l'adresse IP du nom de domaine

.

2. Cette étape comprend le processus de recherche spécifique du DNS, notamment : cache du navigateur->cache système->cache du routeur...

3. serveur

4. Réponse de redirection permanente du serveur (de http://example.com vers http://www.example.com)

5. Le navigateur suit l'adresse de redirection

6. Le serveur gère la requête

7. Le serveur renvoie une réponse HTTP

8 Le navigateur affiche du HTML

9. obtenir des ressources intégrées en HTML (telles que des images, de l'audio, de la vidéo, du CSS, du JS, etc.)

10. Le navigateur envoie une requête asynchrone

. 4. Veuillez décrire brièvement les restrictions sur les cookies d'accès aux pages

Problèmes inter-domaines

Définir HttpOnly

5. Décrivez le redessin et la redistribution du navigateur. Quelles méthodes peuvent améliorer la redistribution provoquée par les opérations dom

1 Si vous modifiez le style de manière dynamique. , utilisez 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. Laissez les éléments à utiliser être "traités hors ligne" et mis à jour ensemble après le traitement

<🎜. >

a) Utilisez DocumentFragment pour l'opération de mise en cache, en déclenchant une fois la redistribution et le redessinage

b) Utilisez la technologie display:none pour déclencher seulement deux redistributions et redessinages

c) Utilisez cloneNode( vrai ou faux) et la technologie replaceChild pour déclencher une refusion et un redessin

6. vue life cycle hook

1 . beforecreate

2. créé

3.beformount

4.monté

5.beforeUpdate

6.mis à jour

7.actived

8.deatived

9.beforeDestroy

10.destroyed

7. Combien de méthodes de requête inter-domaines js peuvent être écrites ? Il existe plusieurs types

1 Cross-domain via jsonp

2. modification de document.domain

3. Utilisez window.name pour plusieurs domaines

4. Utilisez la méthode window.postMessage nouvellement introduite dans HTML5 pour transmettre des données entre domaines (c'est-à-dire que 67 ne la prend pas en charge). )

5. CORS nécessite que le serveur définisse les en-têtes : Access-Control-Allow-Origin.

6. Cette méthode de proxy inverse nginx est rarement mentionnée, mais elle ne nécessite pas la coopération du serveur cible, mais vous devez créer un serveur nginx de transit pour transférer les requêtes

8. Compréhension de l'ingénierie front-end

Spécifications de développement

Développement modulaire

Développement de composants

Entrepôt de composants

Optimisation des performances

Déploiement de projet

Processus de développement

Outils de développement

Neuf, méthode de copie approfondie js

1 Utilisez $.extend(true, target, obj)

2 de jq. create(sourceObj), // Mais il y a un problème avec ceci : les modifications apportées à newobj n'affecteront pas sourceobj, mais les modifications apportées à sourceobj affecteront newObj

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

10. modèles de conception js

En général, les modèles de conception sont divisés en trois catégories :

Modèles créatifs, cinq types au total : modèle de méthode d'usine,

modèle d'usine abstrait, modèle singleton, modèle de constructeur et modèle de prototype.

Il existe sept modes structurels au total :

Mode adaptateur, mode décorateur, mode proxy, mode apparence, mode pont, mode combinaison et mode poids mouche.

Modèles comportementaux, onze types au total : Modèle de stratégie, Modèle de méthode modèle,

Modèle d'observateur, Sous-modèle itératif, Modèle de chaîne de responsabilité, Modèle de commande, Mémo Mode, mode statut, mode visiteur, mode médiateur

11. Aperçu de l'image

<input type="file" name="file" onchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">
function showPreview(source) {
  var file = source.files[0];
  if(window.FileReader) {
      var fr = new FileReader();
      fr.onloadend = function(e) {
        document.getElementById("portrait").src = e.target.result;
      };
      fr.readAsDataURL(file);
  }
}

12. Aplatir tableau multidimensionnel

1. Ancienne méthode

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适合做后端？

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!