1. CSS
1. Hable sobre el modelo de caja CSS
En html, todos los elementos se pueden ver como un cuadro
Composición de la caja: contenido del contenido, relleno del margen interno, borde del borde, margen del margen externo
Tipo de modelo de caja:
modelo de caja estándar
margen+borde+relleno+contenido
es decir, modelo de caja
margen+contenido(relleno+borde)
El modo del modelo de caja de control: tamaño de caja: caja de contenido (valor predeterminado, modelo de caja estándar), caja de borde (es decir, modelo de caja)
2. Prioridad de los selectores css
Características de CSS: herencia, cascada, prioridad
prioridad:
! importante, estilo en línea, selector de ID, clase/pseudoclase/atributo, etiqueta, selector global
3. Cómo ocultar elementos
display:ninguno; no ocupa espacio
opacidad:0; ocupa espacio
visibilidad:oculto; ocupar espacio
posición:absoluta;
corte de clip-path
4. La diferencia entre px y rem
px: unidad de longitud absoluta
rem: unidad de longitud relativa, relativa al valor del tamaño de fuente del nodo raíz de html, 1rem=10px; tamaño de fuente: 62,5% (16px* 62,5%=10)
5. ¿Cuál es la diferencia entre redibujar y reorganizar?
Reflow (reflujo): El motor de diseño calculará la posición y el tamaño del modelo de caja en la página según el estilo.
Redibujar: Después de calcular la posición, el tamaño y otros atributos del modelo de caja, el navegador dibujará de acuerdo con las características de cada modelo de caja.
El mecanismo de representación del navegador: después de modificar el tamaño y la posición del dom, el navegador necesita volver a calcular las propiedades geométricas de estos elementos, lo que se denomina reordenamiento.
Modifique el estilo dom, color, bgcolor, cuando el navegador no necesita calcular el atributo establecido, dibuja directamente el nuevo estilo del elemento, que se llama redibujar
6. Centrar un elemento horizontal y verticalmente
posicionamiento+margen
posicionamiento+transformar
diseño flexible
diseño de cuadrícula
disposición de la mesa
7. Qué atributos de css se pueden heredar y cuáles no
Fuente de atributo de fuente
Propiedad de texto altura de línea
visibilidad del elemento
Espaciado de borde de propiedad de diseño de tabla
atributo de lista estilo de lista
página de atributos de estilo de página
8. Preprocesador
El lenguaje de preprocesamiento agrega funciones como variables, funciones y mixins.
descaro menos
dos, javascript
1. La composición de js
ECMAScript: js core, gramática básica del lenguaje de descripción, var, for, etc.
Modelo de objetos de documento (DOM): planifique una página html como un documento compuesto de elementos
Modelo de objetos del navegador (BOM): acceda y manipule las ventanas del navegador
Objetos incorporados 2.js
cadena booleano número matriz objeto función matemática fecha expresión regular
3. ¿Cuáles son los métodos para manipular matrices?
empujar () pop () ordenar () empalme () unshift () shift () invertir () mapa ()
4. Detección de tipos de datos
typeof() juzga el tipo de datos básico
instanceof() juzga el tipo de datos de referencia
constructor Tipos de datos básicos y tipos de datos de referencia, declarar constructores y apuntar a la matriz
object.prototype.tostring.call() admite todos los tipos
5. Cierres, características
Cierre: función función anidada, la función interna es devuelta y guardada por la función externa
Características: reutilice las variables, esta variable no contaminará el global y las variables no serán recicladas por el mecanismo de recolección de basura.
Desventajas: consumo de memoria, degradación del rendimiento de la página y fugas de memoria en, por ejemplo, navegadores.
Escenarios de uso: antivibración, estrangulamiento, evitar la contaminación global de datos
6. Fugas de memoria front-end
js asigna una dirección de memoria, pero no la libera durante mucho tiempo, lo que provoca un bloqueo.
Factores: asignación sin declaración, temporizador no borrado, cierre, elemento de referencia no está claro
7. Delegación de eventos
Principio: mecanismo de propagación de eventos, los eventos de los elementos secundarios están vinculados a los elementos principales
Evitar el evento burbujeante event.stopPropagation()
8. La diferencia entre tipos de datos básicos y tipos de datos de referencia
Tipos de datos básicos: cadena, número, booleano, no definido y nulo se almacenan en la memoria de pila y almacenan valores específicos
Tipos de datos de referencia: objeto, función, matriz se almacenan en la memoria del montón y la dirección se almacena
9. Cadena prototipo
Un prototipo es un objeto que comparte métodos y propiedades para las instancias del constructor, y todas las instancias se refieren al mismo objeto prototipo.
Cuando un objeto de instancia llama a propiedades y métodos, buscará desde la propia instancia, el prototipo del constructor y, a su vez, el prototipo del prototipo.
10. ¿Qué hace exactamente el nuevo operador?
Crea un objeto vacío primero
Vincule el objeto vacío y el constructor a través de la cadena de prototipo
Vincular el this del constructor al objeto vacío.
De acuerdo con el tipo devuelto por el constructor, si es un tipo de valor, devuelve el objeto, si es un tipo de referencia, devuelve el tipo de referencia.
11. Cómo js implementa la herencia
Herencia de cadena de prototipos
tomar prestada la herencia del constructor
herencia compositiva
herencia de clase clase es6
12. Esto apunta al problema en js
Esto en el objeto global apunta a la ventana.
En funciones ordinarias, esto apunta a la ventana global
esto siempre apunta al objeto que lo llamó en último lugar (función sin flecha)
La nueva palabra clave cambia la dirección de este
aplicar, llamar, vincular puede cambiar la dirección de esto (función sin flecha)
La función this in the arrow apunta a this de su clase principal
esto en la función anónima apunta a la ventana
13. ¿Cuál es la diferencia entre async y defer en script?
Sin async y defer, el navegador cargará y ejecutará el script especificado inmediatamente
Con async, de forma asíncrona, el proceso de carga y renderizado de elementos se realizará en paralelo con la carga y ejecución de scripts
Con aplazamiento, el proceso de carga y representación de elementos se llevará a cabo en paralelo con la carga de scripts, y todos los elementos se ejecutarán después del análisis.
14.setTimeout tiempo mínimo de ejecución
establecer el tiempo de espera: 4 ms
establecerIntervalo: 10ms
15. La diferencia entre ES5 y ES6ECMAScript
ES5:
ES6:
16. Nuevas características de ES6
Se agregó alcance a nivel de bloque (let, const)
Agregue azúcar sintáctico para definir clases (clase)
Símbolo agregado tipo de datos básicos
Asignación de desestructuración agregada
Nuevo valor predeterminado del parámetro de función
Se agregó una nueva API para matrices.
Nuevo operador de propagación para objetos y matrices.
promesa
Modularidad añadida (importación, exportación)
Se agregaron estructuras de datos de conjuntos y mapas
Añadir generador
Funciones de flecha añadidas
17. La diferencia entre llamar, aplicar y vincular
Ambos cambian el este punto y la llamada de la función.
Las funciones de llamar y aplicar son similares, pero el método de pasar parámetros es diferente
El parámetro de llamada es una lista de parámetros.
El parámetro de aplicación es una matriz.
bind no se ejecutará inmediatamente después de pasar parámetros, y devolverá una función que cambia el punto de esto, y no se puede usar como constructor. Esta función puede pasar parámetros a bind()()
El rendimiento del método de llamada es mucho más fácil de usar.
18. ¿Cuál es la diferencia entre una función de flecha y una función normal?
No se puede usar como constructor, no se puede usar new
sin argumentos
No puede usar call, apply o bind para cambiar la dirección de este
sin prototipo
esto apunta a esto de la primera función en la capa exterior
19. La diferencia entre let const var
let const: no hay promoción variable, debe definirse antes de que se pueda usar, hay un problema de zona muerta temporal, hay contenido de alcance a nivel de bloque y no se puede declarar repetidamente en el mismo alcance
var: existe elevación variable
20. Cómo implementar copia profunda
Copie completamente un nuevo objeto y abra un nuevo espacio en la memoria del montón
Principalmente para datos de tipo de referencia
El operador de propagación {...obj} solo puede alcanzar el primer nivel
json.parse(json.stringify()), no copiará funciones internas
Usando una función recursiva para lograr
21. ¿Qué es ajax?
Técnicas de desarrollo web para crear aplicaciones web interactivas
Intercambie datos con el servidor y actualice partes del contenido sin recargar la página completa
Envíe una solicitud asíncrona al servidor a través del objeto xmlhttprequest y, después de obtener los datos del servidor, opere la página manipulando el dom a través de js
Crear un objeto xmlhttprequest
Establecer una conexión con el servidor a través del método open() en el objeto xmh
Genere los datos necesarios para la solicitud y envíelos al servidor a través de send() de xmh
Escuche el estado de comunicación entre el servidor y usted a través del evento de cambio onreadystate de xmh
Aceptar y procesar los datos resultado de la respuesta del servidor
Actualizar los datos procesados a la página html
22. La diferencia entre obtener y publicar
El parámetro get se colocará en la URL, que es menos segura, y la publicación se colocará en el cuerpo
actualizar el servidor o devolver no tiene efecto, la publicación se volverá a enviar
Las solicitudes de obtención se almacenarán en caché, la publicación no.
Las solicitudes de obtención se guardarán en el historial del navegador, la publicación no
get solo se puede codificar en URL, la publicación admite muchos
23. El principio interno y las ventajas y desventajas de la promesa
El objeto Promise encapsula una operación asincrónica y también puede obtener un resultado de éxito o falla
El objeto Promise resuelve principalmente el problema del infierno de devolución de llamada. En el pasado, si había muchas tareas asincrónicas y había dependencias mutuas entre ellas, solo podían procesarse con funciones de devolución de llamada. Esto conduciría fácilmente al infierno de devolución de llamada, y la legibilidad y mantenibilidad del código eran pobres.
Hay tres estados: estado inicial pendiente, estado exitoso cumplido, estado fallido rechazado
Principio: construir una instancia de promesa. La instancia necesita pasar parámetros. Este parámetro tiene dos parámetros formales, ambos de los cuales son tipos de función, uno es resolver y el otro es rechazar
También hay un método entonces en la promesa, que se usa para especificar la operación definitiva cuando cambia el estado.resolver es ejecutar la primera función y rechazar es ejecutar la segunda función.
24. La diferencia entre promesa y asíncrono espera
Ambos manejan solicitudes asíncronas
la promesa es es6, la espera asincrónica es es7
Async await se implementa en función de la promesa y no bloquea
Ventajas y desventajas:
Promise es el objeto de retorno, y luego se deben usar los métodos catch para manejar y capturar excepciones, y el método de escritura está encadenado, lo que es fácil de causar superposición de código y mala capacidad de mantenimiento.
Async await se usa para capturar excepciones a través de try catch
Async await puede hacer que el código parezca sincrónico, siempre que encuentre await, devolverá el resultado inmediatamente y luego realizará las operaciones posteriores.
promise.then() mostrará que la solicitud no se ha devuelto y se realizan las siguientes operaciones
25. Método de almacenamiento del navegador
Método de almacenamiento local estándar de cookies, buena compatibilidad, pequeña capacidad de almacenamiento, debe empaquetarse
localstorage utiliza pares clave-valor de forma estándar, fácil de operar, almacenamiento permanente, buena compatibilidad, el tipo de valor guardado es limitado y no se puede leer en modo privado
el almacenamiento de sesiones se limpiará cuando se cierre la página, método de almacenamiento a nivel de sesión
almacenamiento de pares clave-valor indexedDB, almacenamiento conveniente
26. ¿Dónde existe el token?
token: token para autenticar
Si existe en localdtorage, debe pasarse a segundo plano como un campo cada vez que se solicita la interfaz, lo cual es fácil de ser atacado por xss
Existe en la cookie y se enviará automáticamente, pero no puede ser entre dominios 27. Proceso de representación de la página
resolución dns
establecer conexión tcp
enviar solicitud http
El servidor procesa la solicitud.
renderizar página
El navegador obtendrá los recursos html y css, y analizará el html en un árbol dom
Luego analiza css en cssom
Combinar dom y cssom en el árbol de renderizado
Representar cada nodo del árbol de representación en la página
desconectar conexión tcp
JWT
El token web json se usa como token en aplicaciones web en forma de json, y la información se puede generar de forma segura como datos json entre las partes.
Transferencia de información, autorización
El entorno subyacente de npm
El administrador de paquetes de nodos es una herramienta de administración y distribución de paquetes para nodos.
Componentes de Npm: sitio web, registro, herramientas de línea de comandos
Política de almacenamiento en caché del navegador
Caché fuerte (caché local), caché de negociación (caché débil)
Caché fuerte: no envíe solicitudes, use directamente el contenido en el caché, el navegador almacena js, css, imagen, etc. en la memoria, y el próximo acceso del usuario se obtiene directamente de la memoria para mejorar el rendimiento
Caché débil: debe enviar una solicitud al fondo, juzgando si usar el caché de negociación, si el contenido no ha cambiado, devuelva 304 y el navegador usará el contenido en el caché
¿Qué es la política del mismo origen?
El núcleo del navegador, sin la política del mismo origen, estará sujeto a ataques de red
Se refiere principalmente al protocolo + nombre de dominio + número de puerto son consistentes, si uno de ellos es diferente, no es la misma fuente y se producirá un dominio cruzado
img, link y script permiten la carga de recursos entre dominios
Se pueden enviar solicitudes entre dominios y el backend devolverá los resultados normalmente, pero el navegador interceptará los resultados.
Resolver entre dominios: jsonp, cors, websocket, proxy inverso
¿Qué son antivibración y estrangulamiento?
Ambas son soluciones de optimización para hacer frente a eventos frecuentes en la página.
Anti-vibración: evite la activación repetida de eventos y solo ejecute la última vez dentro de un cierto período de tiempo
Throttling: ejecutar solo una vez en un cierto período de tiempo
3. HTML/CSS
1. ¿Cuáles son las nuevas características de html5 y css3?
H5: etiquetas semánticas, nuevas etiquetas de audio y video, nuevo lienzo, nuevo almacenamiento de datos, nuevos controles de formulario, nueva API de arrastrar y soltar
css3: nuevos atributos, pseudoclases, selectores de pseudoelementos, nuevas consultas de medios, sombras de texto, bordes, tamaño de cuadro de modelo de cuadro, degradados, transiciones, animaciones personalizadas, propiedades de fondo, 2d y 3d
4. vista
1. La diferencia entre v-if y v-show
Puede controlar la ocultación y visualización de elementos.
v-show es para controlar el valor de la pantalla para mostrar y ocultar
v-si es la destrucción y creación de elementos dom
2. Cómo entender mvvm
La abreviatura de model-view-viewmodel es una idea de diseño,
modelo es el modelo de datos, utilizado para definir la modificación y operación de datos
la vista es la vista
viewmodel es el puente que conecta la vista y el modelo
Cuando los datos cambian, el modelo de vista actualiza automáticamente la vista al monitorear el cambio de datos. Cuando el usuario opera la vista, el modelo de vista puede monitorear el cambio de vista y notificar a los datos del cambio.
El modelo de vista conecta la vista y el modelo a través de un enlace bidireccional, y la sincronización entre ellos es automática.
3. Ciclo de vida del componente
crear
beforeCreate: no se puede usar ni la propiedad ni el método
creado: después de crear la instancia, los datos se pueden usar y modificar, pero la página no se representa
montar
beforemount: el dominio virtual se crea y se renderizará pronto
montado: Monte la plantilla compilada en la página
renovar
beforeUpdate: se utiliza antes de que se actualice el componente, los datos son nuevos, los datos de la página son antiguos y el componente está a punto de actualizarse
actualizado: renderizar re-renderizados, los datos y las páginas son nuevos
destruir
beforeDestory: borrar temporizadores y otras operaciones
destruido: el componente es destruido
Dos más cuando se usa keep-alive
activado: cuando el componente está activado
desactivado: cuando el componente es destruido
4. Cuál es la diferencia entre crear y montar para solicitar datos
creado: llamado antes de renderizar, inicialice los datos primero
montado: Llamado después de renderizar, los datos de solicitud pueden aparecer en la pantalla de inicio, creado no lo hará
Los datos solicitados tienen un impacto en dom, uso creado, no tiene nada que ver con dom, se puede colocar en montado
5. Comunicación de componentes Vue
Pasar de padre a hijo: accesorios, $ref: el objeto de información de referencia se registrará en el objeto $refs del componente principal
Pasar de hijo a padre: ￥emit --- El componente hijo vincula eventos personalizados y el componente secundario se vincula para recibir
Biografía de Brother: El bus de eventos global $bus utiliza y emite para la transmisión de datos
6.mantener vivo
Es un componente integrado de Vue. Al empaquetar componentes, las instancias de componentes inactivos se almacenarán en caché.
Prevenga el renderizado, reduzca el tiempo de carga y el consumo de rendimiento
7. Cómo empaquetar axios
Descargar axios----crear instancia----encapsular solicitud e interceptor de respuesta----encapsular interfaz--usar
8. paso de parámetros de enrutamiento vue
params传参:this.$router.push({name:'',params:{}})
this.$route.params.id
Parámetros de pase de propiedad de ruta
this.$router.push({nombre:'/${item.id}'})
Configuración de enrutamiento {ruta:'/index:id'}
parámetro de consulta
this.$router.push({nombre:'índice',consulta:{}})
9. ¿Cuál es la diferencia entre el modo hash de enrutamiento y el historial?
Hay # en la dirección hash, pero no hay historial
Al presionar Enter para actualizar la barra de direcciones, el hash cargará la página correspondiente y el historial informará 404
Hash admite navegadores de versión baja debido a la nueva API de H5
hash no recarga la página
El historial tiene registros históricos, puede modificar los registros históricos a través de pushState y replaceState (0), y no envíe la solicitud de inmediato
el historial requiere una configuración en segundo plano
10. Intercepción de ruta
router.before e ach((a,desde,siguiente)=>{})
11. Enrutamiento dinámico de vue
Establezca el metaatributo en la configuración de enrutamiento, expanda los campos relacionados con el permiso y juzgue el identificador de permiso en la protección de navegación de enrutamiento para realizar un enrutamiento de salto y aumento dinámico
12. Cómo resolver la ruta de carga secundaria después de actualizar
ventana.ubicación.recargar()
emparejador
costo enrutador = crear enrutador ()
función de exportación resetRouter(){
const nuevoRouter=creatRouter()
router.matcher=nuevoRouter.matcher
}
13. Pérdida de datos de la página de actualización de vuex
Vuex volverá a adquirir datos
Guardar datos en la cookie de caché del navegador, almacenamiento local, sesión
Cuando se actualice la página, solicite datos nuevamente y actualice dinámicamente los datos en vuex
14. La diferencia entre calculado y reloj
computado: atributos computados, admite almacenamiento en caché, dado que el valor del atributo cambia, el atributo computado se recalculará; de lo contrario, se usa el caché, no se admite asíncrono, se monitoreará la primera carga y debe haber un retorno en la función
reloj: monitorear atributos, monitorear cambios de datos en datos, no admite almacenamiento en caché, admite asíncrono, no monitorea la primera carga y no necesita tener un retorno
15. Escenarios y atributos de uso de vuex
estado: variable de almacenamiento
captadores: propiedades calculadas del estado
mutaciones: el método de envío de datos actualizados, sincronización
acciones: operaciones asíncronas
módulos: modular vuex
Datos personales del usuario, carrito de la compra, etc.
16. El principio de la vinculación bidireccional vue
A través del secuestro de datos combinado con el modelo de editor-suscriptor, Liyong object.defineProperty() secuestra el setter y getter de cada propiedad, publica un mensaje para el suscriptor cuando los datos cambian y activa la devolución de llamada de monitoreo correspondiente para representar la vista.
17. diferencia y dominio virtual
Virtual dom, que describe la relación entre elementos y crea un objeto js
Si hay datos de respuesta en el componente, cuando los datos cambien, la función de representación generará un nuevo dominio virtual, el nuevo dominio virtual se comparará con el antiguo dominio virtual, encontrará el contenido del dominio virtual que debe modificarse y luego ir a la modificación real correspondiente en dom
diff se usa para la comparación de dom virtual, devuelve un objeto de parche para almacenar la diferencia entre dos nodos y finalmente actualiza el dom real con la información de registro en el parche
18. La diferencia entre vue y jquery
El principio es diferente: vue es un enlace de datos y jq primero obtiene dom para el procesamiento
El enfoque es diferente: vue está basado en datos, jq se enfoca en páginas
La operación es diferente
19. Procesamiento receptivo de vuex
Cuando se activa el evento, se accederá al método en la acción a través del envío, y la confirmación en las acciones activará el método en las mutaciones para modificar el valor en el estado y actualizar los datos a la vista a través del captador.
20. Cómo encapsular componentes
Crear un componente usando Vue.extend()
Registre componentes usando el método Vue.components()
21. filtro vue
Expresiones de interpolación, v-bind puede usar filtros
Global: Vue.filtro
Local: mismo nivel que los métodos, filtro
22. Forzar actualización en vue
localización.reliad()
esto.$router.go(0)
proporcionar e inyectar
23. vue2 y vue3
El principio del enlace de datos bidireccional es diferente: vue2 usa definepropty() y vue3 usa proxy
Fragmentación compatible
diferentes API
Diferentes métodos para definir variables de datos, vue3---setup
ciclo de vida es diferente
valores diferentes
Las instrucciones y las ranuras son diferentes.
main.js es diferente
24. Optimización del rendimiento de Vue
No pongas todos los datos en datos
v-for vincula eventos a cada elemento con proxy de eventos
componente de caché de mantenimiento
Diferenciar los componentes tanto como sea posible para mejorar la reutilización.
la clave debe ser única
Uso razonable de ruta de carga diferida
Utilice la optimización anti-vibración y aceleración para el almacenamiento persistente de datos tanto como sea posible
Carga bajo demanda, carga diferida de contenido, carga diferida de imágenes
Pantalla de esqueleto
Optimización SEO: renderizado previo, renderizado del lado del servidor ssr
Introducir módulos de terceros en forma de cdn, empaquetado de subprocesos múltiples y extraer archivos públicos
Caché del cliente, caché del servidor, compresión Gzip del servidor
25. Optimización de la primera pantalla
Lazy loading con rutas
Los componentes debajo de la página usan async
Lazy loading de componentes sin importancia en la primera pantalla
Los recursos dinámicos se colocan en CDN
Reduzca el tamaño de los archivos de recursos como js y css en la primera pantalla
Utilice la representación del lado del servidor
Reducir el número y el nivel de dom.
Usar solicitud de sprite
hacer algunas mentiras
Habilitar Gzip
Imagen de carga diferida
26.vue3 es mejor que vue2
optimización de algoritmos diferenciales
impulso estático
caché del detector de eventos
27. ¿Por qué vue usa proxy?
proxy puede representar todo el objeto
El método de monitoreo del objeto proxy es más rico
El objeto proxy generará un nuevo objeto y no modificará el objeto en sí
No es compatible con el navegador ie
28. Cómo optimizar el SEO
srr - representación del lado del servidor
seo--optimizar motor de búsqueda
srr, prerender prerender-spa-plugin