preguntas de la entrevista js
1. tipo de datos js
Tipos de datos básicos Número, Cadena, Booleano, Nulo, Indefinido, Símbolo, bigInt Tipos de datos de referencia objeto, Matriz, Fecha, Función, RegExp2. Mejora de las declaraciones de funciones y variables js.
En js, la declaración de variables y funciones se promoverá a la parte superior. La función de ejecución se promoverá más arriba que la variable. Si se declara una variable externa con el mismo nombre con var dentro de la función, la función ya no buscará hacia arriba. No se izan funciones anónimas.3. Cierre
Un cierre es una función que puede leer las variables internas de otras funciones. Un cierre es básicamente una función que devuelve una función. Ventajas: puede leer las variables dentro de la función y mantener las variables en la memoria. Desventajas del método privado del objeto: es más caro. El uso inadecuado de la memoria puede causar problemas de desbordamiento de la memoria.4. La diferencia entre == y ===
== es igual en un sentido no estricto. Si los valores son iguales, son iguales en un sentido estricto. Se compararán el tipo de datos y el tamaño del valor de ambos lados. la dirección será igual sólo si son iguales.5. esto
esto siempre apunta al llamador directo de la función. Si hay una nueva palabra clave, esto apunta al objeto que sale de nuevo. En el caso, esto apunta al objeto que desencadenó el evento.6. Cómo atravesar matrices y objetos js
para informaciónparacadapara-de7. La diferencia entre map y forEach
El método forEach es el método más básico, que es transversal y de bucle. Hay tres parámetros pasados de forma predeterminada: el elemento de contenido de la matriz atravesada, el índice de la matriz y el método Arraymap de la matriz atravesada actual. , pero diferente. Devolverá una nueva matriz, por lo que la devolución de llamada debe tener un valor de retorno. De lo contrario, se devolverá indefinido.8. ¿Cuál es la diferencia entre funciones de flecha y funciones ordinarias?
Este objeto en el cuerpo de la función es el objeto en el que está definido, no el objeto en el que se usa. No se puede usar como constructor, es decir, el nuevo comando no se puede usar; de lo contrario, se producirá un error. lanzado. El objeto de argumentos no se puede utilizar. El objeto no existe dentro del cuerpo de la función. Si desea usarlo, puede usar el parámetro Rest. El comando de rendimiento no se puede usar, por lo que la función de flecha no se puede usar como función de generador.9. Estrategia del mismo origen
La homología se refiere al mismo nombre de dominio, protocolo y número de puerto.10. Cómo resolver problemas entre dominios
jsonp entre dominios document.domain + iframe entre dominios nodejs middleware proxy backend entre dominios establece el nombre de dominio seguro en la información del encabezado11. Restricciones del modo estricto
Las variables deben declararse antes de usar la función. Los parámetros no pueden tener atributos con el mismo nombre; de lo contrario, se informará un error. La declaración with no se puede utilizar para evitar que esto apunte al objeto global.12. Nuevo en es6
Nueva función de flecha de cadena de plantilla for-of (utilizada para recorrer datos, como valores en una matriz). ES6 incorpora objetos Promise en la especificación y proporciona objetos Promise nativos. Se agregaron comandos let y const para declarar variables. También está la introducción del concepto de módulo módulo.13. ¿Cuál es la diferencia entre atributo y propiedad?
atributo es el atributo que tiene el elemento dom como etiqueta html en el documento propiedad es el atributo que tiene el elemento dom como objeto en js. Para los atributos estándar de html, el atributo y la propiedad se sincronizan y se actualizarán automáticamente. Sin embargo, para los atributos personalizados, no se sincronizan.14. ¿Cuál es la diferencia entre let y const?
No hay promoción de variables en el comando let. Si se usa antes de let, se informará un error. Si hay comandos let y const en el área de bloque, se formará un alcance cerrado y no se permitirán declaraciones repetidas. y no se puede modificar. Sin embargo, si la definición es Objeto, puede modificar los datos dentro del objeto.15. Pérdida de memoria
Definición: varios problemas causados por el programa que no libera o no puede liberar la memoria dinámica que se ha asignado dinámicamente en el programa por algún motivo. Posibles pérdidas de memoria en js: Resultado: desaceleración, falla, gran retraso, etc. Posibles causas de pérdidas de memoria en js Cuando se borra la variable global dom, todavía hay una pérdida de memoria causada por la existencia de elementos secundarios que no se borran por el cronómetro de referencia.16. ¿Cómo introducir el guión?
html static <script> introduce la inserción dinámica js <script><script defer>: carga asincrónica, ejecutada después de completar el análisis del elemento <script async>: carga asincrónica, pero la representación del elemento se bloqueará durante la ejecución17. método de matriz
mapa: recorre la matriz y devuelve una nueva matriz compuesta de valores de devolución de llamada para cada uno: no se puede romper, puede usar throw new Error en try/catch para detener el filtro: Filtrar algunos: si un elemento devuelve verdadero, el conjunto es verdadero todos: Si un elemento devuelve false, entonces el valor general es falsejoin: genera una cadena especificando el conector push/pop: empuja y pop al final, cambia la matriz original, devuelve el elemento push/pop unshift/shift: empuja y pop en el encabezado, cambia la matriz original, devuelve el elemento de operación ordenar (fn) / revertir: ordenar e invertir, cambiar la matriz original concat: conecta la matriz, sin afectar la matriz original, copia superficial segmento (inicio, final): devuelve el nueva matriz truncada, sin cambiar la matriz original empalme (inicio, número, valor...): devuelve una matriz compuesta por elementos eliminados, el valor es el elemento insertado, cambia la matriz original indexOf / lastIndexOf (valor, fromIndex): encuentra el elemento de matriz y devuelve el subíndice correspondiente reduce / reduceRight(fn(prev, cur), defaultPrev): ejecutado en pares, prev es el valor de retorno de la última función simplificada, cur es el valor actual (a partir del segundo elemento)18. ¿Copia profunda y superficial de JavaScript?
Copia superficial La copia profunda de Object.assign se puede resolver mediante JSON.parse(JSON.stringify(object))19. ¿Hablar sobre la implementación de la programación asincrónica?
Ventajas de la función de devolución de llamada: simple y fácil de entender Desventajas: no favorece el mantenimiento, alto acoplamiento de código Monitoreo de eventos Ventajas: fácil de entender, puede vincular múltiples eventos, cada evento puede especificar múltiples funciones de devolución de llamada Desventajas: impulsado por eventos, el proceso no Lo suficientemente claro para el lanzamiento/Suscripción (modo observador) es similar a la escucha de eventos, pero puede usar el 'Centro de mensajes' para saber cuántos editores y suscriptores hay ahora. Ventajas del objeto Promise: puede usar el método then para escribir en un. cadena, puede escribir devoluciones de llamada cuando ocurren errores Desventajas de la función: relativamente difícil de escribir y comprender Ventajas de la función del generador: intercambio de datos dentro y fuera del cuerpo de la función, mecanismo de manejo de errores Desventajas: gestión de procesos inconveniente Ventajas de la función asíncrona: ejecutor incorporado, mejor semántica; , aplicabilidad más amplia, devolución Qué es la promesa, estructura clara Desventajas: mecanismo de manejo de errores20. ¿Hablar sobre ideas de programación orientada a objetos?
La idea básica es utilizar conceptos básicos como objetos, clases, herencia y encapsulación para diseñar programas. Las ventajas son fácil de mantener y expandir, alta reutilización y herencia del trabajo de desarrollo y menor carga de trabajo de duplicación. Ciclo de desarrollo acortado21. Optimización del desempeño del proyecto.
Reduzca la cantidad de solicitudes HTTP. Reduzca la cantidad de elementos DOM. Utilice JavaScript y CSS externos para comprimir JavaScript, CSS, fuentes e imágenes. etc. Optimice CSS Sprite. Utilice iconfont para la distribución de múltiples dominios. Divida el contenido en diferentes nombres de dominio tanto como sea posible. Reduzca el uso de iframes, evite src de imágenes vacías, coloque la hoja de estilo en el enlace y coloque JavaScript en la parte inferior. de la página.22. ¿Qué es el hilo único y su relación con el asincrónico?
Hilo único: solo hay un hilo que solo puede hacer una cosa. Motivo: para evitar conflictos en la representación DOM, el navegador necesita representar DOMJS. Cuando se ejecuta JS, la representación DOM del navegador pausará la ejecución. dos piezas de JS y no se pueden ejecutar al mismo tiempo (ambas están modificadas por conflictos DOM) el webworker admite subprocesos múltiples, pero no puede acceder a la solución DOM: asíncrona.23. ¿Hablar sobre equilibrio de carga?
Los servidores individuales trabajan juntos para evitar que uno o varios de ellos trabajen demasiado y maximizan la función del equilibrio de carga de redirección http del servidor: el programador selecciona el servidor de acuerdo con la política para responder a la solicitud con 302. La desventaja es que. solo tiene efecto la primera vez y las operaciones posteriores Mantenga el equilibrio de carga dns en este servidor: al resolver nombres de dominio, acceda a uno de varios servidores IP (monitoreo débil) Razón: evitar conflictos de representación DOM Equilibrio de carga de proxy inverso: acceda a un servidor unificado, y el servidor programa el acceso. Un servidor real requiere un servidor unificado y su rendimiento se ve afectado por la cantidad de grupos de servidores.24. ¿Cadena de alcance?
La cadena de alcance puede entenderse como un conjunto de listas de objetos, incluido el padre y sus propios objetos variables, por lo que podemos acceder a las variables o funciones declaradas en el padre a través de la cadena de alcance.25. ¿Qué son los prototipos, las cadenas de prototipos y la herencia?
Todas las funciones tienen un atributo prototipo (prototipo). Todos los objetos tienen un atributo __proto__. En Javascript, cada función tiene un atributo prototipo que apunta a su propio prototipo, y el objeto creado por esta función también tiene un atributo proto que apunta a este. Prototipo, y el prototipo de una función es un objeto, por lo que este objeto también tendrá un proto apuntando a su propio prototipo, y este irá profundizando capa por capa hasta el prototipo del objeto Objeto, formando así una cadena de prototipo.26. ¿Cuál es el mecanismo de recolección de basura de JS? 1. Descripción general
El mecanismo de recolección de basura de js es para evitar pérdidas de memoria (todavía existe una parte de la memoria que ya no es necesaria). El mecanismo de recolección de basura busca continuamente estas variables que ya no se usan y libera la memoria a la que apunta. En JS, el entorno de ejecución de JS es responsable de administrar la memoria utilizada durante la ejecución del código.
2. El ciclo de vida de las variables.
Cuando finaliza el ciclo de vida de una variable, se liberará la memoria a la que apunta. JS tiene dos tipos de variables, variables locales y variables globales. Las variables locales tienen un efecto en su función actual. Cuando finaliza la función, la memoria de variables existirá hasta que se cierre el navegador.
3. Hay dos métodos de recolección de basura js: limpieza de marcas y recuento de referencias.
Barrido de marcas: la mayoría de los navegadores utilizan este tipo de recolección de basura. Cuando una variable ingresa al entorno de ejecución (declara la variable), el recolector de basura marca la variable. Cuando la variable sale del entorno, se marca nuevamente y luego se elimina.
Recuento de referencias: este método suele provocar pérdidas de memoria, principalmente en navegadores de versiones inferiores. Su mecanismo es rastrear el número de referencias a un determinado valor. Cuando se declara una variable y se asigna un tipo de referencia a la variable, el número de referencias aumenta en 1. Cuando la variable apunta a otra, el número de referencias. se reduce en 1. Cuando es 0, se inicia el mecanismo de reciclaje.
27. Mejora progresiva y degradación elegante.
La mejora progresiva crea páginas para navegadores de versión baja para garantizar las funciones más básicas y luego mejora los efectos, las interacciones y agrega funciones adicionales para los navegadores de versión alta para lograr una mejor experiencia de usuario. Degradación elegante: cree una funcionalidad completa desde el principio y luego hágala compatible con navegadores de versiones anteriorespreguntas de la entrevista vue
1. Ventajas de la vista
Ligero, rápido, fácil de aprender, de bajo acoplamiento, reutilizable y de desarrollo independienteLa documentación está completa y la documentación está en chino.
2. El componente principal de Vue pasa datos a los componentes secundarios
accesorios3. Los componentes secundarios pasan eventos a los componentes principales.
$emitir4. Puntos comunes y diferencias entre las instrucciones v-show y v-if
Puntos similares: ambos pueden controlar la visualización y ocultación de elementos DOM.
La diferencia: v-show solo cambia el atributo de visualización, el elemento dom no desaparece y no es necesario volver a renderizar la página al cambiar.
v-if elimina directamente el elemento dom de la página. Cambiar nuevamente requiere volver a representar la página.
5. Cómo hacer que CSS solo funcione en el componente actual
alcance6. ¿Cuál es la función de <keep-alive></keep-alive>?
Se utiliza principalmente para almacenar en caché componentes que deben cambiarse con frecuencia sin volver a representar la página.7. Cómo obtener dom
Agregue ref = 'refname' al elemento dom y luego obtenga el elemento dom a través de esto.$refs.refname
8. Nombra varias instrucciones en Vue y su uso.
modelo v
v-encendido
v-html
texto v
v-una vez
v-si
v-show
9. ¿Qué es vue-loader? ¿Para qué se utiliza?
Un cargador de archivos vue que convierte plantilla/js/estilo en módulos js
Propósito: js puede escribir es6 y estilos de estilo
10. ¿Por qué utilizar la clave?
Agregue una clave como identificador único para cada elemento DOM. El algoritmo de diferenciación puede identificar correctamente este nodo y acelerar la representación de la página.11. axios e instalación?
El complemento axios es necesario cuando se utiliza ajax en un proyecto vue
Método de descarga cnpm install axios --save
12. Uso del modelo v
v-model se utiliza para el enlace bidireccional de formularios y puede modificar datos en tiempo real.13. Dígame el uso de cada carpeta y archivo en el directorio src en el proyecto vue.cli.
componentes almacenar componentes
entrada de la página principal de app.vue
entrada del archivo principal index.js
culo almacena archivos de recursos estáticos
14. Describa brevemente los escenarios de uso de calculado y observado respectivamente.
Para usar una oración del sitio web oficial, todo lo que deba calcularse debe usar propiedades calculadas. Cuando varios datos afectan un dato, utilice propiedades calculadas y utilice el carrito de compras de la escena.
Si un cambio de datos afecta a varios datos, utilice el reloj y utilice el cuadro de búsqueda de escenas.
15. ¿Puede v-on monitorear múltiples métodos?
Sí, por ejemplo v-on="onclick,onbure"16. Uso de $nextTick
Después de la modificación en data (), los datos modificados de los datos no se pueden obtener en la página. Cuando se usa $ nextTick, cuando se modifican los datos en los datos, la página se puede representar en tiempo real.17. ¿Por qué los datos del componente Vue tienen que ser una función?
Debido a las características de JavaScript, en el componente, los datos deben existir en forma de función y no pueden ser un objeto.
Los datos del componente se escriben como una función y los datos se definen en forma de valor de retorno de la función, de modo que cada vez que se reutiliza el componente, se devolverán nuevos datos, lo que equivale a que cada instancia de componente tenga la suya propia. espacio privado de datos, y sus valores Responsable de mantener los datos de forma individualizada sin causar confusión. Si se escribe simplemente en forma de objeto, todas las instancias de componentes comparten los mismos datos, por lo que si se cambia una, todas se modificarán.
18. Comprensión del marco progresista
Abogar por lo menos
Se pueden seleccionar diferentes niveles según las diferentes necesidades.
19. ¿Cómo implementa Vue el enlace de datos bidireccional?
El enlace de datos bidireccional de Vue se implementa mediante el modo de secuestro, combinación y publicación-suscripción de datos. Cuando los datos cambian, la vista cambia en consecuencia. .
Núcleo: con respecto al enlace de datos bidireccional de vue, su núcleo es el método Object.defineProperty ()
20. Diferencias y desventajas entre aplicaciones de una sola página y aplicaciones de varias páginas
Una aplicación de una sola página (SPA), en términos sencillos, se refiere a una aplicación con una sola página principal. El navegador carga todos los js, html y css desde el principio. Todo el contenido de la página está contenido en esta página principal. Pero al escribir, todavía se escribe por separado, y luego, al proteger, el programa de enrutamiento se carga dinámicamente, salta una página y solo se actualizan los recursos locales. Se utiliza principalmente en PC.
Varias páginas (MPA) significa que hay varias páginas en una aplicación y toda la página se actualiza cuando salta la página.
Ventajas de una sola página: la experiencia del usuario es buena y rápida, y los cambios de contenido no requieren recargar toda la página. En base a esto, spa ejerce menos presión sobre el servidor y la parte posterior está separada, y el efecto de la página será. enfriador.
Desventajas de una sola página: no es propicio para el SEO; la navegación no está disponible. Si debe navegar, debe realizar el avance y el retroceso usted mismo. La primera vez lleva mucho tiempo cargar; la complejidad de la página aumenta mucho.
21. ¿Por qué es necesario escribir clave en el componente de lista en el proyecto Vue y cuál es su función? La clave es la identificación única proporcionada a cada vnode. Puede confiar en la clave para obtener el nodo vnode correspondiente en oldVnode de manera más precisa y rápida.
Es más preciso porque con la clave, no hay reutilización en el lugar. En la misma función de nodo a.key === b.key, se puede evitar la reutilización en el lugar. Entonces será más preciso. Es más rápido utilizar la unicidad de la clave para generar un objeto de mapa para obtener el nodo correspondiente, que es más rápido que el método transversal.22. ¿Cuál es el orden de ejecución de los enlaces del ciclo de vida de los componentes principales y secundarios?
Proceso de renderizado de cargapadre antes de Crear -> padre creado -> padre antes de Montar -> hijo antes de Crear -> hijo creado -> hijo antes de Montar -> hijo montado -> padre montado
Proceso de actualización de subcomponentesPadre antes de la actualización -> Niño antes de la actualización -> Niño actualizado -> Padre actualizado
Proceso de actualización del componente principalpadre antes de actualizar -> padre actualizado
proceso de destrucciónpadre antes de destruir -> hijo antes de destruir -> hijo destruido -> padre destruido
23. ¿Cuénteme sobre su comprensión de nextTick? Cuando modifica el valor de los datos y luego obtiene inmediatamente el valor del elemento dom, no puede obtener el valor actualizado. Debe usar la devolución de llamada $nextTick para permitir que el valor de los datos modificados se represente y actualice en el elemento dom antes de obtenerlo correctamente. .
24. ¿Por qué los datos del componente vue tienen que ser una función? Debido a las características de JavaScript, en el componente, los datos deben existir en forma de función y no pueden ser un objeto. Los datos del componente se escriben como una función y los datos se definen en forma de valor de retorno de la función, de modo que cada vez que se reutiliza el componente, se devolverán nuevos datos, lo que equivale a que cada instancia de componente tenga la suya propia. Espacio privado de datos. Ellos únicamente son responsables de mantener sus propios datos sin causar confusión. Si se escribe simplemente en forma de objeto, todas las instancias de componentes comparten los mismos datos, por lo que cambiar una de ellas cambiará todas.
25. La diferencia entre vue y jQuery. jQuery usa el selector ($) para seleccionar objetos DOM y realizar operaciones como asignación, adquisición de valores, enlace de eventos, etc. De hecho, la única diferencia con el HTML nativo es que puede ser más conveniente. seleccionar y operar objetos DOM, mientras que los datos y la interfaz van juntos. Por ejemplo, si necesita obtener el contenido de la etiqueta: $("lable").val();, aún depende del valor del elemento DOM. Vue separa completamente los datos y la vista a través de objetos de Vue. Para operar con datos, ya no es necesario hacer referencia al objeto DOM correspondiente. Se puede decir que los datos y la Vista están separados entre sí a través del objeto Vue, el vm. Este es el legendario MVVM.
26. La diferencia entre eliminar y Vue.delete al eliminar una matriz. Eliminar solo cambia los elementos eliminados a vacíos/indefinidos. Los valores clave de otros elementos permanecen sin cambios. Vue.delete elimina directamente la matriz y cambia el valor clave de la matriz.
27. Cómo resolver la carga lenta de la primera pantalla del SPA instalando los complementos necesarios para la carga diferida dinámica y utilice recursos CDN.
28. ¿El proyecto Vue incluye un archivo js, un archivo css o varios archivos? Según la especificación de andamiaje vue-cli, un archivo js y un archivo CSS.
29. Métodos para activar actualizaciones de vista cuando vue actualiza una matriz push(); pop(); unshift();
30. ¿Cuál es el ciclo de vida de vue? ¿Qué hace? Cada instancia de Vue debe pasar por una serie de procesos de inicialización cuando se crea; por ejemplo, necesita configurar el monitoreo de datos, compilar plantillas, montar la instancia en el DOM y actualizar el DOM cuando los datos cambian, etc. Al mismo tiempo, durante este proceso también se ejecutarán algunas funciones llamadas enlaces de ciclo de vida, lo que brinda a los usuarios la oportunidad de agregar su propio código en diferentes etapas.
31. ¿Qué ganchos se activarán cuando la página se cargue por primera vez? antes de crear, creado, antes de montar, montado
32. Vue generalmente obtiene datos en los que se crea la función de período antes de montar Mount
33. La diferencia entre creado y montado: creado: llamado antes de que la plantilla se represente en html, es decir, ciertos valores de atributos generalmente se inicializan y luego se representan en una vista. montado: se llama después de que la plantilla se representa en HTML, generalmente después de que se completa la página de inicialización, y luego realiza algunas operaciones requeridas en el nodo DOM del HTML.
34. La comprensión del ciclo de vida de Vue se divide en 8 etapas: antes/después de la creación, antes/después de la carga, antes/después de la actualización y antes/después de la destrucción. Antes/después de la creación: en la etapa beforeCreated, el elemento de montaje $el y los datos del objeto de datos de la instancia de vue no están definidos y no se han inicializado. En la fase de creación, los datos del objeto de datos de la instancia de vue están disponibles, pero $el no. Antes/después de la carga: en la etapa beforeMount, $el y los datos de la instancia de vue se inicializan, pero el nodo dom virtual anterior todavía está montado y data.message no se ha reemplazado. En la fase de montaje, la instancia de vue se monta y data.message se procesa correctamente. Antes/después de la actualización: cuando los datos cambian, se activarán los métodos beforeUpdate y actualizado. Antes/después de la destrucción: después de ejecutar el método de destrucción, los cambios en los datos ya no activarán la función periódica, lo que indica que la instancia de Vue ha liberado el monitoreo de eventos y el enlace al DOM, pero la estructura DOM aún existe.
35. ¿Qué es vuex? Gestión estatal en el marco vue.
36. ¿Cuáles son los atributos de vuex? Hay cinco tipos: estado, captador, mutación, acción, estado del módulo: captadores de datos básicos (ubicación de almacenamiento de la fuente de datos): mutaciones de datos derivadas de datos básicos: métodos para enviar datos modificados, sincronización. acciones: como un decorador, envolviendo mutaciones para que puedan ser asincrónicas. módulos: Modular Vuex
37. depósito de la familia vue vue-cli, vuex, vueRouter, Axios
38. ¿Cuáles son los comandos npm que se usan comúnmente en proyectos vue-cli?
npm install es el comando para descargar el paquete de recursos node_modules. npm run dev es el comando npm para iniciar el entorno de desarrollo vue-cli. npm run build vue-cli es el comando npm para generar los recursos de implementación del entorno de producción. El informe se utiliza para ver los archivos de recursos de implementación del entorno de producción vue-cli tamaño del comando npm.39. Por favor, dígame el propósito de cada carpeta y archivo en el proyecto vue-cli.
La carpeta de compilación almacena algunas configuraciones iniciales del paquete web. La carpeta de configuración guarda algunas configuraciones de inicialización del proyecto. node_modules es el módulo del que depende el proyecto cargado por npm. El directorio src es el directorio que queremos desarrollar: los activos se usan para colocar los componentes de la imagen. .vue es el archivo de entrada del proyecto main.js del archivo principal.40. ¿Cuál es la diferencia entre v-if y v-show?
Lo que tienen en común: todos muestran dinámicamente elementos DOM. Diferencias: v-if agrega o elimina dinámicamente elementos DOM en el árbol DOM v-show controla la visualización y la ocultación configurando el atributo de estilo de visualización del elemento DOM. si los conmutadores tienen un proceso de compilación/desinstalación parcial, destruya y reconstruya adecuadamente los detectores de eventos internos y los subcomponentes durante el proceso de conmutación. v-show es solo un simple consumo de rendimiento de conmutación basado en css v-if tiene un costo de conmutación más alto que v-show tiene. un costo de renderizado inicial más alto. El escenario v-if es adecuado para condiciones de operación que es poco probable que cambien. v-show es adecuado para cambios frecuentes.41. ¿Cuáles son las prioridades de v-for y v-if? Cuando v-for y v-if se usan al mismo tiempo, tienen una prioridad para ejecutarse uno tras otro. if, lo que significa que v-for tiene mayor prioridad que v-if. El juicio de v-if se llama cada vez en cada asignación de bucle, por lo que no se recomienda utilizar v-if y v-for al mismo tiempo. en la misma etiqueta.
42. ¿Modificadores de uso común en modificadores de eventos?
.stop evita que los eventos continúen propagándose.prevent evita el comportamiento predeterminado de las etiquetas.capture utiliza el modo de captura de eventos, es decir, los eventos desencadenados por el elemento en sí se procesan aquí primero y luego se entregan a los elementos internos para su procesamiento.solo uno mismo cuando event.target es el elemento actual La función del controlador se activa cuando el evento Once solo se activará una vez. Pasivo le dice al navegador que no desea evitar el comportamiento predeterminado del evento.Modificadores para el modelo v
.lazy usa este modificador para sincronizar nuevamente en el evento de cambio de número, convierte automáticamente el valor ingresado por el usuario en un tipo numérico y filtra automáticamente los espacios finales ingresados por el usuario.Modificador de eventos de teclado
.enter.tab.delete (captura las teclas "eliminar" y "retroceso").esc.space.up.down.left.rightmodificador del sistema
.ctrl.alt.shift.metaModificador del botón del mouse
.izquierda.derecha.medio43. ¿Cómo utilizar objetos de evento en eventos vue?
Obtenga el objeto de evento y pase $event como parámetro del método. Tenga en cuenta que el símbolo $ se utiliza en el evento <button @click="Event($event)">Objeto de evento</button>44. ¿Cuáles son los métodos de transferencia del valor de los componentes?
Pasar de padre a hijo: el componente hijo recibe el valor del atributo xx pasado por el componente padre a través de props['xx'] Pasar de hijo a padre: el componente hijo lo pasa a través de this.$emit('fnName',value) y el componente principal recibe el evento fnName Otras formas de recibir devoluciones de llamada: creando un bus y pasando valores usando Vuex45. ¿Cómo llama un componente secundario al componente principal en Vue?
Llame directamente al método del componente principal a través de this.$parent.event en el componente secundario. Utilice $emit() en el componente secundario para activar un evento en el componente principal, y el componente principal puede escuchar este evento. El componente principal pasa el método al componente secundario y el método se llama directamente en el componente secundario.46. ¿Cómo hacer que CSS solo funcione en el componente actual? Agregue alcance delante del estilo en el componente
47. ¿Cómo obtener dom?ref="domName" Uso: this.$refs.domName
48. salto de enrutamiento vue
(1) Enlace de enrutador de navegación declarativa
Sin parámetros: // Nota: Si el enlace en router-link comienza con '/', comienza desde la ruta raíz. Si no comienza con '/', comienza desde la ruta actual. <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> // Tanto el nombre como la ruta son aceptables. Se recomienda utilizar el nombre. con parámetros:< enlace-router :to="{nombre:'casa', parámetros: {id:1}}"><router-link :to="{nombre:'casa', consulta: {id:1} }"> < router-link :to="/home/:id"> //Transferir objeto<router-link :to="{name:'detail', consulta: {item:JSON.stringify(obj)}} "></ enlace-enrutador>(2) esto.$router.push()
Sin parámetros: this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'})parámetro de consulta 1. Configuración de enrutamiento: nombre: 'home', ruta: '/home' 2. Salto: this.$router.push({name:'home',query: {id:'1'}})this.$ router.push ({ruta:'/home', consulta: {id:'1'}})3. Obtener parámetros parámetros html: $route.query.idscript parámetros: this.$route.query.idparams parámetros 1. Configuración de enrutamiento: nombre : 'casa', ruta: '/casa/:id' (o ruta: '/casa:id') 2. Salto: this.$router.push({nombre:'casa', parámetros: {id:'1 '}}) Nota: // Solo puede usar el nombre para hacer coincidir rutas y no puede usar la ruta // parámetros para pasar parámetros (similar a la publicación) Ruta de configuración de enrutamiento: "/home/:id" o ruta: "/home :id "de lo contrario, el parámetro de actualización desaparece 3. Obtenga el parámetro parámetro html: $route.params.id parámetro de script: this.$route.params.id Pase el parámetro directamente a través de la ruta 1. Configuración de ruta: nombre: 'home', ruta: '/home/:id' 2. Saltar: this.$router.push({path:'/home/123'}) o: this.$router.push('/home/123') 3. Obtener parámetros: La diferencia entre this.$route.params.idparams y query. Query es similar a get. Después del salto, la URL de la página se unirá con parámetros, similar a ?id=1. Los que no son importantes se pueden pasar de esta manera, las contraseñas y similares aún usan parámetros, y la identificación seguirá ahí cuando se actualice la página. Los parámetros son similares a los de publicación. Los parámetros no se unirán después de la URL de la página después del salto.(3) esto.$router.replace()
El uso es el mismo que el anterior.(4) esto.$router.go(n)
Saltar n páginas hacia adelante o hacia atrás, n puede ser un número entero positivo o negativola diferencia:
this.$router.push salta a la ruta URL especificada y agrega un registro en la pila del historial. Al hacer clic hacia atrás, volverá a la página anterior. this.$router.replace salta a la ruta URL especificada, pero no habrá ningún registro en la ruta. pila de historial. Grabar, haga clic en Volver para saltar a la página anterior (es decir, reemplazar directamente la página actual) this.$router.go(n) Saltar hacia adelante o hacia atrás n páginas, n puede ser un entero positivo o negativo49. El principio del enlace bidireccional de Vue.js. Vue.js 2.0 utiliza el secuestro de datos (modo Proxy) combinado con el modo editor-suscriptor (modo PubSub) para secuestrar los establecedores y captadores de cada propiedad a través de Object.defineProperty(). Publique mensajes para los suscriptores cuando los datos cambien y active las devoluciones de llamadas de escucha correspondientes.
Cada instancia de componente tiene una instancia de programa de vigilancia correspondiente, que registra las propiedades como dependencias durante la representación del componente. Más tarde, cuando se llama al definidor de dependencias, se notificará al observador para que vuelva a calcular, lo que provocará que se actualicen sus componentes asociados.
Vue.js 3.0, abandonó Object.defineProperty y utilizó el proxy nativo ES6 más rápido (interceptor de objetos de acceso, también llamado proxy)
50. La diferencia entre Computed y Watch
atributo calculado calculado: depende de otros valores de atributo, y el valor calculado se almacena en caché Solo cuando el valor del atributo del que depende cambia, el valor calculado se volverá a calcular la próxima vez que se obtenga el valor calculado.
Mira el oyente: es más una función de observación, sin almacenamiento en caché, similar a la devolución de llamada de ciertos datos.
Escenarios de aplicación:
Cuando necesitamos realizar cálculos numéricos y confiar en otros datos, se debe usar calculado, porque la característica de caché de calculado puede usarse para evitar recalcular cada vez que se obtiene el valor. El reloj debe usarse cuando necesitemos realizar operaciones asíncronas o costosas cuando cambie los datos. Resultado final. Estas son cosas que las propiedades calculadas no pueden hacer. Si múltiples factores afectan una pantalla, use calculado;La diferencia entre calculado y métodos
Calculado: las propiedades calculadas se almacenan en caché en función de sus dependencias y solo se reevaluarán cuando cambien sus dependencias asociadas.51. Filtrar
Use filtros en Vue para filtrar (formatear) los filtros. Pantalla.52. Axios es una biblioteca HTTP fácil de usar, concisa y eficiente.
53. ¿Qué es Sass? ¿Cómo instalarlo y usarlo en Vue? Sass es un lenguaje precompilado CSS.
Use NPM para instalar cargadores (Sass-Loader, CSS-Loader, etc. Cargadores). Configure el cargador SASS en webpack.config.js. 54. Vue.js Page Flashes Vue.js proporciona una directiva V-C-CLOAK, que permanece en el elemento hasta que la instancia asociada finaliza la compilación. Cuando se usa con CSS, esta directiva oculta las etiquetas no compiladas hasta que se compila la instancia. El uso es el siguiente. [V-CLOAK] {Display: None;55. Cómo resolver el problema de la estructura jerárquica de datos demasiado profundo. Puede usar VM. $ SET define manualmente una capa de datos: VM. $ Set ("Demo", ABCD)
56. Vue Instrucciones comunes
V-Model se usa principalmente para elementos de formulario para implementar la unión de datos bidireccional (igual que el modelo NG en angular) Función de enlace dinámico de unión a V: Cambiar oportunamente los datos en la página V-ON: Click vincula la función a la etiqueta , que se puede abreviar como @, por ejemplo, para unir una función de clic, la función debe escribirse en los métodos v-For formato: v-For = "Nombre de campo en (de) Array JSON" Array o JSON (igual que ng-repal en angular) contenido de visualización de show en V (igual que ng-show en angular) contenido de ocultación de escondite v (igual que ng escondido en angular) v-if show and escondar (la eliminación y la adición de elementos dom son los mismos Como ng-if en angular, el valor predeterminado es falso) v- else-if debe usarse junto con v-if v-else debe usarse junto con v-if y no se puede usar solo, de lo contrario, un error será Error de compilación de plantilla informada text v-texto rojo: "isred"}, {azul: "isBlue"}] 'V-Once solo renderiza una vez al ingresar a la página ya no representa V-Cloak para evitar que el parpadeo de V-PRE salga los elementos dentro de la etiqueta en su lugar en su lugar en su lugar57. La diferencia entre $ ruta y $ enrutador
$ ruta es un "objeto de información de enrutamiento", que incluye ruta, parámetros, hash, consulta, trama completa, coincidencia, nombre y otros parámetros de información de enrutamiento. $ Router es el objeto "instancia de enrutamiento" que incluye métodos de salto de enrutamiento, funciones de gancho, etc.58. Cómo entender el flujo de datos único de Vue
Los datos siempre se pasan del componente principal al componente infantil. Esto evitará que el componente infantil cambie accidentalmente el estado del componente principal, lo que hace que el flujo de datos de su aplicación sea difícil de entender. Nota: El uso directo de V-Modelo para unir los accesorios que se transmiten del componente principal al componente infantil es una forma de escritura irregular, y el entorno de desarrollo informará una advertencia. Si realmente desea cambiar el valor de los accesorios del componente principal, puede definir una variable en los datos, inicializarla con el valor de proporción y luego usar $ emit para notificar al componente principal para modificarlo.59. ¿Qué es Virtual DOM? ¿Cuáles son los pros y los contras? Porque manipular el DOM en el navegador es costoso. Las operaciones frecuentes en el DOM causarán ciertos problemas de rendimiento. Esta es la razón para la creación de DOM virtual. El DOM virtual de Vue2 se basa en la implementación del Snabbdom de la biblioteca de código abierto. La esencia del DOM virtual es usar un objeto JS nativo para describir un nodo DOM, que es una capa de abstracción del DOM real.
Ventajas: 1. Rendimiento garantizado Límite inferior: El DOM virtual del marco debe adaptarse a cualquier operación que pueda generar la API de la capa superior. ; pero en comparación con el rendimiento de la operación DOM de DOM es mucho mejor, por lo que el DOM virtual del marco puede al menos garantizar que aún puede proporcionar un buen rendimiento sin optimización manual, lo que no solo garantiza el límite inferior de rendimiento. 2. No es necesario operar manualmente el DOM: no necesitamos operar manualmente el DOM. De manera predecible, lo que mejora enormemente la eficiencia. 3. Crossplatform: Virtual DOM es esencialmente un objeto JavaScript, y DOM está fuertemente relacionado con la plataforma. Desventajas: 1. Incapacidad para realizar la optimización final: aunque la optimización razonable Virtual DOM + es suficiente para satisfacer las necesidades de rendimiento de la mayoría de las aplicaciones, en algunas aplicaciones con requisitos de rendimiento extremadamente altos, Virtual DOM no puede realizar una optimización final dirigida. 2. Al hacer una gran cantidad de DOM por primera vez, será más lenta que la inserción innerhtml debido a una capa adicional de cálculo DOM.60. ¿Cómo resolver el problema de la pérdida de datos cuando la página Vuex se actualiza?
Se requiere una persistencia de datos Vuex. Se recomienda utilizar el complemento Vuex-Persist, que es un complemento para el almacenamiento persistente de Vuex. No necesita acceder manualmente al almacenamiento, pero guardar el estado directamente en cookies o LocalStorage.61. ¿Por qué Vuex necesita dividirse en módulos y agregar espacios de nombres?
Módulo: debido al uso de un solo árbol de estado, todos los estados de la aplicación se concentrarán en un objeto relativamente grande. Cuando una aplicación se vuelve muy compleja, los objetos de la tienda pueden ser bastante hinchados. Para resolver los problemas anteriores, Vuex nos permite dividir la tienda en módulos. Cada módulo tiene su propio estado, mutación, acción, getter e incluso submódulos anidados.
Espacio de nombres: Por defecto, las acciones, las mutaciones y los getters dentro de un módulo están registrados en el espacio de nombres global; esto permite que múltiples módulos respondan a la misma mutación o acción. Si desea que su módulo tenga un mayor grado de encapsulación y reutilización, puede convertirlo en un módulo con nombre agregando nombres con el puesto: True. Cuando se registra un módulo, todos sus obtenedores, acciones y mutaciones se nombrarán automáticamente de acuerdo con la ruta registrada por el módulo.
62. ¿Qué patrones de diseño se usan en Vue?
1. Modo de fábrica: pase los parámetros para crear una instancia de DOM virtual y devuelva el VNode de la etiqueta básica y el componente VNode de acuerdo con diferentes parámetros. 2. Modo Singleton: todo el programa tiene una y solo una instancia del método de registro de complemento de Vuex y Vue-Router determina si la instancia existe en el sistema y la devuelve directamente. 3. Publicar modelo de suscripción. (Mecanismo de eventos VUE) 4. Patrón de observador. (Principio de datos receptivo) 5. Modo decorador (uso de @Decorator) 6. Modo de estrategia de estrategia significa que el objeto tiene un cierto comportamiento, pero en diferentes escenarios, el comportamiento tiene diferentes soluciones de implementación, como la estrategia de fusión de opciones.63. ¿Qué optimizaciones de rendimiento ha hecho para Vue? Aquí solo enumeramos la optimización de rendimiento para Vue.
No haga que la jerarquía de objetos sea demasiado profunda, de lo contrario el rendimiento será pobre. No coloque datos que no requieran capacidad de respuesta (puede usar Object.Free () para congelar los datos) Una clave al atravesar, y la clave es el mejor valor de identificación, y evite usar V -if al mismo tiempo, la lista de big data y la optimización del rendimiento de la tabla: lista virtual/tabla virtual para evitar fugas internas, destruir variables globales y tiempo después de la destrucción de componentes, Imagen de enrutamiento de carga perezosa, carga de carga perezosa de carga asíncrona complementada de terceros a la demanda Uso apropiado de componentes de caché de mantenimiento de alas para cargar, anti-agitación y estrangulamiento, reproducción del lado del servidor o RSSR previa64. Principio de Vue. Método del conjunto: Modificar Vue no activará la actualización de la vista en dos casos.
1. Agregue nuevos atributos a la instancia después de que se cree la instancia (agregue atributos al objeto receptivo) 2. Cambie directamente el subíndice de matriz para modificar el valor de la matriz. El principio de vue.set o $ set es el siguiente. Al agregar un atributo inexistente a un objeto, el nuevo atributo primero se rastreará de manera contenida y luego el observador recopilado por el DEP del objeto OB se activará para actualizar. la matriz en sí para actualizar la matriz.65. Escenarios de uso y principios de componentes funcionales.
1. Los componentes funcionales deben especificar Funcional: Verdadero al declarar el componente. La función y las propiedades calculadas no se pueden usar. referenciado externamente a través de la referencia, el referenciado real es htmlelement6. $ attrs y montado automáticamente.Ventajas: 1. Dado que los componentes de la función no necesitan ser instanciados, son estatales y no tienen un ciclo de vida, el rendimiento de representación es mejor que los componentes ordinarios.
Escenarios de uso:
Un componente de pantalla simple, utilizado como componente de contenedor como Router-View, es un componente funcional. "Componente de orden superior": se utiliza para aceptar un componente como parámetro y devolver un componente envuelto. El código relevante es el siguiente:
if (istrue (ctor.options.functional)) {// aquellos con atributos funcionales son componentes funcionales return createFunctionalComponent (ctor, propsdata, data, context, niños);} const oyentes = data.on; ;66. ¿Por qué los componentes infantiles no pueden modificar el accesorio aprobado por el componente principal? Todos los accesorios forman un enlace unidireccional hacia abajo entre sus accesorios para padres e hijos: las actualizaciones del accesorio principal fluirán hacia abajo al componente infantil, pero no viceversa. Esto evitará que el componente infantil cambie accidentalmente el estado del componente principal, lo que hace que el flujo de datos de su aplicación sea difícil de entender.
67. Creación del proyecto VUE. Configuración de enrutamiento, configuración del entorno, transferencia de valor de componente, etc.
CSS, preguntas de la entrevista HTML
¿Cuál es la diferencia entre HTML y HTML5?
Hay tres diferencias principales:
1. Diferencia de declaración de documentos
HTML: lenguaje de marcado de hipertexto, un lenguaje de tipo texto sin formato.
HTML5.0: El documento establece que HTML5 es fácil de escribir, optimizado y propicio para la lectura y el desarrollo rápidos por parte de los programadores.
2. Diferencias en la semántica estructural
html: etiquetas que no reflejan la semántica estructural, como: <div id = "nav"> </div>
HTML5: Se agregaron muchas etiquetas semánticas, como: <artículo>, <Scuente>, <audio>, <bdi> ... ...
3. Diferencias en el dibujo
HTML: se refiere a gráficos vectoriales escalables, los gráficos basados en vectores utilizados para definir la web.
HTML5: El elemento Canvas de HTML5 usa scripts (generalmente usando JavaScript) para dibujar imágenes en la página web y puede controlar cada píxel del lienzo.
¿Qué es un modelo de caja?
Dividiremos una caja en varias partes: contenido, relleno, borde y margen.¿Cómo entender la semántica HTML5?
Encabezado de etiqueta semántica HTML - Título NAV - Artículo de navegación - Sección de artículo - Sección o párrafo Dejando de lado - Fuente de la barra lateral - pie de página¿Cuáles son los beneficios de la semántica?
En ausencia del código CSS, la estructura de contenido y la estructura del código pueden presentarse bien (de modo que los no técnicos puedan entender el código) para mejorar la experiencia del usuario. beneficioso para el SEO. La semántica puede establecer una mejor conexión con los motores de búsqueda. (Navegador) 1. Cookie (1) Se utiliza para la comunicación entre el cliente y el servidor (2) pero tiene la función del almacenamiento local, por lo que está "prestado" (3) document.cookie = ... solo obtenga y modifíquelo (4) desventajas de las cookies para el almacenamiento ① La capacidad de almacenamiento es demasiado pequeña, solo 4 kb ② Todas las solicitudes HTTP se transportan, lo que afectará la eficiencia de la adquisición de recursos ③ La API es simple y debe estar encapsulada para usar el documento. Cookie 2. LocalStorage, SessionStorage (1) Especialización HTML5 diseñada para el almacenamiento, la capacidad máxima es 5m (2) la API es simple y fácil de usar (3) lcoalstorage.setitem (clave, valor); localstorage.getitem (clave); (4) En el modo oculto de iOS Safari: LocalStorage.getItem informará un error, las sugerencias unificadas de la encapsulación de la captura de trY 3. SessionStorage se usa para almacenar localmente en una sesión solo se puede acceder a las páginas en la misma sesión en la misma sesión. y los datos serán destruidos cuando finalice la sesión. Por lo tanto, sessionStorage no es un almacenamiento local persistente, solo un almacenamiento a nivel de sesión. LocalStorage se utiliza para el almacenamiento local persistente. ¿Cuáles son los núcleos comunes del navegador? ** Trident Kernel: ** significa que el navegador es IE Browser, por lo que el núcleo Trident también se llama el núcleo E.** Gecko Core: ** Representa que el navegador es el navegador Firefox. El núcleo Gecko es de código abierto, y su mayor ventaja es que puede ser multiplataforma.
WebKit: WebKit Kernel: El navegador representativo es Safari (navegador de Apple) y una versión inferior de Google Chrome, que es un proyecto de código abierto.
** Presto Core: ** Representa el navegador de ópera del navegador (traducido en chino como "navegador abierto"). ., El núcleo ha sido desaprobado.
** Núcleo de parpadeo: ** Desarrollado por Google y Opera, lanzado en abril de 2013, el núcleo de Chrome actual es parpadeo.
¿Habla sobre su comprensión de los estándares web y W3C?
Estándares web:
Los estándares web se dividen principalmente en tres partes: estructura, rendimiento y comportamiento.
Estructura: se refiere a las etiquetas que generalmente escribimos en el cuerpo, que se componen principalmente de etiquetas HTML
Rendimiento: se refiere a estilos de etiqueta HTML más ricos, principalmente compuestos de estilos CSS
Comportamiento: se refiere a la interacción entre la página y el usuario, principalmente compuesto por parte de JS
W3C:
W3C ha presentado requisitos estandarizados para los estándares web, a saber, las especificaciones de código.
requisitos estructurales
1. Las letras de la etiqueta deben ser en minúsculas
2. La etiqueta debe cerrarse
3. Las etiquetas no pueden anidarse arbitrariamente
Requisitos de rendimiento y comportamiento
1. Se recomienda utilizar scripts CSS y JS de enlace externo para lograr la separación de la estructura y el rendimiento, la estructura y el comportamiento, lo que puede mejorar la eficiencia de representación de la página y mostrar el contenido web más rápido.
¿Cómo implementar el diseño sensible al navegador?
Use consultas de medios (@media), use un diseño flexible, use unidades porcentuales, use unidades REM y use unidades VH y HW.¿Comprender los selectores y prioridades de CSS?
Selectores CSS de uso común
Selector de identificación, selector de clases, selector de etiquetas, selector de atributos, selector de pseudo-clase, selector descendiente
división de peso
Al mismo nivel:
! IMPORTANTE> Estilo en línea> Selector de identificación> Selector de clases> (selector de etiquetas, selector de pseudo-clase, selector de atributos)
En diferentes niveles:
Normalmente, cuanto mayor sea el valor de peso, mayor será la prioridad, pero no ha habido una división de valor de peso específica, por lo que en la mayoría de los desarrollos actuales, cuanto más profundo sea el nivel, mayor será la prioridad.
¿Hables sobre tu comprensión de la reflujo y el redibujado?
¿Qué es el reflujo?
El reflujo ocurre cuando el ancho, la altura, el diseño, la visualización o la ocultación de un elemento en sí, o la estructura del texto dentro del elemento cambia, lo que hace que la página deba reconstruir.¿Qué es la repinción?
El redibujado ocurre cuando el ancho, la altura, el diseño, la pantalla o la ocultación de un elemento en sí no han cambiado, pero solo el estilo de apariencia del elemento ha cambiado.
¿Cuándo tendrá lugar el reflujo? Cuando se agrega o elimina un elemento DOM visible, la posición del elemento cambia, el tamaño del elemento cambia, el contenido cambia y cuando la página se representa primero.
¿Cuándo se llevará a cabo la repinta?
Lista de algunos estilos CSS relacionados: color, fondo, tamaño de fondo, visibilidad, sombra de caja
¿Cuál es la diferencia entre opacidad: 0, Visibilidad: Oculta y Pantalla: Ninguno?
Opacidad = 0, el elemento está oculto, pero el diseño de la página no se cambiará.
Visibilidad = Hidden, el elemento está oculto, pero el diseño de la página no se cambiará, pero los eventos unidos al elemento no se activarán.
Display = Ninguno oculta el elemento y cambia el diseño de la página.
preprocesador CSS
menos¿Cuál es la diferencia entre el título y el ALT de <IMG>?
Por lo general, cuando el mouse se desliza sobre un elemento, se muestra ALT. Puede mejorar la accesibilidad de las imágenes.¿Cuáles son los elementos en línea y los elementos de nivel de bloque? ¿A qué elemento pertenece IMG?
Dirección - Dirección BLOCKQuote - Centro de referencia de bloques - Alineación central Bloque Dir - Lista de directorio Div - Nivel de bloque de uso común, también la etiqueta principal del diseño CSS DL - Lista de definición Fieldset - Formulario de grupo de control - Formulario interactivo H1 - Cabeza H2 - Subtítulo H3 - Nivel 3 encabezado H4 - nivel 4 encabezado H5 - nivel 5 encabezado H6 - nivel 6 encabezado HR - línea de separador horizontal isindex - menú de indicación de entrada - lista de menú Noframes - marcos contenido opcional, (Muestre esto para navegadores que no admiten marcos) bloque Content Noscript - Contenido opcional de script (este contenido se muestra para navegadores que no admiten el script) OL - Formulario ordenado P - Párrafo pre - Tabla de texto formateado - Tabla UL - Lista desordenada
A - Punto de anclaje ABBR - Acrónimo de abreviatura - Primera letra B - Bold (no recomendado) BDO - Bidi Anular Big - Gran Fuente BR - Línea Break Cite - Código de referencia - Código de computadora (requerido al citar el código fuente) DFN - Define el campo EM - Énfasis en la fuente - configuración de fuente (no recomendada) i - IMG en cursiva - Entrada de imagen - Cuadro de entrada KBD - Define la etiqueta de texto del teclado - etiqueta de la tabla Q - Cita corta S - Subraine (no recomendado) SAMP - Definir código de computadora Seleccionar - Selección del elemento Pequeño y pequeño intervalo de texto de fuente-contenedores en línea de uso común, definiendo bloques dentro de la huelga de texto-subrayado fuerte-énfasis audaz Sub-subíndice SUP-Superscript TextAREA-Cuadro de entrada de texto de múltiples líneas TT-Texto de teletipo U-Subsensor
IMG es un elemento de reemplazo en línea y tiene el mismo efecto que un elemento de bloque
La diferencia entre lectura y discapacitado en formularios
Puntos comunes: evita que los usuarios cambien el contenido en el formulario. No se puede modificar. El cuadro de texto establecido en discapacitado no puede obtener el enfoque 3. Si el campo del formulario está deshabilitado, el campo no se enviará (valor aprobado en el formulario) y serializado1. Ingrese la URL en el navegador y muestrelo en la página web.
La resolución de dominio inicia un apretón de manos TCP para establecer una conexión TCP. Solicita los recursos en el código HTML.
2. Desventajas de las cookies
Hay un límite para el número máximo de cookies generadas bajo cada nombre de dominio específico. , generalmente no excede los 4095 bytes.
3. Navegadores y núcleos convencionales
Google Chrome: WebKit/Blink Safari: Webkit IE: Trident Firefox: Gecko Opera: Presto/Webkit/Blink
4. La diferencia entre SessionStorage y LocalStorage
SessionStorage se utiliza para almacenar datos localmente en una sesión. localStorage se utiliza para el almacenamiento local persistente, a menos que los datos se eliminen activamente, los datos nunca caducarán.
5. Hable sobre la comprensión de las especificaciones de BFC
BFC es un contexto de formato de bloque, es decir, el contexto de formato. Los efectos de BFC es permitir que los elementos dentro y fuera de BFC interactúen entre sí.
6. Nombra al menos tres formas de reducir el tiempo de carga de la página.
Minimice las solicitudes HTTP repetidas en la página.
7. ¿Cómo optimizar el rendimiento del sitio web?
Para el contenido, reduzca las solicitudes HTTP: fusionar archivos, sprites CSS e imágenes en línea. Use GZIP para componentes. En la parte inferior de la página. Estirar imágenes en HTML.8. ¿Almacenamiento del navegador?
Cuando es transitorio, solo necesitamos almacenar los datos en la memoria, y el almacenamiento persistente solo está disponible en tiempo de ejecución. etc., en http llevado automáticamente, el límite superior del tamaño es 4K, puede establecer el tiempo de vencimiento por usted mismo LocalStorage / Sessionstorage: almacenamiento a largo plazo / cierre y eliminación de ventanas, el límite de tamaño es 4 ~ 5MindexdB Cache Redis distribuido Redis base de datos9. Obtener/publicar?
Get: Cache, la longitud de la solicitud es limitada, se guardará en la historia, sin efectos secundarios (los recursos no se modifican), ideMpotent (el número de solicitudes no tiene nada que ver con los recursos) Publicación de escenario: seguridad, big data, más tipos de codificación10. ¿Problemas de seguridad?
Ataque XSS: Inyecte el código de cookies de código malicioso establecer httponly para escapar del contenido de entrada y el contenido de salida en la página CSRF: falsificación de solicitudes de sitios cruzados, protección: get no modifica los datos y no se accede por sitios web de terceros establecer la cookie del usuario en una lista blanca y no es accedido por la verificación de solicitud de solicitud del sitio web de tercerosOptimización del rendimiento
1. ¿Cuáles son los aspectos de la optimización del rendimiento?
Compresión y fusión de recursos, reduciendo las solicitudes HTTP, la carga asíncrona de código no es-core, utilizando caché del navegador y el uso de CDN para determinar previamente DNS2. Carga asíncrona?
Dynamic Script Carging Deferasync3. ¿Cuáles son las diferencias en los métodos de carga?
El diferencial se ejecuta después de que el HTML se analiza.4. ¿Precaja?
Durante el desarrollo, puede encontrar tal situación. Algunos recursos no necesitan usarse de inmediato, pero desea obtenerlos lo antes posible. La precarga es en realidad una búsqueda declarativa, lo que obliga al navegador a solicitar recursos y no bloquea el evento de Onload. Preparado puede reducir el tiempo de carga de la primera pantalla hasta cierto punto, porque algunos archivos importantes que no afectan la primera pantalla pueden retrasarse en la carga.5. DNS Pre-Resolution?
La resolución DNS también lleva tiempo, y la IP correspondiente al nombre de dominio se puede obtener por adelantado a través de la pre-resolución. <meta http-oquiv = 'x-dns-Prefetch-Control' content = 'on'> <link rel = "dns-prefetch" href = "// yuchengkai.cn"> La etiqueta no se habilitará de forma predeterminada en El protocolo HTTPS prepasado, por lo que Meta debe establecerse manualmente6. La ejecución perezosa? Esta tecnología se puede utilizar para la optimización de la primera pantalla. La ejecución perezosa requiere despertarse, lo que generalmente se puede hacer llamando a un temporizador o evento.
7. La carga perezosa?
El principio de la carga perezosa es cargar solo lo que debe cargarse en un área personalizada (generalmente el área visible, pero también puede ser el área que está a punto de ingresar al área visible). Para las imágenes, primero configure el atributo SRC de la etiqueta de imagen en una imagen de marcador de posición, coloque el recurso de imagen real en un atributo personalizado y al ingresar el área personalizada, reemplace el atributo personalizado con el atributo SRC, de modo que la imagen descargará el recurso , realizando una carga perezosa de la imagen.
La carga perezosa se puede usar no solo para imágenes, sino también para otros recursos. Por ejemplo, el video solo comenzará a reproducirse después de ingresar al área visible, etc.
Reaccionar preguntas de la entrevista
1. ¿Cuándo usar State Manager?
Mirando el proyecto en su conjunto, el uso del usuario es complejo. de múltiples fuentes. Los componentes tienen una cantidad considerable de datos que cambian con el tiempo.2. ¿Cuáles son las características de React?
Utiliza ** DOM virtual ** en lugar de DOM real. Se puede renderizar usando el lado del servidor. Sigue un flujo de datos unidireccional o un enlace de datos3. Enumere algunas de las principales ventajas de React?
Mejora el rendimiento de la aplicación y se puede usar fácilmente en el lado del cliente y el servidor. Reaccionar.4. ¿Qué es JSX?
JSX es corto para JavaScript XML. es un archivo utilizado por React que aprovecha la potencia expresiva y la sintaxis de plantilla tipo HTML de JavaScript. Esto hace que los archivos HTML sean muy fáciles de entender. Este archivo hace que la aplicación sea muy confiable y mejora su rendimiento.5. Dime por qué el navegador no puede leer JSX?
Los navegadores solo pueden manejar objetos JavaScript y no pueden leer JSX en los objetos regulares de JavaScript.所以为了使浏览器能够读取JSX，首先，需要用像Babel 这样的JSX 转换器将JSX 文件转换为JavaScript 对象，然后再将其传给浏览器6、你理解“在React 中，一切都是组件”这句话?
组件是React 应用UI 的构建块。这些组件将整个UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响UI 的其余部分7、 React 中render()的目的?
每个React 组件强制要求必须有一个render()。它返回一个React 元素，是原生DOM 组件的表示。如果需要渲染多个HTML 元素，则必须将它们组合在一个封闭标记内，例如<form>、<group>、<div> 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果8、什么是Props?
Props 是React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据9、React 中的状态是什么？
状态是React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与Props 不同，它们是可变的，并创建动态和交互式组件。可以通过this.state() 访问它们。10、区分状态和Props?
条件StateProps从父组件中接受初始值YesYes父组件可以改变值NoYes在组件中设置默认值NoYes在组件的内部变化YesNo设置子组件的初始值YesYes在子组件的内部改变NoYes11、如何更新组件的状态?
使用this.setState()更新组件的状态12、React 组件生命周期的阶段是什么?
React 组件的生命周期有三个不同的阶段：初始渲染阶段：这是组件即将开始其生命之旅并进入DOM 的阶段。更新阶段：一旦组件被添加到DOM，它只有在prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段卸载阶段：这是组件生命周期的最后阶段，组件被销毁并从DOM 中删除13、你对React 的refs 有什么了解?
Refs 是React 中引用的简写。它是一个有助于存储对特定的React 元素或组件的引用的属性，它将由组件渲染配置函数返回。用于对render()返回的特定元素或组件的引用。当需要进行DOM 测量或向组件添加方法时，它们会派上用场列出一些应该使用refs 的情况?需要管理焦点、选择文本或媒体播放时触发式动画与第三方DOM 库集成14、如何模块化React 中的代码?
可以使用export 和import 属性来模块化代码。它们有助于在不同的文件中单独编写组件15、什么是高阶组件HOC?
高阶组件是重用组件逻辑的高级方法，是一种源于React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为HOC 是“纯（Pure）”组件16、你能用HOC 做什么?
HOC 可用于许多任务:用代码重用，逻辑和引导抽象渲染劫持状态抽象和控制Props 控制17、 React 中key 的重要性是什么?
key 用于识别唯一的Virtual DOM 元素及其驱动UI 的相应数据。它们通过回收DOM 中当前所有的元素来帮助React 优化渲染。这些key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能18、MVC 框架的主要问题是什么?
key 用对DOM 操作的代价非常高程序运行缓慢且效率低下内存浪费严重由于循环依赖性，组件模型需要围绕models 和views 进行创建19、请你解释一下Flux? 
20、你对“单一事实来源”有什么理解
Redux 使用“store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在store 中，并且它们从store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序。21、列出Redux 的组件?
Redux 由以下组件组成:Action 这是一个用来描述发生了什么事情的对象Reducer 这是一个确定状态将如何变化的地方Store 整个程序的状态/对象树保存在Store 中View 查只显示Store 提供的数据22、 Store 在Redux 中的意义是什么?
store 是一个JavaScript 对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此，Redux 非常简单且是可预测的。我们可以将中间件传递到store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过Reducer 返回一个新状态23、 Redux 有哪些优点?
结果的可预测性可维护性服务器端渲染易于测试-24、 什么是React 路由?
React 路由是一个构建在React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这使URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页Web 应用。 React 路由有一个简单的API。25、说说你对React 的渲染原理的理解?
单向数据流。React 是一个MVVM 框架，简单来说是在MVC 的模式下在前端部分拆分出数据层和视图层。单向数据流指的是只能由数据层的变化去影响视图层的变化，而不能反过来（除非双向绑定）数据驱动视图。我们无需关注页面的DOM，只需要关注数据即可渲染过程，生命周期……setState()大部分时候是异步执行的，提升性能。26、React 中三种构建组件的方式?
React.createClass()、ES6 class 和无状态函数。JQuery
说出jQuery中常见的几种函数以及他们的含义是什么? （1）get()取得所有匹配的DOM元素集合； （2）get(index)取得其中一个匹配的元素.index表示取得第几个匹配的元素； （3）append(content)向每个匹配的元素内部追加内容； （4）after(content)在每个匹配的元素之后插入内容； （5）html()/html(var)取得或设置匹配元素的html内容； （6）find(expr)搜索所有与指定表达式匹配的元素； （7）bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数； （8）empty()删除匹配的元素集合中所有的子节点； （9）hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法； （10）attr(name)取得第一个匹配元素的属性值。
jQuery 能做什么？ Get the elements of the page; modify the appearance of the page; change the large content of the page; respond to the user's page operations; add dynamic effects to the page; get information from the server without refreshing the page; simplify common javascript tasks .
如何将一个HTML元素添加到DOM树中的？ 可以通过appendTo()方法在指定的DOM元素末尾添加一个现存的元素或者一个新的HTML元素。
什么是jQuery? jQuer能做什么？ jQuery是一套JavaScript的库，它简化了使用Javascript进行网页特效开发的一些复杂性，提供了对常见任务的自动化和复杂任务的简化
jQuery的作用快速获取文档元素提供漂亮的页面动态效果创建Ajax无刷新网页提供对JavaScript语言的增强增强的事件处理更改网页内容JQuery可以修改网页中的内容,比如更改网页的文本、插入或转网页图像, jQuery简化了原本使用JavaScript代码需要处理的方式。JQuery 的优点1.利用css的选择器提供高速的元素查找行为。 2.提供了一个抽象层来标准化各种常见的任务，可以解决各种浏览器的兼容问题。 3.将复杂的代码简化，提供连缀编程模式，大大简化了代码的操作。
以上就是分享一些值得收藏的精选Web前端面试题（附答案）的详细内容，更多请关注本站其它相关文章！