Quelles sont les nouveautés du H5 et du C3 ?
H5 : Balises sémantiques (nva, side, dialog, header, footer, etc.), canevas, glisser-déposer, audio et vidéo, stockage web (localStorage, session Storage) ; C3 : border, backgroundColor, transformation, translation, animation
, 2D, 3D, transition, dégradé, mise en page flexible, requête multimédia, sélecteur ;
Quel est le modèle de la boîte
Les composants du modèle de boîte : remplissage, marge, bordure, largeur, hauteur.
La différence entre le modèle de boîte IE et le modèle de boîte W3C : la largeur et la hauteur du W3C sont la largeur et la hauteur du contenu, et la largeur et la hauteur d'IE sont les largeur et hauteur du contenu plus remplissage et bordure. ;
box-sizing:
content-box; (modèle de boîte W3C)
border-box; (modèle de boîte IE)
Comment effacer les flotteurs
1 : Donnez à l'élément parent une hauteur fixe ;
2 : Ajoutez une étiquette vide à la fin de l'élément flottant et définissez l'attribut sur clear : les deux ; 3
: Utilisez l'attribut overflow pour effacer le float ;
4 : Utilisez des pseudo-éléments pour effacer le flottant, par exemple :
.clearfix:after{ content: ""; //Définit le contenu sur une hauteur vide:0; //La hauteur est de 0 line-height:0; //La hauteur de la ligne est de 0 display:block; // Convertir le texte en éléments de niveau bloc visibilité:hidden; //Masquer l'élément clear:both //Effacer le flottant } .clearfix{ zoom:1;Pour la compatibilité avec IE }
Parlez-moi de votre compréhension de la sémantique
La sémanticisation consiste à rendre la structure de la page plus claire, quel type de code est écrit dans quel type de balises, comme l'écriture de paragraphes dans le segment de balise p et l'écriture de la barre de navigation dans la balise nva. Elle permet au navigateur de mieux l'analyser et est également bénéfique pour le référencement.
Comment s'adapter au terminal mobile
Méthode 1 : mise en page rem + pourcentage.
Cependant, il y a un problème. Il y aura une confusion momentanée avant le chargement de la page. Bien que cela ne prenne pas longtemps, il est visible à l'œil nu. C'est difficile à résoudre. C'est Non recommandé. Méthode 2 : Utiliser les requêtes multimédias C3. Les requêtes multimédias
sont
principalement Il exécute différents codes CSS en interrogeant la largeur du périphérique.@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ /*你的css代码*/ }Par exemple:
@media screen and (min-device-width: 320px)and (-webkit-min->device-pixel-ratio: 2) { html{ font-size:10px; } } @media only screen and (min-device-width: 375px)and (-webkit-min->device-pixel-ratio: 2) { html{ font-size:12px; } } @media only screen and (min-device-width: 375px)and (-webkit-min->device-pixel-ratio: 3) { html{ font-size:16px; } } @media only screen and (min-device-width:412px) and (-webkit-min->device-pixel-ratio: 3) { html{ font-size:20px; } }
Troisième méthode : principe de mise en œuvre de la mise en page flexible
Sa fenêtre d'affichage est fixe, la hauteur est fixe, la largeur est adaptative et les éléments utilisent px comme unité.<meta name="viewport" content="width=device-width,initial-scale=1,maximum-> scale=1,user-scalable=no">À mesure que la largeur de l'écran change, la page change également en conséquence. L'effet est similaire à la mise en page fluide de la page PC. Lorsque la largeur doit être ajustée, utilisez simplement la mise en page correspondante pour l'ajuster, réalisant ainsi l'adaptation.
Quelles sont les nouvelles fonctionnalités d’ES6 et quelles sont les différences par rapport à ES5 ?
Il existe des mots-clés let, des constantes const, des fonctions fléchées, des affectations de déstructuration, des méthodes simples pour les valeurs d'attribut d'objet, des promesses, des async, l'héritage de classe, etc. dans ES6. La différence par rapport à ES5 est l'ajout d'une portée au niveau du bloc
. avant seront traitées. La promotion des variables est soit globale, soit locale, tandis que les variables déclarées par let ne fonctionnent que dans le bloc de code
La différence entre les fonctions fléchées et les fonctions ordinaires
La fonction flèche est équivalente à une fonction anonyme. Elle ne peut pas être utilisée comme constructeur et n'a pas d'attribut de prototype ; la
fonction flèche ne peut pas lier d'arguments et peut être résolue avec des paramètres rest ; la
fonction flèche ne lie pas cela et capturera ses précédents et après-midi this ;
le this de la fonction flèche pointe vers l'appel Son objet ;
le this de la fonction flèche pointe toujours vers le this du contexte, et aucune méthode ne peut changer le point de this ;
Comment fonctionne l’ajax ? Étapes d'utilisation ? Comment télécharger des fichiers ?
Ajax est une technologie de données asynchrone. Son principe de fonctionnement est d'envoyer des requêtes asynchrones au serveur via l'objet XMLHttpRequest. Il est similaire à une couche intermédiaire chargée de demander des données sans affecter l'exécution d'autres événements dans le navigateur. Il en informera le navigateur après le retour des données. Le navigateur est en cours de traitement ;
Étapes d'utilisation d'Ajax
1. Créez un nouvel objet XMLHttpRequest let xhr = new XMLHttpRequest();
2. Utilisez les méthodes open() et send() pour envoyer des requêtes xhr.open(url:xxx)xhr.send();
3. Utilisez onload pour enregistrer Callback, xhr.οonlοad=function(){};
4. Traitez la réponse en fonction du résultat renvoyé par le serveur xhr.responseText;
Comment télécharger des fichiers avec Ajax
Vous pouvez utiliser l'objet FormData
1. Créez un objet FormData f = new FormData();
2. Obtenez les informations sur l'image pour confirmer la sélection via files[0] imgInfo=document.getElementById('img') .files[0] ;
3. Ajoutez les informations du fichier à l'objet FormData. Notez qu'il s'agit de la forme d'une paire clé-valeur
f.append('img',imgInfo);
4. Ajoutez l'objet FormData $ajax({data :f });
La différence entre les requêtes get et post
1. Différentes méthodes de transmission des paramètres
: get : transmettre les paramètres via une URL ;
post : transmettre les paramètres via le corps de la requête ;
2. Différentes sécurités
: get : paramètres transmis via une URL, les informations sur les données peuvent être facilement trouvées dans l'historique et le cache du navigateur, elles sont donc sécurisées La sécurité est faible ;
post : Les paramètres sont transmis via le corps de la requête et le navigateur les chiffrera, la sécurité est donc relativement élevée ;
3. La taille des paramètres transmissibles est différente
. get : Parce qu'il est transmis dans l'URL , il y a une limite de longueur ;
post : Il peut être transmis Paramètres dans n'importe quel format ;
Qu'est-ce que l'inter-domaine et comment résoudre les problèmes inter-domaines
Le cross-domain fait référence à la politique de même origine mise en œuvre par les navigateurs pour la sécurité, y compris le protocole, le nom de domaine et le port. Si l'un de ces trois éléments est différent, un cross-domaine se produira ;
Solutions interdomaines
Méthode 1 (JSONP) :
En utilisant JSONP, l'attribut 'src' dans la balise 'script' est utilisé, il n'y a aucune restriction entre domaines et une fonction de rappel est fournie. Le nom de la fonction de rappel est callback ;
Deuxième méthode (agent) :
Vue intègre des solutions inter-domaines, qui peuvent être résolues en ajoutant un proxy : devServer
: {proxy : adresse proxy} est ajouté à vue.config.js ;
Troisième méthode (backend PHP) :
Le backend PHP est requis pour autoriser l'accès depuis toutes les sources en modifiant l'en-tête :header('Access-Control-Allow-Origin'); //允许所有来源访问 header('Access-Control-Allow-Method:POST,GET'); //允许访问的方式
Qu’est-ce que Jsonp ? Quel est le principe de Jsonp ?
Jsonp est un format léger de transmission de données utilisé pour résoudre les problèmes de requêtes inter-domaines ;
le principe est d'utiliser le lien d'attribut src dans la balise script pour accéder aux scripts js inter-domaines. Grâce à cette fonctionnalité, le serveur ne renvoie plus le format json. , mais renvoie un morceau de code js qui appelle une certaine fonction et l'appelle dans src, réalisant ainsi un inter-domaine ;
Qu'est-ce qu'une promesse ?
Promise est utilisé pour résoudre l'imbrication de rappels multicouches, ce que nous appelons souvent l'enfer des rappels ;
c'est un constructeur, créé via le mot-clé new, avec deux paramètres : résoudre et rejeter, qui sont également une méthode, résoudre renvoie une valeur réussie , puis obtient le résultat via .then. S'il y a plusieurs couches, vous pouvez continuer à appeler promise dans chaque couche. Un nouvel objet sera renvoyé et vous pourrez continuer à utiliser la méthode .then, ce qui rend la structure claire. , résolvez l'imbrication de fonctions à plusieurs niveaux ;
La différence entre les cookies, sessionStorage et localStorage
1. Différents cycles de vie :
cookie : le délai d'expiration peut être défini, s'il n'est pas défini, il expirera après la fermeture du navigateur par défaut ;
localStorage : sera enregistré de manière permanente à moins qu'il ne soit effacé manuellement ;
sessionStorage : valide uniquement dans la session de page Web en cours, fermez la page ou le navigateur sera effacé ; 2. La taille des données des cookies
avec différentes tailles de données ne peut pas dépasser 4 Ko ; la taille des données de sessionStorage et localStorage peut atteindre 5 M ou plus ; 3. Différents cookies pour les requêtes http : seront transportés dans le En-tête HTTP à chaque fois, si l'utilisation de cookies pour enregistrer trop de données entraînera des problèmes de performances ; localStorage et sessionStorage : enregistrés uniquement dans le navigateur et non impliqués dans la communication avec le serveur ; 4. Les cookies avec des portées différentes sont également partagés dans toutes les fenêtres du même origine ; sessionStorage n'est pas disponible Partagé dans différentes fenêtres de navigateur, même sur la même page ; localStorage est partagé dans toutes les fenêtres de même origine ;
Processus de dessin de pages
1. Le navigateur analyse le code HTML obtenu dans une arborescence DOM. L'arborescence DOM contient tous les nœuds et est cachée à l'intérieur ; 2. Le navigateur
analyse tous les styles CSS obtenus dans une structure de style ;
3. Ensuite, l'arborescence dom et la structure de style générer un arbre de rendu. Chaque nœud de l'arbre de rendu a son propre style, qui n'inclut pas les nœuds cachés. Cependant, la visibilité : les nœuds cachés sont toujours dedans car ils occupent une position et affectent la mise en page. En CSS2, ces nœuds sont appelés les boîtes, qui sont des boîtes contenant du remplissage, des bordures, des marges et des positions ;
une fois l'arbre de rendu construit, le navigateur dessine la page en fonction de celui-ci.
Redessiner et redistribuer les pages
Redistribution : lorsque la taille, le style et la disposition de tout ou partie des éléments de l'arbre de rendu changent et doivent être reconstruits, cela s'appelle redistribution ; chaque page est redistribuée au moins une fois, c'est-à-dire lorsque la page est chargée pour la première fois. temps ; redessiner :
quand Au cours du processus de redistribution, le navigateur invalidera la partie affectée de l'arbre de rendu et reconstruira cette partie de l'arbre de rendu. Après avoir terminé la redistribution, le navigateur redessinera la partie affectée à l'écran. Ce processus est nécessaire pour redessiner la refusion
. Provoque un redessin, le redessin ne provoque pas nécessairement une refusion