Resumen de las preguntas de la entrevista principal de front-end (html, css, js, ajax, http)

La respuesta es solo para referencia. Las respuestas están incompletas o sesgadas, y puede agregarlas y corregirlas en el área de comentarios.

¿Cuál es el modelo de caja?

Piense en todos los elementos de la página web como un cuadro, que tiene cuatro atributos :
contenido, relleno, borde y margen
. Este es el modelo de cuadro.

¿Cuáles son los elementos de la línea? ¿Cuáles son los elementos a nivel de bloque? ¿Cuáles son los elementos violados?

行 内 元素 ： a 、 b 、 span 、 img 、 input 、 strong 、 select 、 label 、 em 、 button 、 textarea

Elementos a nivel de bloque: div, ul, li, dl, dt, dd, p, h1-h6, blockquote

Elementos vacíos: elementos HTML sin contenido, como: br, hr, link, input, img, meta

Enumere algunas características nuevas de HTML5 y CSS3 que conoce

HTML5: más
etiquetas de contenido semántico (encabezado, navegación, aparte, artículo, sección, pie de página)

Elementos de video y audio para reproducción multimedia

ID de datos de atributo personalizado

HTML5 tiene varios tipos de entrada de formulario nuevos. Estas nuevas funciones proporcionan un mejor control y verificación de las entradas.
calendario, fecha, hora, correo electrónico, url, búsqueda

CSS3:
Color: RGBA, modo HSLA agregado

Sombra de texto

Borde: esquinas redondeadas (radio de borde) Sombra de borde: sombra de cuadro

Modelo de caja: tamaño de caja

背景: fondo-tamaño fondo-origen fondo-clip

渐变: gradiente lineal, gradiente radial

Transición: la transición se puede animar

Animación personalizada animar @keyfrom

Diseño de varias columnas de consulta de medios @ pantalla de medios y (ancho: 800 px) {…}

imagen de borde

2D 转换; transformar: trasladar (x, y) rotar (x, y) sesgar (x, y) escala (x, y)

Conversión 3D

Perfil delantero

Flex de diseño flexible

Describe brevemente la diferencia entre src y href

href se usa para establecer la relación (enlace) entre la página actual y el recurso referenciado, y src reemplazará la etiqueta actual. Al encontrar href, la página cargará el contenido posterior en paralelo; mientras que src es diferente, el navegador necesita cargar el contenido de src antes de que continúe bajando

Se recomienda que los archivos js se coloquen al final del documento HTML. Si el archivo js se coloca en la etiqueta principal, puede usar window.onload para lograr la carga final de js.

Para obtener más información, consulte: La diferencia entre href y src

CSS para lograr un centrado vertical y horizontal (lista uno)

Método 1: Usar posición: absoluta y transformar para lograr

Si no está seguro de la altura del elemento secundario, puede omitir margin-top y usar transform: translate (-50%, - 50%)

Método 2: Diseño flexible (flex)
Establezca el valor de visualización del elemento principal en flex y luego configure align-items: center; justify-content: center;

Consulte: Varios métodos de CSS para lograr un centrado vertical y horizontal

La diferencia entre px y em, rem

1. PX son en realidad píxeles. Cuando se usa PX para establecer el tamaño de fuente, es más estable y preciso. Pero si cambia el zoom del navegador, el diseño original se romperá
2. En comparación con px, em y rem son más flexibles. Son unidades de longitud relativa, lo que significa que la longitud no es fija y es más adecuada para diseños receptivos.
3. La diferencia entre em y rem se resume en una oración: em es relativo al elemento padre, rem es relativo al elemento raíz
4. IE6-IE8 no admite atributos em y rem, px es compatible con todos los navegadores.
   Por lo tanto, para la compatibilidad del navegador, puede usar "px" y "rem" juntos, usar "px" para lograr el efecto en IE6-8 y luego usar "Rem" para lograr el efecto del navegador de generación.

Para ver ejemplos prácticos, consulte: https://www.cnblogs.com/nannan1221/p/10772977.html

Hablar sobre la diferencia entre sincrónico y asincrónico

Sincrónico bloqueará, asíncrono no bloqueará

Sincronización: el programa se ejecuta de arriba a abajo, el navegador debe completar esta tarea antes de poder continuar ejecutando la siguiente.

Asincrónico: el programa se ejecuta de arriba a abajo. La tarea del navegador no se ejecuta, pero se puede ejecutar la siguiente línea de código. Cuando la persona que llama obtiene el resultado, notificará activamente a la persona que llama a través de la función de devolución de llamada.

¿Qué hace Doctype? ¿En qué se diferencian el modo estricto y el modo promiscuo? ¿Qué quieren decir?

Rol: la
<!DOCTYPE> declaración se encuentra en la primera línea del documento HTML, antes de la etiqueta. Indique al analizador del navegador qué estándar de documento analizar este documento . La ausencia o el formato incorrecto de DOCTYPE hará que el documento se procese en modo de compatibilidad.

¿En qué se diferencian el modo estricto y el modo promiscuo?
1. La composición tipográfica en modo estándar (modo estricto) y el modo de operación JS se ejecutan con el estándar más alto admitido por el navegador (estándar W3C).
2. En el modo de compatibilidad (modo promiscuo o modo extraño), la página se muestra de una manera poco compatible con versiones anteriores, simulando el comportamiento de los navegadores antiguos para evitar que el sitio no funcione. (La compatibilidad con versiones anteriores aquí se refiere a discutir problemas de compatibilidad de versiones anteriores desde el punto de vista de la nueva versión)

Importancia:
A medida que la consistencia de los estándares se vuelve cada vez más importante, los desarrolladores de navegadores tienen que enfrentarse a una elección difícil: seguir gradualmente los estándares de w3c es el camino a seguir. Sin embargo, cambiar el CSS existente y seguir completamente el estándar hará que muchos sitios web antiguos se dañen más o menos. Si el navegador analiza repentinamente el CSS existente de la manera correcta, la visualización del sitio web antiguo se verá afectada inevitablemente. Por lo tanto, todos los navegadores deben proporcionar dos modos, el modo híbrido cumple las reglas del viejo mundo y el modo estricto cumple las reglas estándar.

La diferencia entre nulo e indefinido

Los valores de nulo e indefinido son iguales y los tipos no son iguales cuando se comparan los dos por igualdad

console.log(null==undefined);    //true  因为两者都默认转换成了false
console.log(null===undefined);    //false   "==="表示绝对相等，null和undefined类型是不一样的，所以输出“false”
console.log(typeof undefined);    //"undefined"  
console.log(typeof null);       //"object"  

null: tipo nulo, que representa un "valor nulo", que representa un puntero de objeto nulo, que utiliza la operación typeof para obtener "objeto", por lo que puede pensar en él como un valor de objeto especial.
Generalmente se usa para liberar activamente referencias a objetos, por ejemplo:

var emps = ['ss','nn'];
emps = null;     // 释放指向数组的引用

indefinido : Indica que la variable ha sido declarada pero no se le ha asignado un valor.

var a;    // a 自动被赋值为 undefined

Entonces, ¿cuándo es nulo y cuándo no está definido? ? ?

Nulo significa "sin objeto", es decir, no debería haber ningún valor allí. El uso típico es:

(1) Como parámetro de función, significa que el parámetro de función no es un objeto.
(2) Como el final de la cadena de prototipos de objetos.

undefined significa que falta el valor, es decir, debería haber un valor aquí, pero no está definido. El uso típico es:

(1) Los parámetros formales están definidos, pero no se pasan parámetros reales, se muestra indefinido

(2) Cuando el nombre de la propiedad del objeto no existe, se muestra undefined

(3) La función no escribió el valor de retorno, es decir, no escribió el retorno y quedó indefinido.

(4) Escribí return, pero no asigné un valor y obtuve indefinido

Cuándo usar nulo
Cuando un objeto relativamente grande se agota y la memoria necesita ser liberada, configúrelo en nulo.

Describe brevemente tu comprensión de json

(1) JSON es un formato de intercambio de datos liviano; al usar pares clave-valor, es fácil de leer y escribir, y también es fácil de analizar y generar por máquina.
(2) JSON es independiente del idioma, lo que significa que no importa qué idioma sea, se puede analizar como json, simplemente siga las reglas de json.
(3) La sintaxis JSON representa tres tipos de valores, valores simples (cadena, numérico, booleano, nulo), matriz y objeto.

Una breve introducción al constructor

Un ejemplo es explicar el constructor. Creo que es bastante apropiado citarlo aquí. Alguien quiere hacer mil monedas de oro, y cada moneda de oro está grabada con un número diferente. La forma más fácil es crear un modelo de moneda de oro. Y luego graba sus respectivos números. El constructor es el modelo de esta moneda de oro. Cada vez que haces una nueva, creas una moneda de oro.
Un constructor es una función ordinaria y su método de creación no es diferente de una función ordinaria, la diferencia es que la primera letra del constructor se escribe habitualmente en mayúscula. La otra es la diferencia en los métodos de llamada, las funciones ordinarias se llaman directamente y los constructores necesitan usar la nueva palabra clave para llamar.

Para obtener más información, consulte: la diferencia entre constructor y función ordinaria

Prototipo y cadena de prototipos en javascript

Prototipo :
En JavaScript, siempre que se define un tipo de datos de función (función ordinaria, clase), nace una propiedad prototipo, que apunta al objeto prototipo de la función y esta propiedad es el valor de un tipo de datos de objeto.

El objeto prototipo es equivalente a un área pública. Todas las instancias de la misma clase pueden acceder a este objeto prototipo. Podemos establecer el contenido común del objeto en el objeto prototipo.

Cadena de prototipo:
Todo objeto creado tendrá un atributo de prototipo de prototipo. Cuando un determinado atributo de este objeto no existe, buscará su prototipo, y el prototipo tiene su propio prototipo, y entonces este ciclo es la cadena de prototipo
Comprensión individual : Solo las funciones tienen propiedades de prototipo. Esta declaración puede no ser precisa, pero significa que la mayoría de las veces.
1. proto se usa realmente en la consulta de la cadena de prototipos, y siempre apunta al prototipo;
2. el prototipo es una función Única, se crea automáticamente cuando se define el constructor y siempre se hace referencia a él mediante proto .

Referencia: explicación detallada del prototipo y la cadena de prototipos

Alcance y cierre

Alcance: en JavaScript, el alcance es una colección de variables, objetos y funciones accesibles .

La función Acontiene la función B, y la variable de la función se Busa en la función A, entonces la función Bse llama cierre.
O: un cierre es una función que puede leer las variables internas de otras funciones

función A () { var a = 1; función B () { console.log (a); } return B (); }

Los cierres dan un ejemplo: las

tres líneas de código anteriores están en una función inmediata.
En las tres líneas de código, hay una variable local local y una función foo Se puede acceder a la variable local en foo.
Bueno, esto es un cierre:
la suma de "función" y "variables accesibles dentro de la función" (también llamado entorno) es un cierre.
Es así de simple.

Para casos detallados, consulte: Alcance de
JavaScript Cierre de JavaScript
¿Qué es el cierre en JS? Habla super bien
¿Qué es el cierre? Y las ventajas, desventajas, usos y características de los cierres

Tiene dos usos principales, uno es leer las variables dentro de la función mencionada anteriormente y el otro es mantener los valores de estas variables en la memoria .

¿Por qué no abusar de los cierres?

Dado que los cierres harán que las variables de la función se almacenen en la memoria, lo que consume mucha memoria, no se debe abusar de los cierres, de lo contrario provocará problemas de rendimiento de la página web y puede provocar pérdidas de memoria en IE. La solución es que, antes de salir de la función, no usará eliminar todas las variables locales.
Otro concepto: la pérdida de memoria se refiere a variables que no puede usar (no puede acceder), que aún ocupan espacio en la memoria y no se pueden reutilizar.

¿Qué es ajax?

Ajax es el nombre completo de JavaScript y XML asíncronos, es decir, JavaScript y XML asincrónicos, que se utiliza para realizar la interacción de datos asincrónicos en páginas web y realizar una actualización parcial de la página.

¿Ventajas y desventajas de ajax?

ventaja:

1. Se puede realizar un efecto de comunicación asincrónica, actualización parcial de la página y una mejor experiencia de usuario
2. Equilibrio de carga de front-end y back-end (delegar parte del trabajo de back-end al front-end para reducir la carga en los servidores y la banda ancha)
3. La interfaz y la aplicación están separadas (ajax separa la interfaz y la aplicación, es decir, los datos y la presentación están separados)

Desventajas:

4. ajax no es compatible con el botón de retroceso del navegador
5. Problemas de seguridad ajax expuso los detalles de la interacción con el servidor
6. El soporte para motores de búsqueda es débil
7. Se rompió el comportamiento normal de los botones Atrás e Historial y otros mecanismos del navegador.

principio de ajax? ? (¿El proceso de representación de la página? ¿Creación del proceso ajax?)

Cree un objeto XHR, envíe una solicitud asincrónica, luego escuche el resultado de la respuesta del servidor y renderícelo en la página

¿La diferencia entre obtener y publicar?

Esta pregunta es relativamente simple, pero debe responderse de manera integral:
1. El método de parámetro get se pasa a través de la URL de la barra de direcciones, y puede ver directamente los parámetros pasados ​​por get. La URL del parámetro del método de parámetro de publicación no es visible. Get pone los datos solicitados en la URL. ¿Después de pasar? Conecte y divida parámetros a través de &. psot almacena los parámetros en el cuerpo del paquete HTTP

2. Obtener datos de transferencias a través de URL. La longitud de los datos transferidos está limitada por el tamaño de la URL. La longitud máxima de la URL es de 2048 caracteres. Sin límite de longitud para la publicación

3. La devolución no afectará, la devolución se volverá a enviar.

4. Obtener la solicitud se puede almacenar en caché, la publicación no se puede almacenar en caché

5. Obtenga solo la codificación de URL de solicitud, la publicación admite varios métodos de codificación

6. El registro de la solicitud de obtención permanecerá en el registro del historial y la solicitud de publicación no permanecerá en el registro del historial.

7.get solo admite caracteres ASCII, la publicación no tiene restricciones de tipo de carácter

¿Qué es el dominio cruzado?

El problema se debe a la política de origen de JavaScript entre dominios, que solo el protocolo + el nombre de host + el número de puerto (si está presente) son iguales , luego se permiten o no pueden acceder a los recursos de los demás.
Los problemas entre dominios son para JS y ajax.

¿Cómo resolver problemas entre dominios? (Tres soluciones)

1. Servidor proxy
Utilice un nuevo servidor para poner todos los códigos que necesita utilizar juntos y podrá acceder a él normalmente.

2. Configuración del encabezado de la solicitud en segundo plano
La base de seguridad de la solución de acceso entre dominios se basa en " JavaScript no puede controlar el encabezado HTTP ".
Debe autorizar si se permite el acceso entre dominios a través del encabezado HTTP devuelto por el destino. dominio.

response.addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问 
response.addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

3. Use JSONP (json + padding) para completar los datos

3.1 ¿Qué es jsonp?

jsonp es un método de transmisión de datos o protocolo no obligatorio

3.2 La esencia de jsonp y ajax:

El núcleo de ajax es obtener contenido que no sea de página a través de xmlHttpRequest

El núcleo de jsonp es agregar dinámicamente etiquetas de script para llamar al script js proporcionado por el servidor

3.3 Nota sobre el uso de jsonp:

Solo se pueden pasar los datos pasados ​​por GET (los parámetros se pasan por url, por lo que el tipo de jsonp solo se puede obtener)

3.4 código de uso de jsonp:
versión js:

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
    
    
        alert(JSON.stringify(res));
    }
 </script>

El servidor regresa de la siguiente manera (al regresar, se ejecuta la función global):

handleCallback({
    
    "success": true, "user": "admin"})

Versión de jQuery:

$.ajax({
    
    
			type : "GET",
			async : false,
			url : "http://a.a.com/a/FromServlet?userName=644064",
			dataType : "jsonp",//数据类型为jsonp  
			jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数
			success : function(data) {
    
    
				alert(data["userName"]);
			},
			error : function() {
    
    
				alert('fail');
			}
		});

Consulte: Resolver problemas de dominio cruzado de Ajax [5 soluciones]
9 soluciones de dominio cruzado de front-end comunes (detallado)

Explica el principio de jsonp

El principio de jsonp es usar <script>etiquetas sin restricciones entre dominios. Use atributos de <script>etiqueta srcpara enviar solicitudes GET con parámetros de devolución de llamada. El servidor reunirá los datos de retorno de la interfaz en la función de devolución de llamada y los devolverá al navegador. El navegador analiza y ejecuta Los datos devueltos por la función de devolución de llamada.

¿Cuáles son los métodos HTTP habituales?

1. GET: se utiliza para solicitar acceso a recursos identificados por URI (Identificador uniforme de recursos), que se puede pasar al servidor a través de URL
2. POST: Se utiliza para transmitir información al servidor. La función principal es similar al método GET, pero generalmente se recomienda POST.
3. PUT: Transferir archivos, el cuerpo del mensaje contiene el contenido del archivo y se guarda en la ubicación URI correspondiente.
4. HEAD: Obtiene el encabezado del mensaje, similar al método GET, excepto que el cuerpo del mensaje no se devuelve y generalmente se usa para verificar si el URI es válido.
5. DELETE: Elimina el archivo, contrario al método PUT, elimina el archivo correspondiente a la ubicación URI.
6. OPCIONES: consulta el método HTTP admitido por el URI correspondiente

La diferencia entre HTTP y HTTPS:

Déjame hablar sobre qué es HTTP. ? HTTP es un protocolo basado en TCP / IP sobre cómo se comunican los datos en la World Wide Web.

1. La URL HTTP comienza con http: // y la URL HTTPS comienza con https: //
2. HTTP no es seguro, pero HTTPS es seguro
3. El puerto estándar HTTP es 80 y el puerto estándar HTTPS es 443
4. En el modelo de red OSI, HTTP funciona en la capa de aplicación, mientras que el mecanismo de transmisión segura de HTTPS funciona en la capa de transporte.
5. HTTP no se puede cifrar y HTTPS cifra los datos transmitidos
6. HTTP no requiere un certificado, mientras que HTTPS requiere un certificado SSL emitido por la organización de CA wosign

El proceso completo de solicitud HTTP

1) Resolución de nombres de dominio

2) Iniciar el protocolo de enlace de 3 vías TCP

3) Una vez establecida la conexión TCP, el navegador inicia una solicitud http al servidor

4) El servidor responde a la solicitud http y el navegador obtiene el código html

5) El navegador analiza el código html y solicita recursos en el código html (como js, ​​css, imágenes, etc.)

6) Cierre la conexión TCP y el navegador muestra la página al usuario.

Protocolo de enlace de tres vías TCP

Para el primer apretón de manos, el cliente envía un mensaje de solicitud de conexión al servidor. Después de recibir la información, el servidor sabe que puede conectarse con el cliente correctamente, pero el cliente no sabe si el servidor la ha recibido. Solicitar, por lo que el el servidor responde después de recibir el mensaje y el cliente determina que puede conectarse con el servidor después de recibir los comentarios del servidor. Este es el segundo apretón de manos.

Si solo hay dos apretones de manos, entonces la conexión se establece aquí, pero en este momento el cliente no tiene ningún dato para enviar, y el servidor todavía está esperando una buena noticia estúpidamente, causando una gran pérdida de recursos. Por lo tanto, se requiere un tercer apretón de manos y esta situación solo se puede evitar si el cliente responde nuevamente.

El llamado Wavehand de cuatro vías termina la conexión TCP

Para obtener más información, consulte: Protocolo de enlace de tres vías TCP, esta es la mejor interpretación que he visto

El significado del código de retorno del protocolo http

2xx: exitoso
200 OK: indica que la solicitud enviada desde el cliente al servidor se procesó normalmente y se devolvió ;

3xx：页面重定向（需要进行附加操作以完成请求）
301 Moved Permanently：永久性重定向，表示请求的资源被分配了新的URL，之后应使用更改的URL；
302 Found：临时性重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL；

   301与302的区别：前者是永久移动，后者是临时移动（之后可能还会更改URL）

4xx：客户端错误；
400 Bad Request：表示请求报文中存在语法错误；
403 Forbidden：服务器拒绝该次访问（访问权限出现问题）
404 Not Found：表示服务器上无法找到请求的资源

5xx：服务端错了；
500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误时；

TCP和UDP的区别

TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来

UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去！ UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境

说说网络分层里七层模型是哪七层

应用层：允许访问OSI环境的手段

表示层：对数据进行翻译、加密和压缩

会话层：建立、管理和终止会话

传输层：提供端到端的可靠报文传递和错误恢复

网络层：负责数据包从源到宿的传递和网际互连

物理层：通过媒介传输比特,确定机械及电气规范

Para obtener más información, consulte: Preguntas de la entrevista de front-end-HTTP