657 páginas de preguntas + respuestas de entrevistas de front-end, aprendizaje y clasificación clasificados, producción concienzuda, actualización continua ~

Nota: Me tomó más de un mes volver a aprender lo básico, terminar de estudiar, terminar, resumir y resumir, doloroso y feliz.

(Las preguntas y sugerencias son bienvenidas, y se adjuntará un enlace al nombre del proponente después de la adopción)

Versión HTML

1. ¿Cuál es la diferencia entre título y alt en la imagen?

• Por lo general, se muestra cuando el mouse está sobre el elemento.
• altEs la descripción equivalente del contenido de la imagen, que se utiliza para mostrar cuando la imagen no se puede cargar y para leer la imagen con un lector de pantalla. Puede mejorar la alta accesibilidad de las imágenes. Además de las imágenes puramente decorativas, se deben establecer valores significativos y los motores de búsqueda se centrarán en el análisis.

2. ¿Cuáles son las nuevas funciones de HTML5 y qué elementos se han eliminado?

• Nuevos elementos:
  • cuadrocanvas
  • video 和 audioElementos para la reproducción multimedia
  • Almacenamiento local fuera de línea localStoragedespués del almacenamiento a largo plazo de datos, el navegador cierra los datos no se pierden
  • sessionStorage Los datos se eliminan automáticamente después de cerrar el navegador.
  • Elementos de contenido con mejor semántica, como article 、footer、header、nav、section
  • Controles de formulario,calendar 、 date 、 time 、 email 、 url 、 search
  • Nueva tecnología webworker 、 websocket 、 Geolocation
• Elementos eliminados:
  • Elementos de rendimiento puro: basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
  • Elementos que tienen un impacto negativo en la usabilidad: frame 、 frameset 、 noframes
• Admite nuevas etiquetas HTML5:
  • IE8/IE7/IE6Apoyado por el document.createElementmétodo de etiquetado producido
  • Podemos usar esta función para que esos navegadores admitan HTML5nuevas etiquetas
  • Una vez que el navegador admita la nueva etiqueta, también debe agregar el estilo predeterminado de la etiqueta

3. ¿Cómo administra y carga el navegador los recursos de almacenamiento fuera de línea de Html5?

cómo utilizar:

• El encabezado de la página como el siguiente se agrega como una manifestpropiedad;
• En los cache.manifestrecursos para preparar archivos de almacenamiento fuera de línea
• En el estado fuera de línea, la operación window.applicationCachepara la realización de la demanda

En el caso de en línea, el navegador encontró que htmlla cabecera tiene manifestpropiedad, solicita manifestel archivo, si es la primera visita app, el navegador se basará en manifestel contenido del archivo para descargar los recursos adecuados y el almacenamiento fuera de línea. Si ya ha visitado appy se han almacenado recursos sin conexión, el navegador utilizará las páginas de carga de recursos sin conexión, luego el navegador comparará el manifestarchivo nuevo con el manifestarchivo anterior, si el archivo no ha cambiado, no haga nada, si el archivo Si se cambia, los recursos del archivo se descargarán nuevamente y se almacenarán fuera de línea.

4. ¿Cuáles son los elementos de la línea? ¿Cuáles son los elementos a nivel de bloque? ¿Cuáles son los elementos vacíos?

En primer lugar: la especificación CSS estipula que cada elemento tiene un atributo de visualización para determinar el tipo de elemento, y cada elemento tiene un valor de visualización predeterminado. Por ejemplo, si el valor de visualización predeterminado de un div es "bloque", es un elemento de "nivel de bloque"; span El valor del atributo de visualización predeterminado es "en línea", que es un elemento "en línea".
Los elementos de bloque más utilizados son:

、

、

...

、

1. 、
   • 、

     、、

     、

     ,
     Elementos en línea comúnmente utilizados
     son: ,,, , , , , , ,,
常用的内联块状元素有： 、
知名的空元素：


5. ¿Cuál es la diferencia entre establecer el ancho y alto del lienzo en la etiqueta y establecer el ancho y alto en el estilo?

El ancho y el alto de la etiqueta del lienzo son el ancho y el alto reales del lienzo, y los gráficos dibujados están en este. El ancho y el alto del estilo son el alto y el ancho del lienzo que se representa en el navegador. Si no se especifican el ancho y el alto del lienzo o los valores son incorrectos, se establecen en los valores predeterminados.

6. ¿Cómo gestiona y carga el navegador los recursos de almacenamiento sin conexión de HTML5?

Cuando está en línea, el navegador encuentra que el encabezado HTML tiene un atributo de manifiesto y solicitará el archivo de manifiesto. Si es la primera vez que accede a la aplicación, el navegador descargará los recursos correspondientes de acuerdo con el contenido del archivo de manifiesto y guárdelos fuera de línea. Si ya visitaste la aplicación y los recursos se almacenaron sin conexión, el navegador usará los recursos sin conexión para cargar la página y luego comparará el nuevo archivo de manifiesto con el archivo de manifiesto anterior. Si el archivo no ha cambiado, no se hará nada. Si se cambia el archivo, los recursos del archivo se descargarán nuevamente y se almacenarán sin conexión.
En el caso de estar fuera de línea, el navegador utiliza directamente los recursos almacenados fuera de línea.

7. ¿Qué hace Doctype? ¿Cómo distinguir entre el modo estricto y el modo promiscuo? ¿Qué quieren decir?

• La declaración está en la parte superior del documento, antes de la etiqueta html. Dígale al analizador del navegador qué tipo de documento y especificación debe usar para analizar este documento
• La composición tipográfica estricta y el modo de operación JS se ejecutan con el estándar más alto admitido por el navegador
• En modo promiscuo, la página se muestra de una manera poco compatible con versiones anteriores. Simular el comportamiento de navegadores 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

8. ¿Cuáles son los atributos globales de HTML?

class: Establecer el identificador de clase
data-*para el elemento: Agregar atributos personalizados para el elemento
draggable: Establecer si el elemento se puede arrastrar
id: ID de elemento, único en el documento
lang: Idioma del contenido del elemento
style: Estilo css en línea
title: Información sugerida relacionada con el elemento

9. ¿Cuáles son las ventajas del diseño div + css sobre el diseño de tabla?

Es más conveniente cambiar la versión, siempre que cambie el archivo css.
La página se carga más rápido, la estructura es clara y la visualización de la página es concisa.
El rendimiento está separado de la estructura.
Fácil de optimizar (seo) El motor de búsqueda es más amigable y la clasificación es más fácil de subir.

Debido al gran contenido, para evitar la experiencia de lectura, solo se muestra una parte de las preguntas de la entrevista. La versión completa de las preguntas de la entrevista + análisis, [haga clic en mí] es gratuita.

Artículos CSS

1. La diferencia entre enlace e @import en CSS:

@import son las reglas gramaticales proporcionadas por CSS, que solo tiene el efecto de importar hojas de estilo; el enlace es una etiqueta proporcionada por HTML, que no solo puede cargar archivos CSS, sino también definir atributos de conexión RSS y rel.
Cuando se carga la página, el CSS importado por enlace se carga al mismo tiempo, y el CSS importado por @import se cargará después de que se cargue la página.
Como elemento HTML, la etiqueta de enlace no tiene problemas de compatibilidad, y @import es una sintaxis solo disponible en CSS2.1, por lo que los navegadores más antiguos (antes de IE5) no pueden reconocerla.
Puede manipular el DOM a través de JS para insertar etiquetas de enlace para cambiar el estilo; debido a que el método DOM se basa en documentos, no puede usar el método @import para insertar estilos.

2. Los puntos comunes y diferentes de posición absoluta y fija:

Puntos comunes:
1. Cambiar el método de presentación de los elementos en la fila y configurar la pantalla en bloque;
2. Dejar que los elementos se separen del flujo normal y no ocupen espacio;
3. Por defecto, cubrirá los no -Elementos posicionados Diferentes puntos:
"elemento raíz" absoluto se puede configurar, y el "elemento raíz" fijo es fijo como la ventana del navegador. Cuando se desplaza por la página web, la distancia entre el elemento fijo y la ventana del navegador es constante.

3. ¿Cuál es el uso de BFC?

• Regla de creación:
  elemento raíz, elemento
  flotante (float no toma el valor de ninguno),
  elemento absolutamente posicionado (la posición toma el valor de absoluto o fijo) el
  valor de visualización es uno de inline-block, table-cell, table-caption, flex , el
  desbordamiento del elemento inline-flex no es un elemento cuyo valor es visible
• Función:
  puede contener elementos flotantes,
  no cubiertos por elementos flotantes,
  evitar que los márgenes de los elementos principales y secundarios se colapsen

4. Varias formas de limpiar los flotadores

El div padre define la altura
con una etiqueta div vacía al final clear: ambos
div padre definen pseudoclases: después y zoom
div padre define desbordamiento:
div padre oculto también flota, necesita definir el ancho
y agregar una etiqueta br en el final claro: ambos

5. Css3 nuevo pseudo-clase-pseudo-elemento

p: first-of-type selecciona el primero que pertenece a su elemento padre

Cada uno de los elementos

elemento.
p: last-of-type selecciona el último de su elemento padre

Cada uno de los elementos

elemento.
p: only-of-type selecciona el único que pertenece a su elemento padre

Cada uno de los elementos

elemento.
p: only-child selecciona cada uno de los únicos elementos secundarios que pertenecen a su elemento principal

elemento.
p: nth-child (2) selecciona cada uno de los segundos elementos secundarios que pertenecen a su elemento principal

elemento.
: habilitado El elemento de formulario que está habilitado.
: deshabilitado Elemento de formulario deshabilitado.
: marcado El botón de opción o la casilla de verificación está marcado.
:: before agrega contenido antes del elemento.
:: after agrega contenido después del elemento y también se puede usar para borrar el flotante.
:: first-line agrega un estilo especial a la primera letra del texto.
:: first-letter agrega una línea de estilo especial a la primera línea.

Creo que todos pueden ver sus diferencias

Una sintaxis de pseudo-clase: es para compensar las deficiencias del selector de clases regular CSS.
Sintaxis de dos pseudo-elementos: es un elemento generado por un contenedor virtual creado de la nada

Modelo de caja 6.IE, modelo de caja W3C

Modelo de caja W3C: contenido, relleno, margen, borde;

tamaño de caja:
ancho de caja de contenido = ancho de contenido;

Modelo de caja de IE: la parte de contenido de IE calcula el borde y el relleno;

tamaño del cuadro:
ancho del cuadro del borde = borde + relleno + ancho del contenido

7. ¿Cuándo se mostrará: inline-block no muestra el espacio?

Eliminar espacios
Usar márgenes negativos
Usar tamaño de fuente: 0
espaciado entre letras espaciado entre
palabras

8. ¿El elemento en línea se convierte en un elemento a nivel de bloque después de flotar: izquierda?

Una vez que los elementos en línea están configurados para flotar, se vuelven más como bloques en línea (elementos en línea a nivel de bloque, los elementos configurados
para este atributo tendrán características en línea y a nivel de bloque, la diferencia más obvia es que su ancho predeterminado no es 100 %), En este momento, establecer padding-top y padding-bottom o width y height para elementos en línea es efectivo

9.El peso de los diferentes selectores de CSS (reglas de cascada de CSS)

! La regla importante es la más importante, más grande que otras reglas
. Reglas de estilo en línea, agregue 1000.
Para cada valor de atributo de ID proporcionado en el
selector , agregue 100. Para cada atributo de clase, selector de atributo o selector de pseudo-clase proporcionado en el selector, agregue 10
Para cada selector de etiqueta de elemento dado en la selección, agregue 1
si el peso es el mismo, se aplicará de acuerdo con el orden de las reglas de estilo, y el orden inferior cubrirá la regla superior

10. La diferencia entre stylus / sass / less

Ambos tienen las cinco características básicas de "variable", "mezcla", "anidamiento", "herencia" y "mezcla de colores".
Sass y LESS tienen gramáticas estrictas. LESS requiere el uso de llaves "{}". Sass y Stylus can pass Sangría indica el nivel y la relación de anidamiento.
Sass no tiene un concepto de variables globales. LESS y Stylus tienen un concepto de alcance similar a otros lenguajes.
Sass se basa en el lenguaje Ruby, mientras que LESS y Stylus se pueden compilar en base a NodeJS NPM después descargar la biblioteca correspondiente; esta es la razón por la que a veces se informan errores al instalar Sass, y es necesario instalar scripts de Python

Ventajas: No necesito decir más, quien sepa quién lo usa, es realmente bueno.

Debido al gran contenido, para evitar la experiencia de lectura, solo se muestra una parte de las preguntas de la entrevista. La versión completa de las preguntas de la entrevista + análisis, [haga clic en mí] es gratuita.

JavaScript

1.js varias posiciones, como clientHeight, scrollHeight, offsetHeight y la diferencia entre scrollTop, offsetTop, clientTop?

clientHeight: representa la altura del área visible, excluyendo el borde y la barra de desplazamiento
offsetHeight: representa la altura del área visible, incluido el borde y la barra de desplazamiento
scrollHeight: representa la altura de todas las áreas, incluida la parte que está oculta debido al desplazamiento.
clientTop: indica el grosor del borde, generalmente 0 si no se especifica.
scrollTop: la altura que se oculta después del desplazamiento y obtiene la altura del objeto en relación con la coordenada principal especificada por el atributo offsetParent (elemento de posicionamiento css o body elemento) desde la parte superior.

Realización de la función de arrastrar y soltar 2.js

Los primeros son tres eventos, a saber, mousedown, mousemove y mouseup.
Cuando se hace clic y se presiona el mouse, se requiere una etiqueta para indicar que se ha presionado en este momento, y se pueden ejecutar los métodos específicos en mousemove.
clientX y clientY identifican las coordenadas del mouse, identifican respectivamente la abscisa y la ordenada, y usamos offsetX y offsetY para representar las coordenadas iniciales del elemento. El ejemplo de movimiento debería ser:
coordenadas cuando el mouse se mueve-cuando el mouse está coordenada presionada.
Es decir, la información de posicionamiento es:
las coordenadas cuando se mueve el mouse - las coordenadas cuando se presiona el mouse + la ofetLeft del elemento en la situación inicial.También
hay una cosa principal, que es el posicionamiento absoluto mientras se arrastra. Lo que hemos cambiado son
valores como left y top en condiciones de posicionamiento absoluto .
Suplemento: También se puede lograr arrastrando y soltando html5 (Arrastrar y soltar)

3. Método de carga js de forma asíncrona

aplazar: solo es compatible con IE. Si su secuencia de comandos no cambia el contenido del documento, puede agregar el atributo aplazar a

4.js anti-vibración

Rebote La
tecnología anti- vibración puede combinar múltiples llamadas secuenciales en una, es decir, la cantidad de veces que se activa el evento dentro de un cierto período de tiempo.
En términos sencillos, eche un vistazo a este ejemplo simplificado:

// 简单的防抖动函数
function debounce(func, wait, immediate) {
    // 定时器变量
    var timeout;
    return function() {
        // 每次触发 scroll handler 时先清除定时器
        clearTimeout(timeout);
        // 指定 xx ms 后触发真正想进行的操作 handler
        timeout = setTimeout(func, wait);
    };
};
 
// 实际想绑定在 scroll 事件上的 handler
function realFunc(){
    console.log("Success");
}
 
// 采用了防抖动
window.addEventListener('scroll',debounce(realFunc,500));
// 没采用防抖动
window.addEventListener('scroll',realFunc);

El ejemplo anterior de anti-vibración simple se puede probar en un navegador. La función aproximada es que si el evento de desplazamiento no se dispara dos veces en 500 ms, entonces se disparará la función que realmente queremos disparar en el evento de desplazamiento.
El ejemplo anterior se puede encapsular mejor

// 防抖动函数
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
 
var myEfficientFn = debounce(function() {
    // 滚动中的真正的操作
}, 250);
 
// 绑定监听
window.addEventListener('resize', myEfficientFn);

5. Cierres que no se pueden eludir

• El cierre es una función que puede leer las variables internas de otras funciones.
• Un cierre es una función que tiene acceso a variables en el alcance de otra función. La forma más común de crear un cierre es en un
• Cree otra función dentro de la función, acceda a las variables locales de esta función a través de otra función y use cierres para romper el alcance del alcance
• La característica de cierre: la
  función está anidada dentro de la función. La
  función interna puede referirse a los parámetros y variables externos. Los
  parámetros y variables no serán reciclados por el mecanismo de recolección de basura.
• Ventajas: puede realizar encapsulación y almacenamiento en caché, etc.
• Desventajas: consumo de memoria, un uso inadecuado provocará un desbordamiento de la memoria,
• Solución: antes de salir de la función, elimine todas las variables locales no utilizadas

6. Cuénteme sobre su comprensión de la cadena de alcance.

El rol de la cadena de alcance es asegurar que las variables y funciones a las que se ha accedido en el entorno de ejecución estén en orden. Las variables en la cadena de alcance solo se pueden acceder hacia arriba, y el acceso de variable al objeto de ventana será terminado. el acceso descendente de la cadena de alcance a las variables no está permitido.
En pocas palabras, el alcance es el alcance accesible de variables y funciones, es decir, el alcance controla la visibilidad y el ciclo de vida de las variables y funciones.

7. ¿Prototipo de JavaScript, cadena de prototipos? ¿Cuáles son las características?

Todo objeto inicializa una propiedad en su interior, que es prototipo.Cuando accedemos a la propiedad de un objeto, si la propiedad no existe en el objeto, entonces se dirigirá al prototipo para encontrar la propiedad, y el prototipo tendrá su propio prototipo, así que sigo buscándolo, que es el concepto de la cadena de prototipos que solemos llamar

Relación:. Instance.constructor.prototype = instancia proto
características: objetos de JavaScript se pasan por referencia, y cada nueva entidad objeto creamos no tiene una copia de su propio prototipo. Cuando modifiquemos el prototipo, los objetos relacionados con él también heredarán este cambio.Cuando necesitemos una propiedad, el motor Javascript primero verificará si existe esta propiedad en el objeto actual, y si no es así, buscará su objeto prototipo. Con este atributo, la recursividad continúa hasta que se recupera el objeto Object integrado

8. Explique qué es la delegación de eventos / delegación de eventos.

Delegación de eventos (Delegación de eventos), también conocida como delegación de eventos. Es una técnica común para vincular eventos que se usa comúnmente en JavaScript. Como su nombre lo indica, "agente de eventos" es delegar el evento que originalmente necesitaba estar vinculado al elemento padre y dejar que el elemento padre asuma el rol de monitoreo de eventos. El principio de delegación de eventos es la propagación de eventos de elementos DOM. La ventaja de usar el proxy de eventos es que puede mejorar el rendimiento,
ahorrar mucha memoria y reducir el registro de eventos. Por ejemplo, es excelente usar proxy de todos los eventos td click en la mesa. Es
posible darse cuenta de que no es necesario para enlazarlo de nuevo al agregar nuevos subobjetos.

9. ¿Cómo implementa Javascript la herencia?

• Herencia constructiva
• Herencia de prototipos
• Herencia de instancias
• Copie y herede el
  mecanismo del prototipo o aplique y llame a métodos para lograr un resultado más simple, se recomienda utilizar un método mixto de constructor y prototipo

function Parent(){
this.name = 'wang';
}
function Child(){
 this.age = 28;
}
Child.prototype = new Parent();//继承了Parent，通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性

10. Habla sobre la comprensión de este objeto.

esto siempre se refiere al llamador directo de la función (no al llamador indirecto).
Si existe la palabra clave nueva, esto se refiere al objeto que salió de nuevo
en el evento, y esto se refiere al objeto que desencadenó el evento. En en particular, en attachEvent en IE El esto siempre apunta a la ventana del objeto global

11. ¿Qué hace exactamente el nuevo operador?

Crea un objeto vacío, y esta variable se refiere al objeto, y al mismo tiempo hereda el prototipo de la función. Las
propiedades y métodos se agregan al objeto referenciado
por esto . El objeto recién creado es referenciado por esto, y finalmente devuelve esto implícitamente.

12. Principio de Ajax

El principio de Ajax es simplemente agregar una capa intermedia (motor AJAX) entre el usuario y el servidor, a través del objeto XmlHttpRequest para enviar solicitudes asincrónicas al servidor, obtener datos del servidor y luego usar javascript para manipular el DOM para actualizar la página. Haga que las operaciones de los usuarios y las respuestas del servidor sean asincrónicas. El paso más crítico es que el
proceso Ajax de obtener datos de solicitud del servidor solo involucra JavaScript, XMLHttpRequest y DOM. XMLHttpRequest es el mecanismo central de Ajax

Debido al gran contenido, para evitar la experiencia de lectura, solo se muestra una parte de las preguntas de la entrevista. La versión completa de las preguntas de la entrevista + análisis, [haga clic en mí] es gratuita.