Resumen de preguntas de la entrevista H5 + css3

1. La diferencia entre html5 y html:

1.html5 etiquetas semánticas agregadas: pie de página, navegación, sección ...

2.html5 es totalmente compatible con css3

3. Admite almacenamiento local sin conexión

4. Etiqueta de lienzo agregada

5. Se agregaron etiquetas de video y audio

Almacenamiento sin conexión HTML5

LocalStorage almacena datos durante mucho tiempo y los datos no se pierden después de cerrar el navegador; los
datos de sessionStorage se eliminan automáticamente después de cerrar el navegador.

¿Cómo distinguir entre HTML y HTML5?

DOCTYPE声明
新增的结构元素
功能元素
123

2. Comprensión de las etiquetas semánticas (ventajas):

a. La página puede mostrar una estructura clara cuando el estilo se elimina o se pierde

b) Propicia para el SEO: Establecer una buena comunicación con los motores de búsqueda ayuda a los rastreadores a capturar información más eficaz: los rastreadores se basan en etiquetas para determinar el contexto y el peso de cada palabra clave;

c. Es conveniente que otros dispositivos analicen (como lectores de pantalla, lectores ciegos, dispositivos móviles) para representar páginas web de manera significativa;

d. Es conveniente para el desarrollo y mantenimiento del equipo, y la semántica es más legible. Los equipos que siguen los estándares del W3C siguen este estándar, lo que puede reducir la diferenciación.

3. El núcleo del navegador:

El núcleo del navegador IE Trident, el Gecko de Mozilla, el Blink de Chrome (una rama de WebKit) y el núcleo de Opera eran originalmente Presto, ahora Blink;

¿Presenta su comprensión del kernel del navegador?

Se divide principalmente en dos partes: motor de renderizado (ingeniero de diseño o motor de renderizado) y motor JS.

Motor de renderizado: responsable de obtener el contenido de la página web (HTML, XML, imágenes, etc.), organizar la información (como agregar CSS, etc.) y calcular el modo de visualización de la página web, y luego enviarla al monitor o impresora. Los diferentes núcleos de navegador tendrán diferentes interpretaciones de la sintaxis de las páginas web, por lo que los efectos de representación también son diferentes. Todos los navegadores web, clientes de correo electrónico y otras aplicaciones que necesitan editar y mostrar contenido de red necesitan un kernel.

Motor JS: analiza y ejecuta javascript para lograr efectos dinámicos de páginas web.

4. ¿Cuáles son las tres capas de las páginas frontales y qué son? ¿Cual es el rol?

Capa estructural: Es creada por lenguajes de marcado como HTML o XHTML, y solo es responsable de la expresión semántica. Resolvió el problema de "cuál es el contenido" en la página.

b. Capa de presentación: creada por CSS, que resuelve el problema de "cómo mostrar el contenido" en la página.

c. Capa de comportamiento: El guión es responsable. Resolvió el problema de "cómo debería responder el contenido a los eventos" en la página.

5. ¿El papel de Doctype? ¿Cómo distinguir entre el modo estricto y el modo híbrido? ¿Qué quieren decir?

La declaración está en la parte superior del documento, antes de la etiqueta. Dígale al navegador en qué modo renderizar el documento.

El modo estricto de composición tipográfica y el modo de operación JS se ejecuta con el estándar más alto admitido por el navegador.

En el modo promiscuo, la página se muestra de una manera poco compatible con versiones anteriores. Simule el comportamiento de navegadores más antiguos para evitar que el sitio no funcione.

La ausencia de DOCTYPE o un formato incorrecto hará que el documento se renderice en modo promiscuo.

6. ¿Cuántos tipos de documentos Doctype conoce?

Las etiquetas pueden declarar tres tipos de DTD, que representan la versión estricta, la versión de transición y los documentos HTML basados en marcos.

Siete, HTML y XHTML: ¿cuál es la diferencia entre los dos?

a. Los elementos XHTML deben estar anidados correctamente.

b. Los elementos XHTML deben estar cerrados.

c. El nombre de la etiqueta debe usar letras minúsculas.

d. El documento XHTML debe tener un elemento raíz.

8. Dime qué sucedió en el proceso de ingresar la URL y presionar Enter para ver la página web.

a. Resolución de nombres de dominio

b. Iniciar el protocolo de enlace de 3 vías de TCP

c. Inicie una solicitud http después de establecer una conexión TCP

d. El servidor responde a la solicitud http y el navegador obtiene el código html

e. El navegador analiza el código html y solicita los recursos en el código html

f. El navegador muestra la página al usuario

Nueve, la comprensión de la reconstrucción de sitios web

Refactorización: sin cambiar el comportamiento externo, simplifique la estructura y agregue legibilidad, mientras mantiene un comportamiento consistente en la parte frontal del sitio web.

a. Hacer que la interfaz del sitio web sea compatible con los navegadores modernos (para CSS de calidad inferior, como válido para IE6)

b. Para la optimización de la plataforma móvil, optimización para SEO

c. Reducir el acoplamiento entre códigos y mantener el código flexible

d. Comprimir o fusionar recursos de front-end como JS, CSS e imagen

10. Hay muchas imágenes en una página (gran sitio web de comercio electrónico) y la carga es muy lenta ¿Qué métodos tienes para optimizar la carga de estas imágenes para brindar a los usuarios una mejor experiencia?

Las imágenes se cargan de forma perezosa, desplácese hasta la posición correspondiente antes de cargar la imagen.

b. Precarga de imágenes, si se trata de una presentación de diapositivas, álbum, etc., las imágenes anterior y siguiente de la imagen que se muestra actualmente se descargarán primero.

c. Utilice CSSsprite, SVGsprite, Iconfont, Base64 y otras tecnologías, si la imagen es una imagen css.

d. Si la imagen es demasiado grande, puede utilizar una imagen codificada especialmente. Al cargar, se cargará primero una miniatura muy comprimida para mejorar la experiencia del usuario.

¿Cuál es la diferencia entre title y h1, by strong, i y em?

Definición de la diferencia entre título y h1 : título es el título del sitio web y h1 es el tema del artículo.
Función: título resume la información del sitio web y puede indicar directamente a los motores de búsqueda y a los usuarios de qué tema y contenido trata el sitio web. Se muestra en la barra de pestañas de la página web; h1 Resalta el tema del artículo, mira al usuario y resalta su efecto visual, apuntando a la información principal de la página, que se muestra en la página web.

Definición de la diferencia entre b y fuerte : b (negrita) es una etiqueta de entidad, que se usa para poner en negrita el texto, y fuerte es una etiqueta lógica, que se usa para fortalecer el tono del carácter.
Diferencia: la etiqueta b es solo un estilo en negrita y no tiene un significado real. A menudo se usa para expresar texto en negrita sin énfasis o énfasis, como palabras clave en resúmenes de artículos, nombres de productos en artículos de revisión e introducciones de artículos; mientras que fuertes significa etiquetas Los caracteres internos son importantes para enfatizar. El formato predeterminado es negrita, pero puede agregar estilos a través de CSS y usar otros estilos para enfatizar.
Recomendación : para cumplir con la especificación CSS3, b debe usarse lo menos posible en lugar de fuerte

Definición de la diferencia entre i y em : i (cursiva) es una etiqueta de entidad, que se usa para hacer que los caracteres sean oblicuos, y em (énfasis) es una etiqueta lógica, que se usa para enfatizar la
diferencia entre el contenido del texto : la etiqueta i es solo en cursiva y no tiene un significado real. Se usa comúnmente Expresa cursiva sin enfatizar o enfatizada, como nombres biológicos, terminología y palabras extranjeras; y em indica que los caracteres en la etiqueta son importantes para enfatizar. El formato predeterminado es cursiva, pero puede agregar estilos a través de CSS. Recomendación : para cumplir con la especificación CSS3, debería usarse lo menos posible y em en su lugar

11. ¿Las ventajas y desventajas del iframe?

ventaja:

a. Resuelve el problema de cargar contenido de terceros lento, como iconos y anuncios.

b. Carga de archivos sin actualizar en iframe

c. comunicación entre dominios iframe

Desventajas:

a. iframe bloqueará el evento Onload de la página principal

b. Algunos motores de búsqueda no pueden indexar

c. La página aumentará la solicitud http del servidor

d) Se generarán muchas páginas, lo que no es fácil de administrar.

12. Sírvanse detallar las deficiencias del cuadro.

Un anidamiento demasiado profundo, como table> tr> td> h3, dificultará la lectura de los motores de búsqueda, y la pérdida más directa es aumentar en gran medida la cantidad de código redundante.

b. Poca flexibilidad. Por ejemplo, si desea establecer el borde y otros atributos de tr, no funcionará, debe pasar td

c. El código está inflado, cuando la tabla se aplica a la tabla, el código de lectura será muy confuso

d. Colspan y Rowpan confusos. Cuando se utilizan para el diseño, el uso frecuente de ellos causará confusión en el orden de todo el documento.

e) La tabla necesita múltiples cálculos para determinar los atributos de sus nodos en el árbol de renderizado, y usualmente toma 3 veces el tiempo del mismo elemento.

f. No hay suficiente semántica

13. ¿Cuáles son los elementos en línea y los elementos a nivel de bloque?

Elementos en línea: ab br i span input select strong

Elementos a nivel de bloque: div p h1 — h6 de ul ol li

14. La diferencia entre elementos en línea y elementos a nivel de bloque:

Elementos en línea: se organizarán en dirección horizontal y no pueden contener elementos a nivel de bloque. La configuración del ancho no es válida, la altura no es válida (se puede establecer la altura de la línea), el margen no es válido hacia arriba y hacia abajo y el relleno no es válido hacia arriba y hacia abajo.

Elementos a nivel de bloque: cada uno ocupa una fila, dispuestos verticalmente. Empiece con una nueva línea y termine con un salto de línea.

15. Formas de limpiar los flotadores:

(1) El div padre define la altura.

(2) Agregue una etiqueta div vacía clear: both al final.

(3) El div padre define pseudoclases: after y zoom.

(4) El div padre define overflow: hidden.

(5) El div padre define overflow: auto.

(6) El div padre también es flotante y es necesario definir el ancho.

(7) El div padre define display: table.

(8) Agregue la etiqueta br clear: both al final.

16. ¿Cuál es el papel de Doctype? ¿Cuál es la diferencia entre el modo estándar y el modo de compatibilidad?

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.

2. El modo de operación de composición tipográfica y JS del modo estándar se ejecutan de acuerdo con el estándar más alto admitido por el navegador. En el modo de compatibilidad, la página se muestra de manera flexible con versiones anteriores, simulando el comportamiento de los navegadores antiguos para evitar que el sitio no funcione.

17. Formas de introducir estilos CSS:

1. Estilo en línea: establezca directamente el estilo CSS en el atributo de estilo.

2. Incrustado: escriba en la etiqueta

3. Importado:

4. Vinculado:

Al importar estilos en la página 18, ¿cuál es la diferencia entre usar un enlace y @import?

(1) El enlace es una etiqueta XHTML. Además de cargar CSS, también se puede usar para definir RSS y definir atributos de conexión rel. @Import es proporcionado por CSS y solo se puede usar para cargar CSS;

(2) Cuando se carga la página, el enlace se cargará al mismo tiempo, y el CSS al que hace referencia @import esperará hasta que se cargue la página antes de cargarla;

(3) La importación está propuesta por CSS2.1 y solo se puede reconocer por encima de IE5, mientras que el enlace es una etiqueta XHTML, que no tiene problemas de compatibilidad.

Diecinueve, las tres características de CSS:

1. Herencia

2. Apilabilidad

3. Prioridad

Veinte, selector de CSS:

1. Selector de etiquetas

2. Selector de ID

3. Selector de clases

4. Selector adyacente

5. Subselector

6. Selector de descendientes

7. Selector de comodines

8. Selector de atributos

9. Selector de pseudo clases

21. Estilos heredables en CSS:

Sangría de texto de color de familia de fuentes de tamaño de fuente

Estilos no heredables:

borde relleno margen ancho alto;

¿Cómo se calcula el algoritmo de prioridad CSS?

  *   优先级就近原则，同权重情况下样式定义最近者为准;
  *   载入样式以最后载入的定位为准;

  优先级为:
    同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
    !important >  id > class > tag
    important 比 内联优先级高
1234567

23. La diferencia entre los atributos title y alt en la etiqueta:

title: proporcione información para este atributo

alt: cuando la imagen no se muestra, reemplácela con texto

24. Describa brevemente la diferencia entre src y href.

src se usa para reemplazar el elemento actual y href se usa para establecer una conexión entre el documento actual y el recurso referenciado.

src es la abreviatura de fuente, que apunta a la ubicación de recursos externos. El contenido señalado se incrustará en la ubicación de la etiqueta actual en el documento; cuando se soliciten recursos src, los recursos señalados se descargarán y aplicarán al documento, como scripts js, imágenes img Y marco y otros elementos.

25. ¿Cuáles son los dos atributos en CSS que pueden hacer que el texto se superponga en las direcciones vertical y horizontal?

Dirección vertical: altura de línea

Dirección horizontal: espaciado entre letras

Entonces la pregunta es, ¿sabes cuál es el efecto mágico del espaciado entre letras?

Respuesta: Puede usarse para eliminar el espacio entre los elementos de bloques en línea.

26. ¿Cuál es la diferencia entre pantalla: ninguna y visibilidad: oculta?

display: oculta el elemento correspondiente pero no ocupa el espacio original del elemento.

visibilidad: oculta el elemento correspondiente y exprime el espacio original del elemento.

¿Cuéntame sobre el modelo de caja CSS estándar? ¿Cuál es la diferencia entre el modelo de caja de la versión inferior de IE?

  （1）有两种， IE 盒子模型、W3C 盒子模型；
  （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
  （3）区  别： IE的content部分把 border 和 padding计算了进去;
123

27. ¿Qué es BFC? (Contexto de formato de bloque)

BFC (Contexto de formato de nivel de bloque), un cuadro que crea un nuevo BFC se presenta de forma independiente, y el diseño de los elementos en el cuadro no afectará a los elementos fuera del cuadro.

Dos cajas adyacentes en el mismo BFC tienen márgenes superpuestos en la dirección vertical.

BFC se refiere a la creación de un área de renderizado independiente en el navegador. El diseño de todos los elementos en esta área no afectará el diseño de los elementos fuera del área. Esta área de renderizado solo afecta a los elementos a nivel de bloque.

Veintiocho, nuevas funciones de CSS3

CSS3 implementa border-radius, box-shadow,
Agregue efectos especiales al texto (texto-sombra), degradado lineal (degradado), rotación (transformación)
transformar: rotar (9deg) escala (0.85,0.90) traducir (0px, -30px) sesgar (-9deg, 0deg); // rotar, acercar, posicionar, inclinar
Se agregaron más selectores CSS multi-background rgba
El único pseudoelemento introducido en CSS3 es :: selección.
Consulta de medios, diseño de varias columnas
imagen de borde

Veintinueve.Enumere los valores de display y explique sus funciones. ¿Cuál es el valor de posición, origen de posicionamiento relativo y absoluto?

1. El valor de la pantalla

bloque Tipo de bloque. El ancho predeterminado es el ancho del elemento principal, puede establecer el ancho y la altura, y mostrar en una nueva línea.

El valor predeterminado de ninguno. Se muestra como el tipo de elemento en línea.

en línea Tipo de elemento en línea. El ancho predeterminado es el ancho del contenido, y el ancho y el alto no se pueden establecer, y se muestra lo mismo.

El ancho predeterminado del bloque en línea es el ancho del contenido, y el ancho y el alto se pueden configurar para que se muestren en la misma línea.

El elemento de lista se muestra como un elemento de tipo de bloque y se agregan etiquetas de lista de estilo.

tabla Este elemento se mostrará como una tabla a nivel de bloque.

heredar especifica que el valor del atributo de visualización debe heredarse del elemento principal.

2. El valor de la posición

absoluto: Genera elementos absolutamente posicionados, que se posicionan en relación con el primer elemento padre que no sea el posicionamiento estático.

fijo: (el antiguo IE no es compatible) Genera elementos absolutamente posicionados, posicionados en relación con la ventana del navegador.

relativo: Genere elementos relativamente posicionados y colóquelos en relación con sus posiciones normales.

estático: el valor predeterminado. Sin posicionamiento, el elemento aparece en el flujo normal

* (Ignore las declaraciones de índice z superior, inferior, izquierda, derecha).

* heredar estipula que el valor del atributo de posición se hereda del elemento padre.

30. ¿Cuál es la diferencia entre el modo estándar del navegador y el modo extraño?

1) En modo estricto: ancho es el ancho del contenido, el ancho real del elemento = margen-izquierdo + borde-izquierdo-ancho + relleno-izquierdo + ancho + relleno-derecho + borde-derecho-ancho + margen-derecho;

En modo peculiar: ancho es el ancho real del elemento, ancho del contenido = ancho- (padding-left + padding-right + border-left-width + border-right-width)

2) Puede establecer la altura y el ancho de los elementos en la fila

En el modo Estándares, la configuración de ancho y alto para el tramo y otros elementos en línea no tendrá efecto, pero en el modo peculiaridades, sí.

3) La altura se puede establecer como porcentaje.

En el modo estándar, la altura de un elemento está determinada por el contenido que contiene. Si el elemento principal no establece la altura, establecer un porcentaje de la altura del elemento secundario no es válido.

4) Use margin: 0 auto para establecer el centrado horizontal no será válido en IE

Use margin: 0 auto para centrar el elemento horizontalmente en modo estándar, pero fallará en modo peculiar. La solución en modo peculiar es usar el atributo text-align:

body {text-align: center}; # content {text-align: left}

5) Configurar el relleno de la imagen en modo peculiar no será válido

6) Los atributos de fuente en la tabla en modo peculiar no pueden heredar la configuración de la capa superior

7) Espacio en blanco: pre fallará en modo peculiar

8) Diferentes interpretaciones del modelo de caja

31. Los desarrolladores a menudo optimizan el rendimiento después de que el código css / js se pone en línea. A partir de la actualización de la página web por parte del usuario, ¿cuáles son las áreas donde generalmente se almacena en caché una solicitud js?

caché dns, caché cdn, caché del navegador, caché del servidor.

32. ¿Por qué es más eficaz utilizar varios nombres de dominio para almacenar recursos del sitio web?

El almacenamiento en caché de CDN facilita superar los límites de simultaneidad del navegador

Ahorre ancho de banda de cookies

Guarde el número de conexiones al nombre de dominio principal y optimice la velocidad de respuesta de la página

Evite problemas de seguridad innecesarios

Treinta y tres, pseudo-clases y pseudo-elementos:

Pseudoclases CSS: se utilizan para agregar efectos especiales a ciertos selectores.

Pseudoelementos CSS: se utilizan para agregar efectos especiales a ciertos selectores.

34: Nuevas pseudoclases y pseudoelementos en css3

Pseudo-elemento:

p: primero de tipo	Seleccione cada elemento que pertenezca al primer elemento de su elemento padre.
p: último de tipo	Seleccione cada elemento que pertenezca al último elemento de su elemento padre.
p: único de tipo	Seleccione cada elemento que pertenezca al único elemento de su elemento padre.
p: hijo único	Seleccione cada elemento que pertenezca al único elemento secundario de su elemento principal.

Pseudo clase:

:flotar	Agregar estilos al elemento flotante
:activo	Agregar estilo al elemento activado
:atención	Agregar estilos al elemento enfocado
:enlace	Agregar estilos a enlaces no visitados

Treinta y cinco, método de diseño html5:

1. Flotante

2. Colocación

3. Diseño de columnas

4. Diseño flexible

5. Diseño receptivo

36. Ventajas del diseño flexible:

1 Fuerte adaptabilidad, muy práctica al realizar interfaces con diferentes resoluciones de pantalla

2 Puede dividir libremente el ancho y el alto de los elementos según el ancho y la proporción

3 Puede cambiar fácilmente el orden de visualización de los elementos

4 El diseño flexible es rápido y fácil de mantener

37. Content-box y border-box ¿Por qué el content-box parece más razonable, pero el border-box todavía se usa con frecuencia?

content-box es el modelo de caja estándar del W3C: ancho + relleno + borde
border-box es el modelo de caja extraño de IE. El ancho del elemento es igual al ancho del contenido. El ancho del contenido incluye relleno y borde
Por ejemplo, a veces agregar relleno o borde sobre la base de elementos romperá el diseño, pero se puede hacer fácilmente usando border-box.

38. Realice tres DIV divididos por igual y dispuestos en una fila (inspeccione el cuadro de borde)

1. Establezca el ancho del cuadro del borde en 33,33%

2.flexbox flex: 1

39. ¿Cómo pasar de la esquina superior izquierda a la esquina inferior derecha de un DIV y cuáles son los métodos? ¿Cómo lograrlo?

Cambie el valor de la izquierda a ventana ancho-div ancho valor superior a la altura de la ventana = altura div
método animado de jquery
transición css3

Cuarenta, ¿la diferencia entre rem y em?

em es relativo al elemento padre, rem es relativo al elemento raíz

Cuarenta y uno, mejora progresiva y elegante degradación

Mejora progresiva: cree páginas para navegadores de versiones bajas para garantizar las funciones más básicas y luego mejore los efectos, las interacciones y las funciones adicionales para los navegadores avanzados para lograr una mejor experiencia de usuario.

Degradación elegante: cree una función completa al principio y luego sea compatible con los navegadores de versiones inferiores.

42. HTTP y HTTPS

El protocolo HTTP generalmente se lleva encima del protocolo TCP. Se agrega una capa de protocolo de seguridad (SSL o TSL) entre HTTP y TCP. En este momento, se ha convertido en lo que a menudo llamamos HTTPS.

El número de puerto HTTP predeterminado es 80 y el número de puerto HTTPS es 443.

Cuarenta y tres, problemas de optimización del rendimiento

Nivel de código: evite el uso de expresiones CSS, evite el uso de selectores avanzados y selectores comodín.

Utilización de caché: caché Ajax, use CDN, use archivos js y css externos para el almacenamiento en caché, agregue el encabezado Expires, configure Etag en el lado del servidor, reduzca las búsquedas de DNS, etc.

Número de solicitudes: combine estilos y scripts, use sprites de imágenes CSS, cargue recursos de imágenes fuera de la primera pantalla inicial a pedido y retrase la carga de recursos estáticos.

Solicitar ancho de banda: comprimir archivos, abrir GZIP,

Optimización a nivel de código

Utilice la tabla hash para optimizar la búsqueda

Utilice menos variables globales

Utilice innerHTML en lugar de operaciones DOM para reducir la cantidad de operaciones DOM y optimizar el rendimiento de JavaScript

Utilice setTimeout para evitar que la página deje de responder

Caché de resultados de búsqueda del nodo DOM

Evite el uso de expresiones CSS

Evite las consultas globales

Evite usar con (con creará su propio alcance y aumentará la longitud de la cadena de alcance)

Combinando múltiples declaraciones de variables

Evite Src vacío para imágenes e iFrames. Empty Src recargará la página actual, afectando la velocidad y la eficiencia

Intente evitar escribir atributos de estilo en etiquetas HTML

Optimización del rendimiento móvil

Intente usar la animación css3 y active la aceleración de hardware.

Utilice el evento táctil en lugar del evento de clic de forma adecuada.

Evite el uso del efecto de sombra de degradado css3.

Puede usar transform: translateZ (0) para activar la aceleración de hardware.

No abuse de Float. Float tiene una cantidad relativamente grande de cálculo durante el renderizado, así que minimice el uso

No abuse de las fuentes web. Las fuentes web deben descargarse, analizarse y volverse a dibujar en la página actual para minimizar su uso.

Razonablemente use la animación requestAnimationFrame en lugar de setTimeout

Las propiedades en CSS (transiciones CSS3, transformaciones CSS3 3D, Opacidad, Canvas, WebGL, Video) activarán el renderizado de GPU; utilícelas de manera razonable. El uso excesivo hará que el teléfono consuma más energía

El terminal de PC también es aplicable al terminal móvil

Cuarenta y cuatro, comprensión ES6:

Azúcar sintáctico (funciones de flecha, definición de clase, herencia) y algunas extensiones nuevas (matrices, cadenas, objetos, métodos, etc.), redefinición del alcance y soluciones para la programación asincrónica (promesa, asincrónica, espera) , El surgimiento de la asignación de deconstrucción

Características comunes de ES6

Definiciones de variables (let y const, mutable e inmutable, casos especiales de objetos definidos const) nueva API para
deconstruir y asignar matrices de
cadenas de plantillas
(ejemplo: Array.from (), entradas (), valores (), claves ())
flecha Función (parámetro de descanso, operador de expansión, :: vincular esto)
Establecer y mapear la estructura de datos (establecer el valor del miembro de la instancia almacena de forma única el valor de la clave, la instancia del mapa almacena los pares clave-valor)
Objeto de promesa (evolución de la solución asincrónica de front-end Historia, función generadora, función asíncrona)
Sintaxis de clase azúcar (super palabra clave)

¿Cómo convertir es6 a es5?

Usando el transcodificador de Babel, el archivo de configuración de Babel es .babelrc, que se almacena en el directorio raíz del proyecto. El primer paso para usar Babel es configurar este archivo.

Cuarenta y cinco, comprensión de MVC y MVVM

MVC

Ver envía comandos al controlador

Una vez que el controlador completa la lógica empresarial, requiere que el modelo cambie de estado

El modelo envía nuevos datos a la vista y los usuarios reciben comentarios

Toda la comunicación es unidireccional.

Angular usa enlace bidireccional (enlace de datos): los cambios de vista se reflejan automáticamente en ViewModel y viceversa.

Modelo de componentes, vista, modelo de vista

Ver: interfaz de usuario

ViewModel: Es una abstracción de Vista, responsable de la conversión de información entre Vista y Modelo, y transmite el Comando de Vista a Modelo;

Modelo: capa de acceso a datos

Cuarenta y seis, la cookie y la sesión de las diferencias:

1. Los datos de las cookies se almacenan en el navegador del cliente y los datos de la sesión se almacenan en el servidor.

2. La cookie no es muy segura, otros pueden analizar las cookies almacenadas localmente y engañar a las cookies

La sesión debe usarse por seguridad.

3. La sesión se guardará en el servidor durante un período de tiempo determinado. Cuando el acceso aumenta, aumentará el rendimiento de su servidor.

Teniendo en cuenta la reducción del rendimiento del servidor, se deben utilizar cookies.

4. Los datos guardados por una sola cookie no pueden exceder los 4K. Muchos navegadores limitan un sitio para guardar un máximo de 20 cookies.

47. Por qué HTTPS es seguro

Porque las solicitudes de red deben ser reenviadas por muchos enrutadores de servidor. Los nodos intermedios pueden alterar la información y, si se usa HTTPS, la clave solo está disponible entre usted y la estación final. La razón por la que https es más seguro que http es porque utiliza el protocolo ssl / tls para la transmisión. Incluye certificados, desinstalación, reenvío de tráfico, equilibrio de carga, adaptación de página, adaptación del navegador, entrega de referencias, etc. Garantizar la seguridad del proceso de transmisión.

48. Nombre tres formas de reducir el tiempo de carga de la página.

1. Optimizar imágenes
2. Selección de formato de imagen
3. Optimizar CSS
4. Agrega una barra después de la URL.
5. Marque la altura y el ancho
6. Reducir las solicitudes http (fusionar archivos, fusionar imágenes).

Cuarenta y nueve, ¿qué es FOUC? ¿Cómo se evita el FOUC?

Debido a que css se introduce mediante @import o hay varias etiquetas de estilo y los archivos css se introducen en la parte inferior de la página, el archivo css se carga después del html, lo que hace que la página parpadee y la pantalla parpadee.
Utilice el enlace para cargar el archivo css y colóquelo en la etiqueta principal.

Mi tercer día de aprendizaje de front-end en LeByte: notas de estudio: resumen de preguntas de la entrevista H5 + CSS3