Maison > Article > interface Web > 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='box'><div class='left'></div> <div class='right'></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
7.actived8.deatived9.beforeDestroy10.destroyed
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
<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); } }
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属性值,这样可以绕开以上两个问题。
以上就是我收集的前端笔试题以及答案,所述对大家有所帮助。
推荐阅读:
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!