1. React es una biblioteca de JavaScript para crear interfaces de usuario. Solo proporciona soluciones a nivel de UI. Sigue patrones de diseño de componentes, paradigmas de programación declarativa y conceptos de programación funcional para hacer que las aplicaciones front-end sean más eficientes. 
2. Utilice DOM virtual para operar DOM de manera efectiva, siga el flujo de datos unidireccional desde los componentes de alto nivel a los componentes de bajo nivel y ayúdenos a dividir la interfaz en pequeños bloques independientes. Cada bloque es un componente y estos componentes pueden ser combinados, anidados, constituyen la página general. 
3. Características: sintaxis JSX, enlace de datos de un solo elemento, DOM virtual, programación declarativa, componente

2. Dime ¿cómo funciona el algoritmo Real diff?

1. El algoritmo de diferencia está diseñado para ahorrar rendimiento. En comparación con el mismo nivel, el rendimiento es más eficiente sin cruzar niveles. 2. El 
proceso de operación se divide principalmente en tres capas: capa de árbol, capa de componente, capa de elemento 
    1, capa de árbol : capa de árbol La operación de movimiento entre niveles de los nodos DOM se ignora y solo se comparan los nodos DOM del mismo nivel. Una vez que se descubre que el nodo no existe, el nodo y todos los nodos secundarios siguientes se eliminan directamente 
    . diff, para comparación jerárquica, cuando encuentre diferentes tipos de componentes, juzgue directamente este componente diferente como un componente sucio y reemplace todos los nodos secundarios bajo este componente. Cuando sepa que el DOM virtual de este componente no ha cambiado, puede usarlo manualmente. , deberíaComponentUpdate se utiliza para determinar si se requiere diff, lo que mejora aún más la eficiencia y el rendimiento de diff. 
    3. capa de elementos: debajo del mismo nivel, puede realizar operaciones de inserción para nuevos nodos, para nodos redundantes, realizar operaciones de eliminación; para los nodo transpuesto, realice la operación de mover

3. ¿Cuéntame sobre las diferentes etapas del ciclo de vida de React? ¿Cuál es el método correspondiente a cada etapa?

1. El ciclo de vida de React se divide principalmente en tres etapas: etapa de creación, etapa de actualización y etapa de desinstalación
2. Etapa de creación:
1. constructor: se utiliza para definir el estado o para almacenar algunos de estos métodos;
2. getDerivedStateFromProps(): será utilizado en el futuro, debe devolver un nuevo objeto como un nuevo estado o devolver nulo para indicar que el estado no necesita actualizarse
4.
componenteDidMount(): se utiliza para realizar algunas adquisiciones de datos, monitoreo de eventos y otras operaciones
3. Fase de actualización:
1. getDerivedStateFromProps(): se usará en el futuro y debe devolver un nuevo objeto como el nuevo estado o devolver un valor nulo para indicar que el estado no es válido. Es necesario actualizar 2. deberíaComponentUpdate: se usa para informar
al componente en sí si debe volver a renderizar el componente en función de los accesorios y el estado actuales, y devolver verdadero de forma predeterminada 3.
render: un método que debe ser implementado por el componente de clase, utilizado para renderizar la estructura DOM y puede acceder al estado del componente y prop Atributo
4, getSnapshotBeforeUpdate: esta función periódica se ejecuta después del renderizado y el elemento DOM no se ha actualizado en el momento de la ejecución. El propósito es obtener cierta información antes de que se actualice el componente, como la posición de desplazamiento del componente. Una vez actualizado el componente, puede restaurar algunos estados visuales de la interfaz de usuario en función de esta información
5. componenteDidUpdate: puede realizar las operaciones correspondientes de acuerdo con los cambios de accesorios y estado antes y después, como obtener datos, modificar estilos DOM, etc.
4. Etapa de descarga:
componenteWillUnmount: este método se utiliza para limpiar algunos registros para escuchar eventos o cancelar la suscripción de solicitudes de red, etc., antes de que se desmonte el componente. Una vez que se desmonta una instancia de componente, no se volverá a montar, solo se podrá volver a crear.

4. Cuénteme sobre su comprensión del dom virtual en React.

1. El DOM virtual utiliza la forma de objetos js para simular la relación de anidamiento del dom de la página; 
2. El DOM virtual es un árbol de objetos virtuales de JavaScript. El enfoque del dibujo es "virtual" y "objeto JS", lo que significa que pone Los nodos de documentos de páginas web reales se virtualizan en objetos js uno por uno y se almacenan en la memoria en una estructura de árbol. 
3. Principio de realización: simule nodos de documentos de páginas web a través de JS, genere un árbol de objetos JS (DOM virtual), luego genere un árbol DOM real y luego dibuje en la pantalla. Si el contenido cambia más adelante, React regenerará un nuevo árbol DOM virtual, luego comparará la diferencia con el árbol DOM virtual anterior, empaquetará la diferencia en un parche, lo aplicará al DOM real y luego lo representará en la pantalla para navegar. dispositivo.

5. Cuénteme sobre su comprensión del gancho de reacción.

1. Hook es una nueva característica/gramática agregada en React 16.8.0, que le permite usar el estado y otras características de React en componentes de funciones.
Hooks comunes:
2. useState: similar al estado en los componentes de clase, es conveniente para nosotros definir inicialización Los datos, recibir dos parámetros, uno es para inicializar los datos, el otro es modificar los datos método
3, useEffect: función de efecto secundario, solo después de su uso, producirá efectos secundarios, acepta dos parámetros, uno es una función , el otro es Los datos monitoreados pueden ser [], lo que significa que solo se ejecuta una vez y también se pueden pasar parámetros. Una vez pasados los parámetros, solo se activará cuando cambien nuestros datos. Si no se escribe, se activará se ejecutará una vez cuando ocurra un cambio 4. useMemo
: Caché de datos, cuando nos comunicamos entre componentes, si los datos en nuestro componente principal cambian, nuestros subcomponentes también se actualizarán en consecuencia, independientemente de si los datos actualizados están relacionados con los datos. de nuestros subcomponentes, realizará una operación de actualización. En este momento, habrá una pérdida de rendimiento de la actualización. Podemos usar ysememo para almacenar en caché y reducir las operaciones de actualización innecesarias. El parámetro de su caché es una cadena. Si es una función , entonces nuestro usememo no será válido. En este momento, debe usar useCallback para almacenar en caché los datos.
5. useRef: puede monitorear el cambio de los datos de nuestro cuadro de entrada y obtener el valor en el cuadro de entrada.

6. ¿Cómo comunicarse entre los componentes de React?

La comunicación del componente React significa que el componente de valor transmite información de una determinada manera para lograr un determinado propósito. 
    Manera: 
    1. El componente principal transmite información al componente secundario: dado que el flujo de datos de React es unidireccional, cuando el componente principal llama el componente secundario, solo necesita estar en Los parámetros se pasan en la etiqueta del subcomponente y el subcomponente los recibe a través del atributo de accesorios 
    2. El subcomponente transmite información al componente principal, el componente principal pasa una función a el subcomponente, y luego a través de la devolución de llamada de esta función, se obtiene el valor pasado por el subcomponente 3. 
    Brothers Transferencia entre componentes: el componente principal actúa como una capa intermedia para lograr la intercomunicación de datos, utilizando el componente principal para transferencia 
    4, el componente principal transfiere valores a los componentes descendientes: utilizando una forma de comunicación de componentes proporcionada por el contexto, se puede realizar el intercambio de datos, Proveedor El componente pasa el atributo de valor al componente descendiente 5. Los componentes no relacionales pasan 
    datos : gestiona los datos como un recurso global, para realizar la función de comunicación entre componentes, como 
redux

7. Cuénteme sobre su comprensión de los componentes controlados y los componentes no controlados. ¿Escenario de aplicación?

1. Componentes controlados: en React, el estado mutable generalmente se almacena en la propiedad de estado del componente y solo se puede actualizar usando setState (), mientras que el componente de React que representa el formulario también controla lo que sucede en ese formulario en circunstancias posteriores de entrada del usuario, en cuyos elementos de entrada controlados por React cambian sus valores, se denominan componentes controlados. En pocas palabras, recibe el control de setState y el estado del componente responde a datos externos durante todo el proceso 
2. Componentes no controlados: los datos del formulario son procesados por el propio DOM. Es decir, no está controlado por setState (), similar a la entrada de formulario HTML tradicional, el valor de entrada de entrada muestra el último valor (use ref para obtener el valor del formulario de DOM) y no está controlado por setState. datos externos durante la inicialización, luego almacena su propio estado internamente 
Escenarios de aplicación: 
    1. Componentes controlados: formato de entrada obligatorio, entradas múltiples de un dato, entrada dinámica, problemas de verificación al enviar 
    2. Componentes no controlados: valor único (enviar), validación en la presentación

8. ¿Cuénteme sobre el principio del componente Connect?

1. Connect conecta redux y reacciona, lo envuelve en la capa externa de nuestro componente contenedor, recibe el estado y el envío en la tienda proporcionada por el Proveedor anterior, lo pasa a un constructor, devuelve un objeto y lo pasa a nuestro componente contenedor. en forma de atributos 2. 
Connect es una función de alto nivel, primero pase mapStateToProps, mapDispatchToProps, luego devuelva la función Componente y luego pase el Componente real como parámetro para devolver un nuevo componente

9. ¿Hablar sobre la esencia del azúcar sintáctico jsx en reaccionar?

1. La esencia de Jsx es el azúcar gramatical de la función React.createElement. Toda la sintaxis de jsx eventualmente se convertirá en React.createElement a través de babel.js. 
2. Tres parámetros: el tipo se refiere al tipo de elemento actual y la configuración es el atributo jsx. se almacenan en forma de atributos y valores de objeto, y los hijos son el contenido almacenado en la etiqueta 
3. Método de escritura JSX: se debe introducir Babel y el tipo de etiqueta de script debe establecerse en text/bable Babel: convertir jsx a React .createElement() llamada a función

10. Cuénteme sobre su comprensión del middleware redux. ¿Cuáles son los middleware más utilizados? ¿Principio de implementación?

1. El middleware Redux es un tipo de software entre el sistema de aplicaciones y el software del sistema. Utiliza los servicios básicos proporcionados por el software del sistema para conectar varias partes del sistema de aplicaciones o diferentes aplicaciones en la red para lograr compartir recursos y funciones 
. Middleware de uso común: redux-thunk se usa para operaciones asincrónicas y redux-logger se usa para registros 
Principio 
de implementación

11. Cuénteme sobre la diferencia entre las especificaciones modulares AMD, CMD y commonJS.

1. AMD: esta especificación es un módulo de carga asincrónica. Primero defina todas las dependencias y luego ejecute require(['xxx'], function(){}) en la función de devolución de llamada una vez completada la carga. 2. CMD: el principio de proximidad de dependencia, 
use Al escribir function(require,exports,module){require('xxx')} 
3. commonJS: use require('xxx') para cargar módulos. 
La diferencia: 
    1. La mayor diferencia entre AMD y CMD es el tiempo de ejecución de los módulos dependientes El procesamiento es diferente, ambos son módulos de carga asincrónicos 
    2, AMD depende del frente, js puede saber fácilmente quién es el módulo dependiente, cárguelo inmediatamente, CMD depende del más cercano, necesita cambiar el módulo En un análisis de cadena 
    3, commonJS es que todos los códigos se ejecutan en el alcance del módulo, no contaminará el alcance global. La carga del módulo es sincrónica. Solo después de que se completa la carga, se pueden realizar las siguientes operaciones. El valor de requeire es un copia del valor de salida y el cambio del contenido del módulo no afectará este valor.

12. ¿Cuéntame sobre las reglas del número de versión en package.json?

^: solo realizará actualizaciones que no cambien el número distinto de cero a la izquierda 
~: si se escribe ~0.13.0, cuando se ejecute npm update, se actualizará a la versión del parche 
>: recibirá cualquier versión superior a la versión especificada 
>=: acepta cualquier versión igual o superior a la versión especificada 
<=: acepta cualquier versión igual o inferior a la versión especificada 
<: acepta cualquier versión inferior a la versión especificada 
=: recibe la versión exacta 
-: acepta una rango de versiones 
||: colección combinada 
Sin firmar: recibe la versión específica especificada 
Más reciente: usa la versión más alta disponible

13. ¿Cuéntame sobre el proceso de convertir React jsx en DOM real?

1. Utilice React.createElement o jsx para escribir componentes de reacción. De hecho, todos los códigos jsx se convertirán en React.ccreateElement (...), y babel nos ayudará a completar el proceso de conversión. 2. La función createElement es 
especial accesorios como key y ref Procese, y obtenga defaultProps para asignar accesorios predeterminados, procese los nodos secundarios entrantes y finalmente forme un objeto DOM virtual 3. 
ReactDOM.render renderiza el DOM virtual generado en el contenedor especificado, que utiliza procesamiento por lotes, las transacciones y otros mecanismos se optimizan para navegadores específicos y finalmente se convierten a DOM real

14. Cuénteme sobre su comprensión de @reduxjs/toolkit. ¿Cuál es la diferencia con reaccionar-redux?

1. React-redux es la capa de enlace de UI de reacción oficial que permite a los componentes de React leer datos del almacén redux y enviar operaciones al almacén para actualizar el estado. Se proporcionan API como connect y Provider para ayudarnos a conectar reaccionar y redux, y la lógica implementada será más rigurosa y eficiente. 2. 
@reduxjs/tookit es un paquete secundario de Redux. La diferencia entre crear una tienda y actualizar una tienda 
    : 
    1 . Reduxjs/tookit es más conveniente que reaccionar-redux. Integra la extensión redux-devtools y no requiere configuración adicional. Es muy conveniente. 2. Reduxjs/tookit 
    integra la función de immutable-js, no es necesario instalarlo ni configurarlo. y uso, lo que mejora la eficiencia del desarrollo 
    3. reduxjs/tookit integra las funciones de redux-thunk 
    4. reduxjs/tookit reúne tipos, acciones y reductores para formar nuevas porciones, lo que simplifica nuestro uso

15. El principio del método de renderizado React, ¿cuándo se activará?

La función Render tiene dos formas en reaccionar. En el componente de clase, se refiere al método de render. En el componente de función, se refiere al componente de función en sí. En render, escribiremos jsx y jsx se convertirá en js familiar. formato, durante el proceso de renderizado, React compara el árbol devuelto por la función de renderizado recién llamada con el árbol de la versión anterior, decide cómo actualizar el DOM y luego realiza una comparación de diferencias para actualizar el árbol DOM Tiempo de activación: 1. Clase los componentes llaman a setState 
    para 
        modificar el estado; 
        2. Cuando el componente de función modifica el estado mediante useState Hook; 
        3. Cuando se vuelve a representar el componente de clase; 
        4. Cuando se vuelve a representar el componente de función 
;

16. ¿Cuáles son los medios para optimizar el rendimiento de React?

1. A través de mustComponentUpdate: compara el estado y los accesorios para determinar si se debe volver a renderizar, devuelve verdadero de forma predeterminada y no desea que el renderizado devuelva falso 2. PureComponent: realizalo comparando los resultados de la comparación entre el estado y los accesorios 3. 
React.memo 
: Almacene en caché la representación de componentes para evitar actualizaciones innecesarias (solo para componentes de funciones) 
4. Evite el uso de funciones en línea: cada vez que se llama a render, se volverá a representar una nueva función, se creará una función dentro del componente y el evento estar vinculado a la función misma 
5. Utilice React Fragments para evitar marcas adicionales 
6. Utilice Immutable: reduzca el número de representaciones 
7. Componentes de carga diferida: utilice componentes de suspenso y diferidos para lograr la función de división de código 
8. Método de enlace de eventos 
9. Servidor- renderizado lateral

17. ¿Cómo implementar una función de aceleración y una función anti-vibración a través de js nativo?

1. Limitación de funciones: se activa con frecuencia, pero solo ejecuta el código una vez dentro de un tiempo específico 
2. Función anti-vibración: se activa con frecuencia, pero solo ejecuta el código una vez cuando la condición de ejecución no se activa dentro de un tiempo específico 
3. Diferencia: ambas La diferencia es que la limitación de funciones consiste en hacer una determinada cosa a una hora determinada, como enviar una solicitud cada segundo. La función anti-vibración se ejecuta solo una vez después de activarse con frecuencia (la premisa de ambas es la activación frecuente) 
Quiere obtener la posición de la barra de desplazamiento y luego realizar la siguiente acción 
5. Escenarios de aplicación anti-vibración: búsqueda en el cuadro de entrada eventos de finalización automática, operaciones frecuentes de me gusta y cancelación de me gusta, etc. Estos escenarios de aplicación también se pueden realizar mediante la limitación de funciones, operar con frecuencia me gusta y cancelar me gusta, por lo que es necesario obtener el resultado de la última operación y enviarlo al servidor.

18. ¿Cuéntame sobre tu comprensión del modelo de cebolla en koa?

1. En koa, el middleware se divide en dos partes mediante el método next(). La parte superior del siguiente método se ejecutará primero y la parte inferior se ejecutará después de que se completen todas las ejecuciones posteriores del middleware. Modelo de cebolla, cada capa es equivalente 
a un middleware, que se utiliza para manejar funciones específicas, como manejo de errores, procesamiento de sesiones, etc., el orden de procesamiento es primero la solicitud siguiente (), luego ejecutar la función siguiente () y finalmente respuesta next (), es decir, cada middleware Hay dos oportunidades de procesamiento. 
3. El principio básico del modelo de cebolla es utilizar el método compuesto.

19. ¿Habla sobre cómo optimizar el rendimiento del front-end con webpack?

1. Comprimir código: eliminar código redundante, comentarios, simplificar la escritura de código, etc. Puede usar UglifyJsPlugin y ParallelUglifyPlugin del paquete web para comprimir archivos JS 
2, usar cssnano (css-loader?minimize) para comprimir css 
3 y usar CDN para acelerar: durante el proceso de construcción, modifique la ruta del recurso estático referenciado a CDN en la ruta correspondiente. Puede usar webpack para el parámetro de salida y el parámetro publicPath de cada cargador para modificar la ruta del recurso 
4. Tree Shaking: elimine los fragmentos del código a los que nunca se accederá. 
Se puede lograr agregando el parámetro --optimize-minimize al iniciar el paquete web 
5. División de código: divida el código en fragmentos según la dimensión o componente de la ruta, para que pueda cargarse a pedido y aprovechar al máximo el navegador. caché 
6. Extraiga bibliotecas públicas de terceros: complemento SplitChunksPlugin para la extracción de módulos públicos, 
7. Utilice la caché del navegador para almacenar en caché estos códigos públicos que no requieren cambios frecuentes durante mucho tiempo

20. Cuénteme sobre su comprensión de webSocket.

1. Comprensión: webSocket es un protocolo de transmisión de red, ubicado en la capa de aplicación del modelo OSI, que puede realizar comunicación dúplex en una única conexión TCP, lo que puede ahorrar mejor los recursos del servidor y el ancho de banda y lograr una comunicación en tiempo real. El cliente y el servidor solo necesitan completar un protocolo de enlace, se puede crear una conexión persistente entre los dos y se puede realizar una transmisión de datos bidireccional 2. Características: 
1. 
    Full-duplex (la comunicación permite que los datos se transmitan en dos direcciones simultáneamente) 
    2. Marco binario (usando la estructura de marco binario, la sintaxis y la semántica son completamente incompatibles con HTTP y están más enfocadas en la comunicación en tiempo real) 3. 
    Nombre del protocolo (ws y wss se introducen para representar el protocolo websoket de texto sin formato y texto cifrado respectivamente, y el puerto predeterminado es 80 o 443, casi exactamente igual que http) 
    4. Apretón de manos (hay un proceso de protocolo de enlace y luego envía y recibe datos formalmente)

21. ¿Cuál es la diferencia entre vincular, llamar y aplicar? ¿Cómo implementar un enlace?

Llamar, vincular y aplicar cambian este punto cuando se ejecuta la función. Diferencias 
    : 
    1. Aplicar recibe dos parámetros, el primer parámetro es este punto y el segundo parámetro es el parámetro recibido por la función, que se pasa como una matriz 
    2. El primer parámetro del método Call también es apuntado por esto, y se pasa una lista de parámetros más adelante. 
    3. El método Bind es similar a llamar. El primer parámetro también es apuntado por esto, y un La lista de parámetros se pasa más adelante (esta lista se puede dividir en varias segundas pasadas), vincular es devolver la función 
después de vincular esto 
el 
    objeto que llama es una función 
    Si (tipo de esto! = = 'función'){throw new TypeError("error")} 
    Obtener parámetros 
    Const args = [...argumentos].slice(1) 
    Fn = this 
    Devolver función Fn (){ 
Según el método de llamada, pase un enlace diferente valores 
    Devuelve fn.apply(esta instanciade Fn ? new fn(...argumentos):context,args.concat(...argumentos)) 
} 
}

22. ¿Qué son antivibración y estrangulamiento? ¿Cual es la diferencia? ¿Como alcanzar?

Limitación: solo se permite una vez dentro de n segundos. Si se activa repetidamente dentro de n segundos, solo tendrá efecto una vez. 
Anti-vibración: el evento se ejecutará después de n segundos. Si se activa repetidamente dentro de n segundos, el El tiempo se volverá a cronometrar. Diferencias 
: 
    1. Función anti-Después de un período de operación continua, la devolución de llamada se procesa usando clearTimeout y setTimeout; función de limitación, en un período de operación continua, cada evento solo se ejecuta una vez y se utiliza en eventos de alta frecuencia para mejorar el rendimiento 2. Función antivibración 
    Preste atención al tiempo de activación continua durante un cierto período de tiempo y ejecútelo solo una vez al final, mientras que la función de aceleración solo se ejecuta una vez en un período de tiempo

23. ¿Cómo entender el reflujo y el redibujado? ¿En qué circunstancias se activará?

Reflujo: el motor de diseño calculará la posición y el tamaño de cada cuadro en la página de acuerdo con varios estilos. Redibujar 
: después de calcular la posición, el tamaño y otras propiedades del modelo de cuadro, el navegador volverá a dibujar el 
tiempo de activación de acuerdo con las características de cada uno. cuadro : 
    Reflujo: agrega o elimina elementos DOM visibles; la posición de los elementos cambia, el tamaño de los elementos cambia y el contenido cambia, como cambios de texto o imágenes; cuando la página comienza a renderizarse, el tamaño de la ventana del navegador cambia y redraws 
    : El redibujado debe activarse cuando se activa el reflujo. Además, hay cambios de color, cambios de dirección del texto, cambios de sombras, etc.

24. ¿Cuál es el principio del enrutamiento VUE?

El enrutamiento se divide en dos modos: modo hash y modo historial. 
Principio: 
    Hash: el valor hash en la URL es un estado del cliente. Al enviar una solicitud al servidor, la parte hash no se enviará y el cambio del El hash se mostrará en el navegador. Agregue un registro al historial de acceso del navegador, de modo que podamos controlar el cambio del hash a través de los botones de avance y retroceso del navegador, y saltar de página cambiando el valor del hash. Historial: En el modo histórico, la URL del front-end 
    debe ser la misma que la URL real que inicia la solicitud al backend y es consistente, y se utilizan dos API pushState y replaceState para operar y realizar el cambio de la URL. el historial del navegador sin actualizar la página, o usar popstate para monitorear el cambio de la URL, a fin de realizar la función de salto de página

25. ¿Conoce el algoritmo de diferenciación de vue? ¿Dime?

El algoritmo Diff es un algoritmo eficiente para comparar nodos de árboles en el mismo nivel. Tiene dos características: las comparaciones solo se realizan en el mismo nivel y los cambios se comparan entre niveles; en el proceso de comparación de diferencias, el bucle se mueve desde ambos lados al medio Principio de comparación 
: 
    1. Cuando los datos cambian, el método set llamará a Dep.notify para notificar a todos los observadores de suscriptores, y los suscriptores llamarán a patch para parchear el DOM real y actualizar la vista correspondiente 
    . llame al método updateChildren para comparar y luego baje recursivamente capa por capa hasta que se comparen todos los nodos secundarios en el Vnode antiguo y el nuevo. El proceso de domDiff se parece más a la comparación de dos árboles: cada vez que se encuentra el mismo nodo, sus nodos secundarios se compararán capa por capa, es un proceso de comparación transversal recursiva profunda.

26. Cuénteme sobre su comprensión de mantener vivo.

1. Keep-alive es un componente integrado en vue. Puede mantener el estado en la memoria durante el cambio de componentes para evitar la representación repetida de DOM, que es el llamado caché de componentes. 2. Cuando Keep-alive envuelve componentes dinámicos 
, no se almacenarán en caché las instancias de componentes activos en lugar de destruirlas 
3. Keep-alive puede establecer el atributo de accesorios: incluir cadena o expresión regular, que se almacenará en caché solo cuando el nombre coincida; 
4. excluir: cadena o expresión regular, cualquier nombre Los componentes coincidentes no se almacenarán en caché, número máximo, cuántas instancias de componentes se pueden almacenar en caché como máximo

27. ¿Qué es el diseño responsivo? ¿Cuáles son los principios básicos del diseño responsivo? ¿Cómo hacer?

Diseño de sitio web responsivo: es un tipo de diseño de página de red. El diseño y desarrollo de la página debe responder y ajustarse en consecuencia de acuerdo con el comportamiento del usuario y el entorno del equipo (plataforma del sistema, tamaño de pantalla, orientación de la pantalla, etc.) El principio básico de diseño responsivo:
Sí Detecte diferentes tamaños de pantalla del dispositivo a través de consultas de medios para su procesamiento. Para poder manejar terminales móviles, el encabezado de la página debe tener una ventana gráfica de metadeclaración
Método de implementación:
1. Consulta de medios: establezca diferentes tipos de condiciones de medios y proporcione las condiciones correspondientes de acuerdo con las condiciones correspondientes La hoja de estilo correspondiente a la llamada de medios
2. Porcentaje: cuando cambia el ancho o alto del navegador, el ancho y alto de los componentes en el navegador se pueden cambiar con el cambio del navegador a través de la unidad de porcentaje , para lograr capacidad de respuesta El efecto de la fórmula
3. vw / vh: vw representa el ancho relativo a la ventana de vista y vh representa la altura relativa a la ventana de vista. Para elementos de cualquier nivel, en el caso de unidades vw, 1vw es igual al uno por ciento del ancho de la vista
4. rem: rem es el atributo de tamaño de fuente relativo al elemento raíz html. Por defecto, el tamaño de fuente del navegador es 16px cuando 1rem = 16px

28. ¿Cómo solucionar el problema entre dominios?

Debido al problema entre dominios causado por la restricción de la política del mismo origen del navegador, cuando el navegador solicita los recursos de otro nombre de dominio desde la página web de un nombre de dominio, cualquier diferencia en el nombre de dominio, puerto o protocolo es cruzada. -dominio Solución: 1. jsonp dominio cruzado 
Dominio 
    2 
    , proxy inverso Nginx 
    3, encabezado de modificación final de Php 
    4, Document.domain realiza acceso mutuo y operación entre diferentes ventanas 
    5, Cors resuelve dominio cruzado 
    6, Window.name utiliza el características de los navegadores para lograr diferentes dominios transferencia de datos entre

29. ¿Cómo optimizar la velocidad de empaquetado del paquete web?

1. Reduzca el uso de cargadores en plantillas tanto como sea posible y reduzca la frecuencia de ejecución frecuente de los cargadores. 
2. Manténgase al día con la iteración de las tecnologías de desarrollo: node, Yarn, npm y webpack mantienen las versiones más recientes y estables. 3. 
Los complementos deben ser tan pocos y confiables como sea posible, y seleccionar rendimiento Bueno, el complemento oficial recomendado 
4. Configuración razonable de los parámetros de resolución 
5. Utilice DllPlugin para aumentar la velocidad de empaquetado del paquete web 
6. Controle el tamaño de los archivos del paquete 
7. Empaquetado multiproceso con cargador de subprocesos, paquete web paralelo y happypack

30. ¿Cómo solucionar la lenta velocidad de carga de la primera pantalla de SPA?

Carga de la primera pantalla: el tiempo desde que el navegador responde a la URL ingresada por el usuario hasta que se representa el contenido de la primera pantalla. En este momento, no es necesario que toda la página web se muestre por completo, pero debe mostrarse. el contenido requerido por la ventana actual. 1. Reduzca el tamaño del archivo de entrada 
    :, Divida los componentes correspondientes a diferentes rutas en diferentes bloques de código. Cuando se solicita la ruta, la ruta se empaquetará por separado, de modo que el archivo de entrada se convierta en más pequeño y la velocidad de carga aumenta considerablemente.Almacenamiento 
    en caché fuera de línea del trabajador, uso razonable de localstroage 
    3, carga del marco de UI bajo demanda 
    4, empaquetado repetido de componentes 
    5, compresión de recursos de imagen 
    6, habilitación de la compresión GZip 
    7, uso de SSR: renderizado del lado del servidor , los componentes o páginas generan cadenas html a través del servidor y nuevamente las envían al navegador

31. ¿Cuántos modos tiene el enrutador de reacción? ¿Principio de implementación?

Dos modos: modo hash y modo historial 
    Principio de hash: cuando el valor hash cambia, se activa el evento hashchange en el objeto de ventana global. Entonces, el enrutamiento del modo hash consiste en usar el evento hashchange para monitorear el cambio de la URL, a fin de realizar operaciones DOM para simular el 
    principio del historial de salto de página: use los nuevos métodos pushState () y replaceState () en la interfaz de historial HTML5.

32. ¿Cuáles son los pasos desde ingresar la URL en la barra de direcciones del navegador hasta mostrar la página?

1. El navegador envía la URL solicitada al análisis del nombre de dominio DNS, encuentra la IP real e inicia una solicitud al servidor; 
2. El servidor devuelve los datos después de que se completa el procesamiento en segundo plano y el navegador recibe el archivo (HTML). , JS, CSS, imágenes, etc.) 
3. El navegador analiza los recursos cargados (HTML, JS, CSS, etc.) y establece la estructura de datos interna correspondiente (como HTML DOM); 4. Cargue los archivos de recursos analizados 
, renderice la página y complete.

33. ¿Cuéntame sobre los tipos de datos en JavaScript? ¿Diferencia de almacenamiento?

Tipos básicos: número, cadena, booleano, indefinido, nulo, símbolo 
Tipos complejos: objeto, matriz, función 
Diferencias de almacenamiento: 
    1. Diferentes ubicaciones: los tipos de datos básicos se almacenan en la pila y los tipos de referencia se almacenan en el montón. 
    2. Declaración Asignación de dirección de memoria para variables: el valor correspondiente se almacena en la pila de valores de tipo simple y la dirección de memoria que apunta al montón se almacena en la pila de tipo de datos de referencia 3. La asignación de tipo básico simple genera el mismo valor. y los dos objetos corresponden a 
    direcciones diferentes, la asignación de tipo complejo asigna la dirección de memoria del objeto guardado a otra variable, y las dos variables apuntan al mismo objeto en la memoria del montón

34. Cuénteme sobre su comprensión de React Hooks. ¿Qué problema resolvió?

Los ganchos son una característica nueva en React 16.8. Le permite usar el estado y otras características de React sin escribir clases 
para resolver problemas: 
    1. Es difícil reutilizar y compartir la lógica relacionada con el estado en los componentes 
    2. Debido a cambios comerciales, los componentes de función deben cambiarse a componentes de clase 
    3. Los componentes con lógica compleja son difíciles de desarrollar y mantener. Cuando un componente necesita lidiar con múltiples estados locales irrelevantes, cada función del ciclo de vida puede contener varias lógicas no relacionadas. 4. Los componentes de clase se optimizan en función de las 
    herramientas existentes. Algunos problemas existentes 
    5. La aparición de ganchos ha ampliado las funciones de los componentes de funciones y tiene funciones similares a los componentes de clase. En nuestro uso diario, el uso de ganchos puede resolver la mayoría de los problemas y también tiene un mecanismo de reutilización de código, por lo que Priorizar los ganchos

35. ¿Cuéntame sobre tu comprensión de las promesas?

1. Promise es la primera solución de programación asincrónica propuesta e implementada por la comunidad, que es más razonable y poderosa que otras soluciones tradicionales (funciones de devolución de llamada y eventos).
2. La promesa se genera para resolver el problema de la pirámide de devolución de llamadas de procesamiento asíncrono.
3. El estado del objeto Promise no se ve afectado por el mundo exterior. Una vez que el estado de la Promesa cambia, no volverá a cambiar. Este resultado se puede obtener en cualquier tiempo, el estado no se puede revertir, solo puede cambiar de pendiente a cumplido o de pendiente a rechazado
4. El constructor de Promesa acepta una función como parámetro, y los dos parámetros de la función son resolver y rechazar. Son dos funciones, proporcionadas por el motor JavaScript, no es necesario que las implementes tú mismo. La función de la función de resolución es cambiar el estado del objeto Promise de "inconcluso" a "exitoso" (es decir, de pendiente a resuelto), llamarlo cuando la operación asincrónica sea exitosa y pasar el resultado de la operación asincrónica. como parámetro; rechazar La función de la función es cambiar el estado del objeto Promesa de "inacabado" a "fallido" (es decir, de pendiente a rechazado), llamarlo cuando falla la operación asincrónica y pasar el error informado por la operación asincrónica como parámetro.
5. Una vez generada la instancia de Promise, el método then se puede utilizar para especificar las funciones de devolución de llamada del estado resuelto y el estado rechazado, respectivamente.

36. ¿Cuénteme sobre el cargador común en el paquete web? ¿Qué problema resolvió?

1. Loader se utiliza para convertir el código fuente del módulo y preprocesar el archivo al importar o cargar el módulo 
2. Style-loader: agregue css al estilo de etiqueta de estilo en línea de DOM 
3. Caa-loader: pase el archivo css a través de Introducir mediante require y devolver código css 
4, Less-loader: procesar menos 
5, Sass-loader: procesar sass 
6, Postcss-loader: procesar postcss para procesar css 
7, File-loader: distribuir archivos al directorio de salida y devolver la ruta relativa 
8, Html-minify-loader: comprimir html

37. ¿Cuáles son los medios para optimizar el rendimiento de React?

1. A través de mustComponentUpdate: compara el estado y los accesorios para determinar si se debe volver a renderizar, devuelve verdadero de forma predeterminada y no desea que el renderizado devuelva falso 2. PureComponent: realizalo comparando los resultados de la comparación entre el estado y los accesorios 3. 
React.memo 
: Almacene en caché la representación de componentes para evitar actualizaciones innecesarias (solo para componentes de funciones) 
4. Evite el uso de funciones en línea: cada vez que se llama a render, se volverá a representar una nueva función, se creará una función dentro del componente y el evento estar vinculado a la función misma 
5. Utilice React Fragments para evitar marcas adicionales 
6. Utilice Immutable: reduzca el número de representaciones 
7. Componentes de carga diferida: utilice componentes de suspenso y diferidos para lograr la función de división de código 
8. Método de enlace de eventos 
9. Servidor- renderizado lateral

38. ¿Cuéntame sobre el mecanismo de ejecución setState en React?

    La forma de visualización de un componente puede ser determinada por el estado de los datos y los parámetros externos, y el estado de los datos es el estado. Cuando es necesario modificar el estado del valor, se cambia a través de seState, para lograr la función de actualización. los datos internos del componente. SetState se puede dividir en datos de sincronización y actualización 
    . Actualización asincrónica, en el ciclo de vida del componente o evento de síntesis de reacción, setState es asincrónico, en setTimeout o evento dom nativo, setState es sincrónico

39. ¿Cuáles son los métodos de comunicación entre los componentes de Vue?

Este tipo de preguntas se clasifican primero para mostrar que usted sabe más sobre ellas, por lo que no las terminé o me las perdí. Al entrevistador no le importan las cuatro categorías principales de los componentes de comunicación: padres e hijos y padres e
hijos
. Comprensión
1. props y $emit Los componentes principales pasan datos a los componentes secundarios a través de accesorios, y los componentes secundarios pasan datos a los componentes principales a través de $emit para desencadenar eventos
2. $attrs y $listeners
3. Los dos métodos anteriores al bus de eventos central Se ocupa de la transferencia de datos entre componentes padre-hijo, pero ¿qué pasa si los dos componentes no son padre-hijo? En este caso, se puede utilizar un enfoque de bus de eventos central. Cree un nuevo objeto de bus de eventos de Vue, luego active el evento a través de bus.$emit y escuche el evento activado a través de bus.$on.
4. Proporcionar e inyectar Las variables se proporcionan a través del proveedor en el componente principal, y luego las variables se inyectan mediante inyección en el componente secundario. No importa qué tan profundo sea el subcomponente, siempre que se llame a inject
, se pueden inyectar los datos en el proveedor. En lugar de limitarse a obtener datos únicamente del atributo de propiedad del componente principal actual, siempre que esté dentro del ciclo de vida del componente principal, el componente secundario puede llamarlo.
5. v-model: cuando el componente principal pasa el valor al componente secundario a través de v-model, pasará automáticamente un atributo de valor de propiedad y modificará automáticamente el enlace del modelo v en el componente secundario a través de esto.$emit( 'input', val) Establezca el valor
6, $parent y $children
hablan sobre la función del valor clave en vue
hablan sobre el algoritmo virtual dom y diff en vue
7, boradcast y despacho
8. Vuex maneja la interacción de datos entre componentes. Si la lógica empresarial es compleja y muchos componentes necesitan procesar algunos datos comunes al mismo tiempo, los métodos anteriores pueden no ser propicios para el mantenimiento del proyecto en este momento. El enfoque de vuex es utilizar estos datos públicos Se extraen los datos y luego otros componentes pueden leer y escribir estos datos públicos, para lograr el propósito de desacoplamiento.

40. ¿Cuénteme sobre los obstáculos en el ciclo de vida de React? ¿Cómo evitarlo?

1. getDerivedStateFromProps es un código antipatrón fácil de escribir, lo que hace que la distinción entre componentes controlados y componentes no controlados sea borrosa. 
2. componenteWillMount ha quedado obsoleto en React y no se recomienda. La razón principal es que la nueva arquitectura asincrónica hará que Se usarán más llamadas, por lo que las solicitudes de red y los enlaces de eventos deben colocarse en componenteDidMount 
3. ComponentWillReceiveProps también está marcado como obsoleto y reemplazado por getDerivedStateFromProps, principalmente debido a problemas de rendimiento. 
4. mustComponentUpdate determina si es necesario activar una nueva representación devolviendo verdadero o falso. Se utiliza principalmente para la optimización del rendimiento. 
5. ComponentWillUpdate también está marcado como obsoleto debido al nuevo mecanismo de representación asincrónica y no se recomienda. La lógica original se puede combinar con getSnapshotBeforeUpdate y componenteDidUpdate para la transformación. 
6. Si olvida desvincular el evento en la función componenteWillUnmount, cancele el temporizador y otras operaciones de limpieza, es fácil causar errores. Si no se agrega manejo de límites de error, cuando ocurra una excepción en la representación, el usuario verá una pantalla blanca inoperable, así que asegúrese de agregar

41. ¿Qué hace setState en la fase de reconciliación?

1. Después de llamar a la función setState en el código, React fusionará el objeto de parámetro entrante con el estado actual del componente y luego activará el llamado proceso de reconciliación (Reconciliación). 
2. Después del proceso de reconciliación, React construirá el árbol de elementos de React de acuerdo con el nuevo estado de una manera relativamente eficiente y comenzará a volver a renderizar toda la interfaz de usuario; 3. Después de que 
React obtenga el árbol de elementos, React calculará automáticamente el nuevo 4. En el algoritmo de cálculo de diferencias, 
React puede saber con relativa precisión qué posiciones han cambiado y cómo deben cambiarse, lo que garantiza Actualizaciones bajo demanda en lugar de renderizados completamente nuevos.

42. ¿Hablar sobre el principio de realización de redux y escribir el código central?

1. Coloque el estado de la aplicación en el estado y la tienda administrará el estado. 
2. La función del reductor es devolver un nuevo estado para actualizar el estado correspondiente en la tienda. 
3. Según el principio de redux, cada cambio de estado de la capa UI debe ser desencadenado por una acción. La acción se pasa a el reductor correspondiente y el reductor devuelve Un nuevo estado actualiza el estado almacenado en la tienda, completando así una actualización de estado 
4. suscribirse es suscribir la función de escucha para la tienda, y estas funciones de escucha suscritas se ejecutan secuencialmente después de que se inicia cada envío 5. 
Se puede agregar middleware Reescribir el envío enviado

43. ¿Cuál es el principio del evento sintético de React?

    Los eventos en reaccionar son todos eventos sintéticos. En lugar de vincular cada evento dom al dom, el evento está vinculado al documento de manera uniforme. Cuando se activa, el evento se propaga al documento para activar el evento sintético, porque es un evento sintético. por lo que no podemos usar e.stopPropagation para detener, pero sí usar e.preventDefault para detener. 
    Evento sintético: recorra todos los tipos de eventPlugins, genere diferentes grupos de eventos correspondientes a cada tipo de evento, si está vacío, genere uno nuevo, use el anterior, obtenga la función de devolución de llamada especificada de acuerdo con la clave única y regrese con la función de devolución de llamada. para parámetros.

44. ¿Por qué los elementos de reacción tienen un atributo de tipo $$?

El objetivo es prevenir ataques XSS. 
    Debido a que Synbol no se puede serializar, React puede determinar si el objeto del elemento actual proviene de la base de datos o se genera por sí mismo a través de si hay un atributo $$typeof. Si no hay ningún atributo $$typeof, reaccionar se negará a procesar el elemento.

45. Cuénteme sobre su comprensión del middleware redux. ¿Cuáles son los middleware más utilizados? ¿Principio de implementación?

    El middleware Redux es un tipo de software entre el sistema de aplicaciones y el software del sistema. Utiliza los servicios básicos proporcionados por el software del sistema para conectar varias partes del sistema de aplicaciones o diferentes aplicaciones en la red para lograr compartir recursos y funciones 
. : redux-thunk se usa para operaciones asincrónicas, redux-logger se usa para registros 
Principio de implementación: todo el middleware se coloca en una matriz para la ejecución anidada, juzga el tipo de datos pasado y finalmente ejecuta store.dispatch, middleware El middleware interno La API puede obtener los métodos getstate y despachar.

46. Cuénteme sobre su comprensión del bucle de eventos.

JavaScript es un lenguaje de subproceso único, lo que significa que solo se puede hacer una cosa al mismo tiempo, pero eso no significa que un subproceso único esté bloqueando, y la forma de lograr el no bloqueo de un solo subproceso es el bucle de eventos. Todas las tareas se dividen en tareas sincrónicas 
., Tareas asincrónicas. 
    Tareas sincrónicas: tareas que se ejecutan inmediatamente. Las tareas sincrónicas generalmente ingresan directamente al hilo principal para su ejecución. Tareas 
    asincrónicas: solicitudes de red Ajax, función de temporizador setTimeout, 
    las tareas sincrónicas ingresan al hilo principal, es decir, la pila de ejecución principal, y las tareas asincrónicas ingresan a la cola de tareas.Si la tarea en el hilo principal está vacía después de la ejecución, irá a la cola de tareas para leer la tarea correspondiente y enviarla al hilo principal para su ejecución. Entonces, la repetición continua del proceso anterior se denomina bucle de eventos.

47. ¿Solución front-end entre dominios?

1. Jsonp entre dominios: no hay restricción entre dominios usando la etiqueta script, el atributo src envía una solicitud de obtención con un parámetro de devolución de llamada, la interfaz del servidor devuelve los datos y los coloca en la función de devolución de llamada y los devuelve al navegador. , el navegador lo analiza, lo ejecuta y lo obtiene del front 
-end Datos 2. Intercambio de recursos entre dominios: permite a los navegadores enviar solicitudes XMLhttpRequest a servidores de orígenes cruzados, superando la limitación de que ajax solo se puede usar en el mismo origen 
3 .Nginx proxy entre dominios 
4. Node.js middleware proxy entre dominios 
5. Localtion.hash +iframe dominio cruzado

48. Métodos y funciones comunes de matrices, ¿al menos 15?

1. Array.join(): une los elementos de la matriz en una cadena 
2. Array.push(): agrega el nuevo elemento a la última posición de la matriz 
3. Array.splice(): según el subíndice del matriz Agregue o elimine elementos en cualquier posición de la matriz.El parámetro formal 1 significa agregar o eliminar del número de elementos de acuerdo con el subíndice de la matriz. 
4. Array.slice(): Corta una nueva matriz de acuerdo con el subíndice de la matriz 
5. Array.forEach(): Este método de matriz recibe tres parámetros formales, el primer parámetro formal es cada elemento de la matriz; el segundo parámetro es el subíndice de índice de cada elemento de la matriz; el tercer parámetro es la matriz misma. 
6. Array.map(): bucle, asigna espacio de memoria para almacenar una nueva matriz y regresa 
7. Array.filter(): crea una nueva matriz, los elementos de la nueva matriz se verifican mediante el método de filtro y luego se especifican en el matriz para cumplir con las condiciones de todos los elementos y no cambia la matriz original. 
8. Array.reduce (): recibe una función como acumulador (acumulador), cada valor en la matriz (de izquierda a derecha) comienza a reducirse (incrementar) y finalmente se convierte en un valor. 
9. Array.every(): comprueba si todos los valores de la matriz pasan la prueba. 
10. Array.some(): Comprueba si algún valor de la matriz pasa la prueba 
11. Array.indexOf(): Busca un valor de elemento en la matriz y devuelve su posición 
12. Array.find(): La primera matriz que pasa la prueba función de prueba El valor del elemento 
13, Array.pop(): elimina el último elemento de la matriz  
14, Array.shift(): elimina el primer elemento de la matriz y cambia todos los demás elementos a un índice inferior
15, Array.unshift(): agrega un nuevo elemento a la matriz al principio y desplaza hacia atrás el elemento anterior

49. ¿Cuéntame sobre tu comprensión de mixin en Vue?

1. Mixin es una clase en un lenguaje de programación orientado a objetos, que proporciona implementación de métodos. Otras clases pueden acceder al método de mixin sin convertirse en su subclase. 2. Mixin en Vue es una forma muy flexible de 
distribuir Vue La función reutilizable de componente 
3. Es esencialmente un objeto js, que puede contener cualquier opción de función en el componente, como datos, componentes, métodos, creado, etc. 
4. Pase la función compartida a la opción mixins en forma de objeto, cuando un componente usa un objeto mixins, todas las opciones del objeto mixins se mezclarán con las opciones del propio componente.

50. ¿Cuál es la diferencia entre el bucle for...in y el bucle for...of?

1. Tanto For in como for of se pueden usar para atravesar 
2. For in atraviesa el índice de índice de la matriz, for of atraviesa el valor del elemento de la matriz 
3. For in es más adecuado para atravesar objetos, por supuesto, también puede atravesar matrices, pero habrá algunos problemas; for puede atravesar números, objetos de matriz, cadenas y otras colecciones con objetos iteradores 
4. For atravesará todas las propiedades enumerables de la matriz, incluidos los prototipos; for atravesará solo los elementos en el array, No incluye atributos ni índices prototipo 
5. For in siempre obtiene la clave del objeto o el subíndice del array o cadena, for of obtiene el valor del objeto o el valor del array o cadena

51. ¿Cuáles son las formas de juzgar el tipo de datos de J? ¿Nombra al menos 5? ¿Cual es la diferencia?

1. Método Typeof: devuelve una cadena que representa el tipo de datos, independientemente del tipo de objeto referenciado, devuelve el Objeto 
2. Método Instanceof: determina el tipo de datos a partir del tipo de construcción 
3. Método constructor: es un atributo en el objeto prototipo, apuntando al constructor 
4. Método Object.prototype.toString: el objeto objeto devuelve [Objeto objeto], otros tipos necesitan llamada, aplicar para llamar 
5. Método Jquery.type()

52. ¿Cuénteme sobre su comprensión de Object.defineProperty()?

    1. El método Object.defineProperty() definirá directamente una nueva propiedad en un objeto, o modificará una propiedad existente de un objeto, y devolverá este objeto. IE8 no es compatible. 
    2. Actualmente existen dos tipos de descriptores de atributos en un objeto: descriptores de datos y descriptores de acceso 
    3. Un descriptor de datos es un atributo con un valor, que puede escribirse o no, los descriptores de acceso se definen mediante get 4. El descriptor de datos 
    tiene valor y se puede escribir, y el descriptor de acceso es un atributo descrito por un conjunto de funciones getter y setter. El valor de retorno obtenido se utiliza como valor del atributo, y el método set acepta el único parámetro. Y asigna el nuevo valor del parámetro al atributo 
    5. Cuando se utiliza el método get o set, los atributos de escritura y valor no se pueden utilizar, y viceversa

53. ¿Cuáles son los escenarios de aplicación para la comprensión de instrucciones personalizadas en Vue?

1. El sistema de instrucciones es también el sistema de lenguaje del hardware de la computadora, también llamado lenguaje de máquina, que es el principal atributo de la computadora visto por los programadores del sistema. 2. Las instrucciones 
personalizadas también existen como funciones de enlace como componentes, vincular, insertar, actualizar, componenteActualizado, desvinculado 
3, Escenario: evitar el envío repetido de formularios, carga diferida de imágenes, función de copia con un solo clic

54. ¿Hablar sobre varias situaciones de pérdida de memoria de JavaScript?

1. Variable global inesperada 
2. Olvidé liberar el temporizador 
3. Referencias múltiples, cuando varias variables se refieren al mismo objeto, algunas referencias no se borran 
4. Uso irrazonable de cierres 
5. Memoria de información de impresión de Console.log no liberada

55. ¿Cómo reanudar la carga de archivos grandes?

Al cargar archivos grandes, variables como la capacidad del servidor para procesar datos, tiempos de espera de solicitud y fluctuaciones de la red afectarán nuestra experiencia de usuario, por lo que debemos realizar un procesamiento separado para la carga de archivos grandes. El archivo cargado, según un cierto tamaño, se 
divide el archivo completo en múltiples bloques de datos para cargarlo en partes. Una vez completada la carga, el servidor resume e integra los archivos cargados en el archivo original. 2. Reanudación del punto de interrupción: pausa Haga clic en Reanudar para dividir la tarea de descarga o 
carga en varias partes al descargar o cargar nuevamente, y cada parte usa un hilo para cargar o descargar, o la parte descargada comienza a continuar cargando o descargando la parte sin terminar, y no es necesario comenzar a cargar y descargar desde el principio, el usuario puede ahorrar tiempo y aumentar la velocidad. 
3. Generalmente existen dos métodos de implementación para reanudar las cargas desde puntos de interrupción: el servidor regresa e indica dónde comenzar y el navegador lo maneja solo.

56. ¿Cómo implementa el js nativo la carga desplegable y la actualización desplegable?

Tanto la carga desplegable como la actualización desplegable dependen de la interacción del usuario
1. Carga desplegable:
1. scrollTop: La altura de la ventana de desplazamiento es la distancia desde la parte superior de la ventana. Aumentará a medida que se desplaza hacia arriba. El valor inicial es 0, que es un valor cambiante
2. clientHeight: es un valor fijo, que indica la altura del área visible de la pantalla,
3. scrollHeight: también existe cuando la página no se puede desplazar. , scrollHeight es igual a clientHeight. 4. scrollHeight representa la longitud total de todos los elementos del cuerpo (incluido el relleno del elemento del cuerpo en sí),
una fórmula de fondo: scrollTop + clientHeight >= scrollHeight
2. Actualización desplegable:
la esencia de la actualización desplegable es que cuando la página en sí se coloca en la parte superior, el usuario necesita desplegar hacia abajo Acciones activadas
1. Escuche el evento touchstart nativo, registre su valor de posición inicial, e.touches[0].pageY;
2. Escuche el evento touchmove nativo , registre y calcule la diferencia entre el valor de la posición deslizante actual y el valor de la posición inicial, mayor que 0 significa tirar hacia abajo y use el atributo traducirY de CSS3 para hacer que el elemento siga el gesto para deslizarse hacia abajo en la diferencia correspondiente, y también establezca un valor deslizante máximo permitido 3. Escuche el
evento táctil original, si el elemento se desliza hasta el valor máximo en este momento, se activa la devolución de llamada y el traductor Y se restablece a 0 al mismo tiempo y el elemento vuelve al valor inicial posición

57. Cuénteme sobre la diferencia entre píxeles del dispositivo, píxeles CSS, píxeles independientes del dispositivo, dpr y ppi.

1. En el caso de no escalar, 1 píxel CSS es igual a 1 píxel independiente del dispositivo 
2. El píxel del dispositivo no cambia después de ser producido por la pantalla, pero el píxel independiente del dispositivo es una unidad virtual que cambiará 
3. En en el lado de la PC, 1 píxel independiente del dispositivo = 1 píxel del dispositivo (al 100%, sin escalar) 
4. En el terminal móvil, 1 píxel independiente del dispositivo = 1 píxel del dispositivo debajo de la pantalla estándar (160 ppp) 
5. Proporción de píxeles del dispositivo (dpr) = Píxeles del dispositivo/píxeles independientes del dispositivo 
6. Píxeles por pulgada (ppi), cuanto mayor sea el valor, más clara será la imagen

58. ¿Cuénteme sobre su comprensión de BFC?

1. Bfc es un contexto de formato a nivel de bloque. Es un área de representación en la página y tiene su propio conjunto de reglas de representación. 2. El 
propósito de Bfc es formar un espacio completamente independiente del mundo exterior, de modo que el sub interno -Los elementos no afectarán a los elementos externos 
3. Bfc es un contenedor aislado e independiente en la página. Los elementos secundarios dentro del contenedor no afectarán a los elementos externos y viceversa. 
4. El área de Bfc no se superpondrá con el área. de elementos flotantes

59. Dime por qué TCP necesita un protocolo de enlace de tres vías y un protocolo de enlace de cuatro vías.

El protocolo de enlace de tres vías es para establecer un canal de transmisión de datos confiable, y el protocolo de enlace de cuatro vías es para garantizar que la conexión se cierre después de recibir los datos. 
1. El protocolo de enlace de tres vías significa que cuando se establece una conexión TCP, el cliente y el servidor deben enviar un total de tres paquetes. La función principal es confirmar si las capacidades de aceptación y envío de ambas partes son normales y especificar su propia secuencia de inicialización para la posterior transmisión confiable. Preparación 
2. Agitar cuatro veces significa que TCP finaliza una conexión, lo que requiere cuatro movimientos de las manos. Cuando el servidor recibe el mensaje de desconexión del cliente, no cerrará la conexión inmediatamente, pero sí primero envíe un paquete ACK para informarle al cliente Después de recibir una solicitud para cerrar la conexión, la conexión solo se desconectará después de que se hayan enviado todos los mensajes del servidor

60. ¿Cuáles son los medios para optimizar el rendimiento del front-end?

1. Los recursos se comprimen y fusionan para reducir las solicitudes http. 
2. Las imágenes se optimizan, usando png para reducir su tamaño. 
3. Los códigos no centrales se cargan de forma asincrónica. 
4. Usando la caché del navegador, los archivos de recursos se almacenan localmente y la siguiente llamada se puede tomar directamente desde el caché 
5. Se puede utilizar CDN Distribuir la carga y mejorar el rendimiento 
6. Análisis previo de DNS 
7. Habilitar la compresión de código Gzip 
8. Reducir las cookies innecesarias

61. ¿Al menos tres formas de despejar la parte delantera flotante?

1. Método de etiqueta adicional: coloque un div vacío delante del elemento flotante que debe borrarse y establezca el atributo clear para este div vacío: ambos 2. Establezca el atributo de desbordamiento para el elemento principal en oculto o automático 
3 
.: después Use pseudoelementos para borrar todo Etiqueta flotante -> agregue un elemento a nivel de bloque delante de la etiqueta flotante

62. ¿Qué son el almacenamiento en caché fuerte y el almacenamiento en caché de negociación?

Después de que el navegador solicita un recurso por primera vez, cuando necesita volver a solicitarlo, el navegador primero obtendrá la información del encabezado del caché de recursos y luego juzgará si el recurso ha caducado en el caché local de acuerdo con Cache-Control y caduca. . Si no ha caducado, la información del recurso se obtendrá directamente del caché local y el navegador ya no volverá a solicitar el recurso al servidor. Si caduca, deberá reenviar la solicitud y volver a almacenar en caché el recurso. y actualice el tiempo de caché. 
1. El almacenamiento en caché fuerte está controlado por los campos Expires y Cache-Control en el encabezado de la solicitud http, que se utilizan para indicar el tiempo de caché de los recursos. Expires es la especificación de http1.0 y su valor es una cadena de tiempo absoluta en formato GMT. 
2. El servidor utiliza la caché de negociación para determinar si el recurso de caché está disponible y ha caducado. Debido a que el servidor necesita confirmar al navegador si el recurso de caché está disponible, los dos deben comunicarse y el proceso de comunicación es enviar una solicitud, por lo que debe haber un identificador especial en el encabezado para permitir que el servidor confirme si el recurso de caché está disponible. El recurso solicitado se puede almacenar en caché y acceder a él.

63. Cuénteme sobre su comprensión de las pilas y las colas. ¿Escenario de aplicación?

1. La pila (pila), también conocida como pila, es una tabla lineal con operaciones limitadas. Se limita a una tabla lineal que solo realiza operaciones de inserción y eliminación al final de la tabla. 2. La pila almacena datos de acuerdo con 
el principio de primero en entrar, último en salir y los datos que ingresan primero se colocan en la parte inferior de la pila y los últimos datos están en la parte superior de la pila. Cuando sea necesario leer los datos, los datos se extraerán de la parte superior de la pila, que tiene una función de memoria. 3. La cola es 
muy similar a la pila. La cola es una tabla lineal especial. La característica especial es que solo permite operaciones de eliminación en el extremo frontal de la tabla (frente ), y operaciones de inserción en la parte posterior (parte posterior) 
de la tabla. Primero se elimina de la cola, por lo que la cola también se llama primero en entrar, primero en salir 
5. Escenario: la pila se puede usar en llamadas a funciones y recursión, y cuando el compilador analiza la sintaxis de entrada; la cola se puede utilizar al atravesar un árbol binario

64. Cuénteme sobre su comprensión de git rebase y git merge. ¿la diferencia?

1. En un proyecto que utiliza git para la gestión de versiones, cuando se completa el desarrollo de una función y se fusiona en la rama maestra, habrá dos formas: git merge y git rebase 2. Tanto git rebase como git merge tienen el mismo efecto 
. ambos fusionan el envío de una rama a otra rama, pero el principio es diferente 
3. git merge fusiona la rama actual en la rama especificada: git merge xxx, git rebase fusiona la rama o se fusiona en la confirmación especificada: git rebase -I < commit> 
4. Fusionar ramas mediante merge agregará una confirmación de fusión y luego vinculará el historial de las dos ramas; rebase moverá toda la rama a otra rama, integrando efectivamente todas las ramas.

65. Dime ¿cuáles son los comandos más utilizados de git?

1. git status: realiza un seguimiento del estado actual del almacén, si se ha realizado algún cambio 
2. git diff novel.txt: ve la operación del contenido modificado 
3. git reflog: ve el número de versión 
4. git log: ve el historial de envíos 
5. git reset --número de versión completa: ir a ese número de versión 
6. git checkout -- novel.txt: puede descartar la modificación del espacio de trabajo 
7. nombre de archivo rm: eliminar el archivo (archivo que no ha sido enviado al espacio de trabajo) 
8. nombre de archivo git rm: eliminar archivos en el repositorio 
9, git rama dev: crear una rama de desarrollo 
10, git rama -a: ver la rama y en qué rama se encuentra actualmente 
11, git checkout dev: Cambie a la rama dev 
12, git merge dev: combine la rama actual con la rama dev para fusionar

66. ¿Comunicación del componente Vue?

La comunicación por componentes significa que el remitente transmite información al receptor en un determinado formato a través de un determinado medio para lograr una determinada clasificación de propósito 
: comunicación entre componentes padre e hijo, comunicación entre componentes hermanos, comunicación entre abuelos y descendientes Comunicación, comunicación entre no relacional componentes 
Hay 8 esquemas de comunicación convencionales en vue: 
    1. Pasar a través de accesorios: el subcomponente establece el atributo de accesorios, define los parámetros pasados por el componente principal receptor y el componente principal pasa el literal en el uso de la etiqueta del subcomponente 2. Disparador un 
    evento personalizado a través de $emit: el componente secundario activa un evento personalizado a través de $emit, el segundo parámetro de $emit es el valor pasado y el componente principal vincula al oyente para obtener el parámetro pasado por el componente secundario 3. Utilice ref 
    : El componente principal establece ref cuando usa el componente secundario, y el componente principal obtiene datos configurando el componente secundario ref 
    4. EventBus: crea un bus de eventos central EventBus, y los componentes hermanos activan eventos personalizados a través de $emit, $emit second El primero El parámetro es el valor pasado. 
Otro componente hermano escucha eventos personalizados a través de $on 
    5, $parent o $root: construye un puente de comunicación a través del ancestro común $parent o $root 
    6, atributos y oyentes: establece el atributo por lotes $attrs y $listeners, que contienen enlaces de atributos (excepto clase y estilo) que no se reconocen (ni se seleccionan) como accesorios en el ámbito principal. Los componentes internos se pueden pasar a través de v-bind="$attrs" 
    7. Proporcionar e inyectar: define el atributo de provisión en el componente ancestro, devuelve el valor pasado y recibe el valor pasado por el componente mediante inyección en el componente descendiente 
    8 .Vuex: la función es equivalente a Un contenedor para almacenar variables compartidas

67. ¿Cuénteme sobre su comprensión de vuex? ¿Escribir el código central de su principio?

Vuex es una biblioteca y patrón de gestión de estado desarrollada específicamente para aplicaciones Vue.js. Utiliza un almacenamiento centralizado para gestionar el estado de todos los componentes de la aplicación y utiliza las reglas correspondientes para garantizar que el estado cambie de manera predecible. 
Cinco atributos principales de vuex: estado, captador, mutación, acción, módulo 
    1, estado: almacenar datos, almacenar estado; después de registrar la tienda en la instancia raíz, use this.$store.state para acceder; correspondiente a los datos en vue ; store El modo de datos responde y el componente vue lee datos de la tienda. Si los datos cambian, el componente se actualizará en consecuencia. 
    2. Getter: puede considerarse como una propiedad calculada de la tienda, su valor de retorno se almacenará en caché de acuerdo con sus dependencias y solo se recalculará cuando cambien sus valores dependientes. 
    3. Mutación: la única forma de cambiar el estado en la tienda de Vuex es enviar una mutación. 
    4. acción: contiene cualquier operación asincrónica e indirectamente cambia el estado enviando una mutación. 
    5. módulo: divide la tienda en módulos, cada módulo tiene submódulos de estado, mutación, acción, captador e incluso anidados.

68. ¿Cuáles son las similitudes y diferencias entre accesorios y estado? ¿Bajo qué circunstancias se ejecutará el método de renderizado?

Diferencias: 
1. Los accesorios no se pueden modificar dentro del componente, pero el estado se puede modificar dentro del componente 
2. Los accesorios del autocomponente se pueden modificar desde el componente principal, pero el estado del autocomponente no se puede modificar desde el componente principal 
Los mismos puntos: 
1. props y state Ambos son datos sin procesar exportados a HTML. 
2. Tanto los accesorios como el estado son deterministas. Si el componente que escribimos es una combinación de los mismos accesorios y el estado 3. Generan resultados diferentes, entonces debemos haber hecho algo mal 4. Tanto los accesorios 
como el estado activarán actualizaciones de renderizado 
5 Ambos .props y state son objetos JS puros (use typeof para juzgar, el resultado es object) 6. 
¿Bajo qué circunstancias 
se puede ejecutar el valor inicial de props y state desde el componente principal ? 
    1. Cuando el componente de clase llama a setState para modificar el estado 
    2. Cuando el componente de función modifica el estado mediante useState Hook 
    3. Cuando se vuelve a renderizar el componente de clase 
    4. Cuando se vuelve a renderizar el componente de función

69. ¿Cuáles son las dos nuevas funciones de gancho en reaccionar? ¿Cuál es la diferencia con la serie de testamentos eliminados?

¿Dos nuevas funciones de enlace de ciclo de vida en React? 
1. 
La función de getDerviedStateFromProps: obtiene el estado derivado de los accesorios 
2. 
La función de getSnapshotBeforeUpdate: obtiene una instantánea antes de que se actualice el componente, generalmente se usa junto con componenteDidUpdate, el valor de retorno en getSnapBeforeUpdate se pasará a componenteDidUpdate como tercer parámetro Y 
componenteDidUpdate intercalará el renderizado en el medio. De hecho, su función principal es registrar la información del dom antes de la actualización y pasarla a componenteDidUpdate antes de que el render cambie el dom. 
2. ¿La función de gancho fue eliminada por el nuevo ciclo de vida de React? 
1. componenteWillMount 
2. componenteWillReceiveProps 3. 
Resumen 
de componenteWillUpdate 
    1. Lo que puede ser necesario hacer en componenteWillMount (algunas operaciones de inicialización de datos deben manejarse en este gancho), el constructor y el componenteDidMount también se pueden hacer, o incluso mejor, este método fue descartado. 
    2. El comportamiento real de componenteWillReceiveProps no coincide con el nombre, porque ha sido reemplazado por getDerivedStateFromProps debido a la inestabilidad; 
    3. Por la misma razón, componenteWillUpdate se reemplaza por getSnapshotBeforeUpdate.

70. ¿Cuáles son las características y el significado de CDN?

1. CDN significa red de distribución de contenido, que es una red virtual inteligente basada en la red existente, distribuida en servidores perimetrales en todo el mundo. La idea básica es evitar cuellos de botella y enlaces en Internet que puedan afectar la velocidad y estabilidad de la transmisión de datos, para hacer que la transmisión de contenidos sea más rápida y estable.
2. CDN significa copiar datos del servidor original a otros servidores. Cuando los usuarios visitan, pueden hacerlo en servidores que replican el contenido de los datos. Su propósito es permitir a los usuarios obtener el contenido que necesitan más rápido y mejor, resolver la congestión de la red y mejorar la velocidad de respuesta de los usuarios que visitan sitios web. La aceleración de CDN tiene un costo bajo y una velocidad rápida, y es adecuada para sitios web con una cantidad relativamente grande de visitas.
Características:
1. Aceleración de caché local: mejora la velocidad de acceso a los sitios web empresariales (especialmente los sitios web que contienen una gran cantidad de imágenes y páginas estáticas) y mejora en gran medida la estabilidad de los sitios web anteriores.
2. Servicio espejo: eliminar el impacto de los cuellos de botella en la interconexión entre diferentes operadores, lograr la aceleración de la red entre operadores y garantizar que los usuarios de diferentes redes puedan obtener una buena calidad de acceso.
3. Aceleración remota: los usuarios de acceso remoto seleccionan de forma inteligente y automática servidores de caché basados en la tecnología de equilibrio de carga DNS y seleccionan el servidor de caché más rápido para acelerar el acceso remoto.
4. Optimización del ancho de banda: genera automáticamente el servidor de caché espejo remoto del servidor. Cuando los usuarios remotos acceden, pueden leer datos del servidor de caché, reducir el ancho de banda del acceso remoto, compartir el tráfico de la red y reducir la carga en el servidor WEB original.
5. Antiataque de clúster: los nodos CDN ampliamente distribuidos y el mecanismo de redundancia inteligente entre nodos pueden prevenir eficazmente la intrusión de piratas informáticos, reducir el impacto de varios ataques DDoS en el sitio web y garantizar una mejor calidad del servicio al mismo tiempo.

71. ¿Qué es un cierre y cuál es el escenario de aplicación?

1. Un cierre es una función que puede leer las variables internas de otras funciones, para decirlo sin rodeos, un cierre es una función, pero está dentro de otras funciones. 
2. En JavaScript, solo las subfunciones dentro de una función pueden leer variables locales, por lo que los cierres pueden entenderse simplemente como "funciones definidas dentro de una función" Escenarios de aplicación: 1. Imitación del alcance a nivel de bloque: temporizador 2. Contador de 
puntos 
    enterrados 
    : algunos métodos de recopilación de datos comúnmente utilizados para productos 
    3. Currying: un método para convertir una función multiparamétrica en una función de un solo parámetro

72. Cuénteme sobre su comprensión del kernel del navegador.

El núcleo se divide principalmente en motor de renderizado y motor js 
1. Motor de renderizado: responsable de obtener el contenido de la página web (HTML, XML, imágenes, etc.), organizar la información (como css) y calcular el método de visualización de la página web y luego enviarla al monitor o a la impresora. Los diferentes núcleos de navegador tienen diferentes interpretaciones de sintaxis para las páginas web, por lo que los efectos de representación también son diferentes. Todos los navegadores web, clientes de correo electrónico y aplicaciones que necesitan editar y mostrar contenido de red requieren el kernel 
2, motor JS: analizar y ejecutar JavaScript para lograr efectos dinámicos en páginas web. 
Al principio, el motor de renderizado y el motor js no se distinguían claramente. Más tarde, el motor js se volvió cada vez más independiente y el kernel tendía a referirse solo al motor de renderizado.

73. ¿Cuántas formas de limpiar el flotador? ¿Pros y contras de cada uno?

Borrar flotante: para resolver el problema del colapso de la altura interior del elemento principal debido a la flotación del elemento secundario. 
Método: 
1. Método de etiqueta adicional (después de la última etiqueta flotante, agregue una nueva etiqueta y configúrelo en claro: ambos para it;) Ventajas: Popular Fácil de entender y más conveniente; Desventaja: Agregar etiquetas sin sentido, semántica deficiente 
2. Agregar atributo de desbordamiento al elemento principal (agregar desbordamiento: oculto al elemento principal) Ventaja: El código es conciso; Desventaja: Cuando el contenido aumenta, es fácil hacer que el contenido se oculte sin salto de línea automático 3. Utilice el pseudoelemento posterior 
para borrar el flotador Ventajas: se ajusta a la idea de flotación cerrada y la semántica estructural es correcta; Desventaja: IE6-7 no admite pseudoelementos 
4. Use los pseudoelementos dobles antes y después para borrar el flotador Ventajas: el código es más conciso Desventaja: use zoom: 1 para activar haslayout

74. Si necesitas escribir una animación manualmente, ¿cuánto crees que es el intervalo de tiempo mínimo y por qué?

La frecuencia predeterminada de la mayoría de los monitores es 60 Hz, es decir, se actualiza 60 veces por segundo, por lo que el intervalo mínimo teórico es 1/60*1000 ms = 16,7 ms. Para la representación del navegador y la experiencia del usuario, la configuración mínima de 0,1-0,3 s es la mejor

75. Cuéntame sobre la diferencia entre Real DOM y Virtual DOM. ¿Ventajas y desventajas?

1. DOM real, DOM real, significa modelo de objetos de documento, que es una abstracción de texto estructurado. Cada nodo representado en la página es una estructura DOM real. 2. Dom virtual, que esencialmente existe en forma de objetos JavaScript 3.
El El propósito de
crear un DOM virtual es representar mejor los nodos virtuales en la vista de página. Los nodos del objeto DOM virtual corresponden a las propiedades del DOM real uno por uno. 4. La diferencia entre los dos es la siguiente: el DOM virtual DOM
no
realiza operaciones de composición tipográfica y redibujado, y el DOM real con frecuencia reorganizará y redibujará
la pérdida total del DOM virtual es "adición, eliminación y modificación de DOM virtual + adición, eliminación y modificación de diferencia de DOM real + composición tipográfica y redibujado", el La pérdida total del DOM real son las
ventajas y desventajas de "DOM real: adiciones, eliminaciones y modificaciones completas + composición tipográfica y rediseño".
Ventajas del DOM real: fácil de usar
Desventajas:
1. Baja eficiencia, velocidad de análisis lenta, alto uso de memoria
2. Rendimiento deficiente: la operación frecuente del DOM real puede conducir fácilmente a redibujados y reflujos
Las ventajas de usar DOM virtual son las siguientes:
1 .Simple y conveniente: si usa el DOM real para completar la página manualmente, es engorroso y propenso a errores, y también es difícil de mantener en aplicaciones a gran escala. 2. Rendimiento: el uso de DOM virtual puede evitar actualizaciones frecuentes de manera efectiva
. del número DOM real y reducir múltiples redibujos 3. Multiplataforma
: con la ayuda del DOM virtual, React brinda capacidad multiplataforma y un conjunto de código se ejecuta en múltiples terminales
Desventajas:
1. En algunas aplicaciones con un rendimiento extremadamente alto requisitos, el DOM virtual no puede ser objeto de una optimización extrema
2. Al renderizar una gran cantidad de DOM por primera vez, debido al cálculo de una capa adicional de DOM virtual, la velocidad es ligeramente más lenta de lo normal.

76. ¿Cuéntame sobre el mecanismo de eventos de reacción?

1. React en sí implementa un conjunto de su propio mecanismo de eventos, incluido el registro de eventos, la síntesis de eventos, la difusión de eventos, el envío de eventos, etc. Aunque es diferente del original, también se completa bajo el mecanismo de eventos basado en navegador. 
2. Los eventos registrados en React eventualmente estarán vinculados al DOM del documento, no al DOM correspondiente al componente React (la reducción de la sobrecarga de memoria se debe a que todos los eventos están vinculados al documento y otros nodos no tienen eventos vinculantes) 3. 
React Implementa un conjunto de mecanismos de propagación de eventos, por eso nuestro event.stopPropagation() no es válido. 
4. React retrocede desde el componente activado hasta el componente principal en forma de cola y luego llama a la devolución de llamada definida en su JSX 
5. React tiene su propio evento sintético SyntheticEvent

77. Cuénteme sobre su comprensión de la arquitectura de fibra. ¿Qué problema resolvió?

React Fiber es un cambio y optimización importante que Facebook ha realizado en React en más de dos años. Es una reimplementación del algoritmo central de React. 
En reaccionar, se realizan principalmente las siguientes operaciones: 
    1. La prioridad aumenta para cada tarea y las tareas con alta prioridad pueden interrumpir las tareas con baja prioridad. Luego vuelva a ejecutar las tareas de baja prioridad. 
    2. Agregue tareas asincrónicas y llame a la API requestIdleCallback. Cuando el navegador está inactivo, 
el árbol dom diff se convierte en una lista vinculada. Un dom corresponde a dos fibras (una lista vinculada), correspondientes a Dos colas, ambas para encontrar la tarea interrumpida y volver a ejecutarla 
    3. Desde la perspectiva de la arquitectura, Fiber es una reescritura del algoritmo central de React (es decir, el proceso de reconciliación) 
    4. Desde la perspectiva de la codificación, La fibra es la estructura de datos interna definida, que es la unidad de nodo de la estructura del árbol de fibra, que es el DOM virtual bajo la nueva arquitectura de React 16.

78. ¿Cuál es el principio de reacción diff?

1. De acuerdo con Vue, React introduce el concepto de DOM virtual para evitar en gran medida operaciones Dom no válidas, lo que mejora en gran medida la eficiencia de construcción de nuestras páginas. El algoritmo diff es descubrirlo de manera más eficiente comparando el DOM virtual antiguo y el nuevo. Cambios de Dom.
El proceso de operación se divide principalmente en tres capas: capa de árbol, capa de componente, capa de elemento
1 y capa de árbol: la capa de árbol ignora la operación de movimiento entre niveles de los nodos DOM y solo compara los nodos DOM al mismo tiempo. nivel. Una vez que se descubre que el nodo no existe, elimine directamente el nodo y todos los subnodos siguientes
2. Capa de componente: cuando encuentre el mismo tipo de componente, siga la diferencia del árbol para realizar una comparación jerárquica. Cuando encuentre un diferente Tipo de componente, juzgue directamente los diferentes componentes Es un componente sucio y reemplaza todos los nodos secundarios bajo el componente. Cuando sepa que no hay cambios en el DOM virtual de este componente, puede usarlo manualmente. Debe usar ComponentUpdate para juzgar si se requiere diff, lo que mejora aún más la eficiencia y el rendimiento de diff 3.
Capa de elemento: inferior al mismo nivel, frente a nuevos nodos, se puede implementar la operación de inserción, frente a nodos redundantes, la operación de eliminación se puede realizar; frente a nodos transpuestos, se puede realizar la operación de movimiento

79. ¿Cómo usar CSS para realizar un triángulo?

1. Borde: dado un elemento con un ancho y alto de 0, cualquier valor de su borde se cruzará directamente y podemos usar esta intersección para crear un triángulo. En otras palabras, el atributo de borde se compone de triángulos. Si desea que un triángulo apunte hacia la derecha, puede hacer visible el lado izquierdo del borde y configurar los otros lados para que sean transparentes: 2. gradiente lineal: 
lineal- El gradiente debe combinarse con la imagen de fondo para lograr un Triángulo. Implementemos un triángulo paso a paso usando gradientes. 
3. clip-path: clip-path consiste en usarlo para dibujar un polígono (o círculo, elipse, etc.) y posicionarlo dentro del elemento. De hecho, el navegador no dibuja nada fuera de la ruta del clip, por lo que lo que vemos es el borde de la ruta del clip. 
4transform: rotar con desbordamiento: oculto para dibujar un triángulo

80. ¿Cuál es la función de mustComponentUpdate?

1. De acuerdo con el valor de retorno de mustComponentUpdate(), determine si la salida del componente React se ve afectada por el estado actual o los cambios de accesorios. El comportamiento predeterminado es que el componente se vuelva a representar cada vez que cambia el estado. 
2. Los cambios en los accesorios y los valores de estado en reaccionar harán que el componente se vuelva a renderizar. El uso de shouldComponentUpdate es para reducir la representación innecesaria del renderizado. Devuelve un valor booleano, luego compara el DOM virtual y descubre si se requiere una actualización del DOM real

81. Cuénteme sobre su comprensión de git rebase y git merge. ¿la diferencia?

1. En un proyecto que usa git para administrar la versión, cuando se completa el desarrollo de una característica y se fusiona en la rama maestra, se usarán git rebase y git merge 2. Ambos tienen la misma función: enviar una rama Fusionar 
en otra rama, pero el principio es diferente 
3. Git merge fusiona la rama actual en la rama especificada: git merge xxx, git rebase se fusiona en la confirmación especificada: git rebase -I <commit> 
4. La rama se fusiona mediante merge Una confirmación de fusión se agregará, y luego se vinculará el historial de las dos ramas; rebase moverá toda la rama a otra rama, integrando efectivamente las confirmaciones en todas las ramas

82. En el proceso de uso de redux, ¿cómo evitar la duplicación constante del tipo de acción definido?

ES6 introduce un nuevo tipo de datos primitivo Símbolo, que representa un valor único. 
    El nuevo comando no se puede utilizar antes de la función Símbolo; de lo contrario, se informará un error. Esto se debe a que el símbolo generado es un valor de tipo primitivo, no un objeto. La función Símbolo puede aceptar una cadena como parámetro, que representa una descripción de una instancia de Símbolo, principalmente para mostrarla en la consola o convertirla en una cadena. , que es más fácil de distinguir.

83. ¿Hablar del dom virtual en React? ¿Cuál es la relación entre diff y key durante el cálculo de dom virtual?

1. De hecho, es solo una capa de abstracción del DOM real. El árbol se basa en objetos JavaScript (nodos VNode), y los atributos de los objetos se utilizan para describir los nodos. Finalmente, el árbol se puede asignar a el entorno real a través de una serie de operaciones. Crear un DOM virtual es representar mejor los nodos virtuales en la vista de página, de modo que los nodos del objeto DOM virtual correspondan a las propiedades del DOM real uno por uno. 2. Simular el documento web nodos a través de JS para
generar un árbol de objetos JS (DOM virtual), y luego Da otro paso para generar un árbol DOM real y luego dibújalo en la pantalla. Si algún contenido cambia más adelante, React regenerará un nuevo árbol DOM virtual, luego comparará y diferenciará con el árbol DOM virtual anterior, empaquetará la diferencia en un parche, lo aplicará al DOM real y luego lo mostrará en la pantalla para navegar. dispositivo.
¿Cuál es la relación entre diff y clave cuando se calcula el dom virtual?
1. React necesita mantener dos árboles DOM virtuales al mismo tiempo: uno representa la estructura DOM actual y el otro se genera cuando el estado de React cambia y está a punto de volver a renderizarse. React compara las diferencias entre estos dos árboles para decidir si modificar la estructura DOM y cómo modificarla. Este algoritmo se llama algoritmo Diff.
2. clave Cuando un nodo en el mismo nivel agrega un atributo clave exclusivo de otros nodos en el mismo nivel, cuando su posición en el nivel actual cambia. Después de que el algoritmo de reacción compara los nodos nuevos y antiguos, si encuentra un nodo nuevo y uno antiguo con el mismo valor clave, realizará una operación de movimiento (y luego seguirá la estrategia original para profundizar en el nodo para comparar y actualizar). la diferencia), en lugar de eliminar el nodo antiguo de acuerdo con la estrategia original. Una operación que crea un nuevo nodo. Sin duda, esto mejora enormemente el rendimiento de React y la eficiencia de renderizado.

84. Props.children de React usa la función de mapa para recorrer y recibirá una visualización de excepción. ¿Cómo se debe atravesar?

1. Si el componente actual no tiene un tipo de datos de nodo secundario, no está definido 
2. Si hay un tipo de datos de nodo secundario, es objeto. 
3. Cuando hay varios nodos secundarios, será una matriz. Solo cuando hay varios nodos, el método del mapa se puede llamar directamente. React proporciona un método react.children.map(), que puede atravesar de forma segura los objetos del nodo secundario. .

85. ¿Cuénteme sobre su comprensión de immutable.js?

1. Immutable.js se usa para optimizar el rendimiento en reaccionar 
2. El uso de inmutable en reaccionar puede reducir algunas renderizaciones innecesarias de la página y no necesita realizar una comparación en profundidad como en reaccionar 
3. Inmutable puede ser directo y rápido En contraste , se completa la renderización, lo que mejora la eficiencia de la renderización y reduce el consumo de rendimiento. 
4. Inmutable es inmutable. En la computadora, se refiere a datos que no se pueden cambiar una vez que se crean. 
Cualquier modificación, adición o eliminación del objeto Inmutable ser Devolver un nuevo objeto inmutable 
El principio de la implementación inmutable es la estructura de datos persistentes (estructura de datos persistentes): 
    1. Utilice una estructura de datos para guardar datos 
    2. Cuando se modifican los datos, se devolverá un objeto, pero el nuevo objeto será actualizado lo antes posible. Posible uso de estructuras de datos anteriores sin desperdiciar memoria.

86. Redux es originalmente sincrónico, ¿por qué puede ejecutar código asincrónico? ¿Cuál es el principio de realización? ¿Cuál es el principio de implementación del middleware?

1. Redux-thunk es un middleware que admite operaciones asincrónicas. 
2. Para ejecutar una operación asincrónica, primero debe descargar un procesador y usarlo para realizar una operación asincrónica. Admite operaciones asincrónicas. Puede usar Dispatch y getState. para obtener datos o estado 3. 
Redux es una biblioteca de gestión de estado. El núcleo de redux consta de tres partes: almacén, acciones y reductores. 
4. Envíelo a las acciones de la tarea a través del envío, devuelva un objeto de promesa en las acciones, y luego enviarlo a los reductores a través del despacho 
5. En los reductores Interpretación pasando tipo y datos

87. ¿Cuál es la mayor diferencia entre acción sincrónica y acción asincrónica en redux?

1. Acción sincrónica: después de ejecutar la función de envío, la función pura del reductor correspondiente se ejecuta inmediatamente. Después de ejecutar el reductor, el estado cambia inmediatamente. En este momento, la función store.getState se utiliza para obtener el último valor de estado; 2. 
Acción asincrónica: en principio, redux no proporciona una solución para acciones asincrónicas. Las acciones asincrónicas deben depender de soluciones de middleware de terceros (como redux-thunk). Después de enviar una acción asincrónica (esencialmente una función de envío), el objetivo El estado no responde inmediatamente, pero depende de la lógica dentro de la función asincrónica para determinar cuándo responde el estado. 
3. Diferencias: 
    Primero, distinga entre redux y reaccionar-redux. Redux es un módulo separado que también se puede usar en otros marcos, mientras que reaccionar-redux nació para reaccionar para administrar datos. 
    La idea de diseño de redux: la aplicación web es una máquina de estados, la vista y el estado están en correspondencia uno a uno y todos los estados se almacenan en un objeto.

88. ¿Cuáles son las diferencias y escenarios de uso entre redux-saga y redux-thunk?

1. Usando el código de redux-thunk, cuando devolvemos una función, la tienda llamará a la función devuelta por nosotros y expondrá el envío para que la usemos. Para todo el proceso de redux-thunk, espera a que se complete la ejecución de la tarea asincrónica, luego llamamos a despacho y luego vamos a la tienda para llamar a los reductores 2. Usando el código de redux-saga, cuando el tipo de 
acción de nuestro despacho no está en el reductor, la función de escucha takeEvery de redux-saga lo escuchará y ejecutará el método put cuando la tarea asincrónica tenga un resultado, lo que equivale a enviar y activar el envío nuevamente. Para todo el proceso de redux-saga, después de ejecutar la acción y el reductor, se juzga si existe tal 
diferencia de acción en el reductor: 
    1. El tiempo de las tareas asincrónicas de procesamiento de redux-thunk y redux-saga es diferente. Para redux-saga, en comparación con 2. Sobre la base de la acción redux, se ha reabierto una rama de la acción asincrónica para manejar tareas asincrónicas por separado 3. 
    Saga básicamente ha configurado un mecanismo de monitoreo de eventos asyc por sí mismo, y la cantidad La cantidad de código ha aumentado considerablemente. Según mi propia experiencia, redux-thunk es más simple y está más estrechamente relacionado con el propio redux.

89. ¿Por qué el bucle for ordinario es más eficiente que el bucle forEach?

1. El bucle for consiste en ejecutar repetidamente el código en el bucle a través del subíndice, tiene funciones potentes y puede obtener elementos a través del índice. Es más conveniente cuando se trata de procesamientos más complejos. 
2. El método de bucle forEach() se utiliza para llamar a cada elemento de la matriz y pasar el elemento a la función de devolución de llamada. Algunos foreach también se denominan bucle for mejorado; forEach es en realidad una versión especial simplificada del bucle for. El bucle forEach no ejecutará la función de devolución de llamada para una matriz vacía. 
Diferencias: 
    1. Recorrido: el bucle for recorre en orden, forEach usa el iterador para recorrer 
    2. Estructura de datos: el bucle for accede a los elementos aleatoriamente, foreach accede a los elementos en una lista enlazada secuencial 
    3. Rendimiento: para la lista de matrices, está en orden La tabla puede Se puede acceder secuencialmente usando el bucle for, y la velocidad es relativamente rápida; usar el bucle foreach será ligeramente más lento que el bucle for. Para linedlist, es una lista enlazada individualmente, y el bucle for necesita leer el siguiente campo del primer elemento cada vez para leer, lo cual es muy lento; el uso de foreach puede leer directamente el nodo actual y los datos son más rápidos.

90. ¿Cuál es la solución de 1 píxel para el terminal móvil?

En el desarrollo web móvil, establezca el borde en 1 píxel en el borrador del diseño de la interfaz de usuario. Si aparece el borde: 1 px durante el proceso de desarrollo front-end, la prueba encontrará que en algunos modelos, 1 px será más grueso, que es un móvil más clásico. terminal Problema de píxel de 1 px 
Solución: 
1. Decimal: 0,5 px, creo que el navegador definitivamente lo admitirá lentamente; en la actualidad, si se puede usar, puedes piratearlo; 
2. No se recomienda la solución de sombra y borde-img usar 
3. La imagen de fondo y el zoom se pueden usar juntos en el proyecto, como usar el zoom para una sola línea y simular los cuatro cuadros con una imagen de fondo. Bueno, si quieres esquinas redondeadas, no hay nada que puedas hacer. 4. Se recomienda utilizar 
transformaciones y pseudoclases.

91. ¿Cuál es el mecanismo de escala en flexbox?

1. El atributo flex-grow de configuración del elemento del cuadro flexible define la relación de ampliación del elemento. El valor predeterminado es 0. Cuanto mayor sea el valor, más fuerte será la ampliación y no se admiten valores negativos; 2. El flex El atributo -shrink 
define la relación de contracción del elemento. El valor predeterminado es 1. Cuanto mayor sea el valor, más fuerte será la reducción. Los valores negativos tampoco son compatibles; 3. 
El atributo flex-basis define el espacio del eje principal ocupado por el elemento antes de asignar espacio sobrante. El navegador calcula si el eje principal es redundante según este atributo. Su valor predeterminado es automático, que es el tamaño original del proyecto.

92. ¿Cuéntame sobre tu comprensión de mixin in vue?

1. Mixin es una clase en un lenguaje de programación orientado a objetos que proporciona implementaciones de métodos. Otras 1 clases pueden acceder a métodos en mixin sin ser llamadas subclases. 2. Mixin en Vue es una distribución reutilizable de componentes de Vue Función 3. Es 
esencialmente 
una js, que puede contener cualquier opción de función en el componente, como datos, componentes, métodos, creado, etc. 4. 
Pase la función pública a la opción mixins en forma de objeto. Cuando el componente usa el objeto mixins, todas las opciones del objeto mixins se mezclan con las opciones del propio componente

93. ¿Cuál es la diferencia entre el bucle for...in y el bucle for...of?

Tanto for in como for pertenecen al recorrido 
1. El índice de la matriz cuando se realiza el recorrido, el valor del elemento de la matriz cuando se realiza el recorrido 
2, for in es más adecuado para atravesar objetos y también puede atravesar matrices. habrá algunos problemas; for de matrices, objetos y otras colecciones con objetos iteradores 
3. for in siempre obtiene la clave del objeto o el subíndice de la matriz o cadena; for of obtiene el valor del objeto o el valor de la matriz o cuerda

94. ¿Qué es el modelo de publicación-suscripción y escribe su código de implementación principal?

1. Modo de publicación y suscripción: el suscriptor (suscriptor) envía el evento de suscripción al centro de envío (tema) a través del registro de eventos (suscripción), y el centro de envío (tema) guarda la información de registro del suscriptor (función de devolución de llamada). publica Cuando ocurre un evento, el mensaje publicado se envía al centro de despacho a través de la publicación de eventos (Publicar), y luego el centro de despacho procesa de manera uniforme el mensaje que el suscriptor registra para el evento (ejecuta la función de devolución de llamada al registrarse) 2. Implementación: // Crear una instancia de un modo de suscripción 
de publicación 
    , se pueden lograr múltiples aislamientos de eventos nuevos, normalmente un proyecto es suficiente 
    const pub1 = new Pubsub() 
    // llamar al ejemplo 
    pub1.topic("on-sleep) // crear un tema de suscripción durmiente 
    / /estudiante 1 Suscríbete al modo de suspensión 
    pub1.subscribe("on-sleep",(a)=>{ 
        console.log("sleep") 
        console.log(a) 
    }) 
    //El estudiante 2 se suscribe al modo de suspensión, la devolución de llamada es diferente 
    pub1. subscribe("on- sleep",(a)=>{ 
        console.log("sleep2") 
        console.log(a) 
    }) 
 
    setTimeout(()=>{ 
        //El tiempo casi se acaba, hazles saber que es el momento ¡dormir!
        pub1.publish("en-dormir",{info:"¡Es hora de dormir!"}) 
    },2000)

95. ¿Cuénteme sobre su comprensión de la ventana gráfica?

1. En un navegador, el área que ve es la ventana gráfica. 
2. En la página del lado de la PC, no hay necesidad de distinguir la ventana gráfica, porque la ventana gráfica de diseño y la ventana gráfica visual son las mismas. 
3. Pero en dispositivos móviles. En el terminal móvil, la ventana gráfica de su diseño es diferente de la ventana visible porque la ventana de la página web en el terminal móvil suele ser relativamente pequeña y podemos esperar que una página web grande se pueda mostrar completamente en el terminal móvil; 4. Entonces, de forma predeterminada , el 
móvil La ventana gráfica de diseño del terminal es más grande que la ventana visual 
5, por lo que en el terminal móvil, dividimos la ventana gráfica en tres situaciones 
    : 1. Ventana gráfica de diseño (ventana gráfica de diseño) 
    2. Ventana gráfica visual (diseño visual) 
    3. Ideal diseño de ventana gráfica (ventana gráfica ideal))

96. Cuénteme sobre su comprensión de useEffect, ¿qué ciclos de vida se pueden simular?

1. Utilice la función de enlace useEffect para darse cuenta de los efectos secundarios de los componentes. useEffect (acción deseada, [lista de estados de componentes]); el segundo parámetro se usa para procesar el tiempo de las llamadas a useEffect, que es una matriz, y la matriz es una lista de estados de componentes. 
2. useEffect simula componenteDidMount: cuando el segundo parámetro de useEffect se pasa en una lista vacía, equivale a simular la función del ciclo de vida componenteDidMount. Este efecto secundario solo se invoca una vez cuando el componente monta la interfaz de usuario por primera vez. Úselo para simular cuando el componente se monta por primera vez, acceder a la API y obtener datos: 
3. UseEffect simula componenteDidUpdate: si no trae el segundo parámetro cuando usa useEffect, es equivalente a simular la función de ciclo de vida componenteDidUpdate. Se llamará cada vez que finalice el renderizado. 
4. useEffect simula el componente WillUnmount y devuelve una función en useEffect para simular el componente WillUnmount

97. ¿Hablar sobre la diferencia entre setState y replaceState en React?

1. setState se utiliza para establecer el objeto de estado 
2. Dos parámetros: nextState, el nuevo estado que se establecerá, que se fusionará con el estado actual; devolución de llamada, parámetro opcional, función de devolución de llamada. Esta función se llamará después de que setState se establezca correctamente y se vuelva a representar el componente. 
3. Fusione nextState y el estado actual y vuelva a renderizar el componente. setState es el método principal para activar actualizaciones de la interfaz de usuario en los controladores de eventos de React y solicitar devoluciones de llamada. 
4. El método replaceState() es similar a setState(), pero el método solo retendrá el estado en nextState y el estado original que no está en nextState se eliminará 5. Dos parámetros: nextState, el nuevo estado a 
ser set, que reemplazará el estado actual. devolución de llamada, parámetro opcional, función de devolución de llamada. Esta función se llamará después de que replaceState se establezca correctamente y se vuelva a representar el componente. 
------------------------------------------------- -
---------------------- 
1. setState es modificar parte del estado, que es equivalente a Object.assign, simplemente sobrescribe y no reducirá el original estado; 
2.replaceState es reemplazar completamente el estado original, lo que equivale a asignar un valor, reemplazar el estado original con otro objeto. Si se reducen los atributos del nuevo estado, entonces el estado ya no existirá en el estado.

98. ¿Hablar sobre el principio de funcionamiento del enlace onClick en reaccionar?

Después de vincular el elemento del componente al evento onClick: 
1. React primero registrará el evento y registrará el evento en el documento de manera uniforme. 
2. Almacenará la función del evento de acuerdo con la clave de representación única del componente. 
3. Designación unificada. Función de devolución de llamada de despachoEvent 
4. Devolución de llamada de evento de almacenamiento: reaccionar almacenará el evento de clic en un objeto. El almacenamiento en la función de devolución de llamada se almacena en el objeto en forma de un par clave-valor. La clave es el identificador único del componente. Y el evento correspondiente al valor es la función de devolución de llamada, a través del componente La clave puede volver a la función correspondiente.

99. ¿Qué es la consolidación del margen vertical? ¿Cuéntame sobre la situación después de la fusión?

1. Fusionar márgenes verticales: cuando dos márgenes se unen, se formará un margen y la altura del margen fusionado es igual a la mayor de las alturas de los dos márgenes fusionados. 2. Nota: Solo normal Solo los márgenes verticales del 
bloque -Los elementos de nivel en el flujo de documentos se fusionarán y los márgenes entre cuadros en línea, cuadros flotantes o posicionamiento absoluto no se fusionarán Situaciones: 1. Cuando se fusionan los márgenes verticales de elementos adyacentes 
: 
si el elemento superior tiene un margen inferior y el elemento inferior tiene un margen superior, entonces el espacio vertical entre ellos no es la suma de inferior y superior, sino el mayor de los dos. Este fenómeno se llama margen exterior. Colapso 2. Cuando los márgenes verticales de elementos de bloque anidados 
son fusionado: si el elemento principal no tiene relleno ni borde superior, entonces el margen superior del elemento principal se fusionará con el margen superior del elemento secundario, y el margen combinado será el medio de los dos El más grande, es decir, el margen superior de el elemento principal es 0 y también se fusionará. 
Solución: puede definir un borde superior de 1 píxel o un margen interior superior para el elemento principal

100. ¿Cómo lidiar con la dependencia de useEffect como tipo de referencia?

1. Utilice 'use-deep-compare-effect': puede realizar una comparación profunda y el método de uso es muy simple: simplemente importe useDeepCompareEffect desde 'use-deep-compare-effect' y reemplace el useEffect original con useDeepCompareEffect. 
2. También puede utilizar el gancho useRef para resolver los problemas anteriores. La característica de useRef es guardar datos entre ciclos de renderizado. 
3. Utilice useRef para guardar los datos anteriores. La dependencia en useEffect es el tipo de referencia, que se llamará cada vez que obj cambia la función, pero hay un juicio adicional en la función de ejecución, prevObj es el valor de obj en la última representación, compare una clave en prevObj con una clave en obj esta vez y realice otras operaciones después de que se cumplan las condiciones. reunió

101. ¿Conoce createPortal en reaccionar y habla sobre sus escenarios de uso?

1. Portal, que representa nodos secundarios en nodos DOM que existen fuera del componente principal.
2. ReactDOM.createPortal(niño, contenedor)
El primer parámetro (niño) es cualquier elemento hijo de React renderizable, como un elemento, cadena o fragmento. El segundo parámetro (contenedor) es un elemento DOM.
2. Los portales son adecuados para componentes que están fuera de flujo, especialmente para componentes con posición: absoluta y posición: fija. Como cuadro modal, notificación, advertencia, goTop, etc.

Versión 2.0 (contenido actualizado)

1. Cuénteme sobre su comprensión de Event Loop.

1. Event Loop es un mecanismo en JavaScript para procesar eventos asincrónicos y funciones de devolución de llamada. Es un bucle en el entorno de ejecución de JavaScript, que continuamente extrae tareas de la cola de tareas y las ejecuta hasta que la cola de tareas está vacía. 2. El principio de funcionamiento de Event Loop: a. Ejecutar código sincrónico y colocar operaciones asincrónicas en la cola de tareas b. Cuando la tarea del hilo principal está inactiva, Event Loop verificará si hay una tarea en la cola de tareas c. Si la hay una tarea, saque la tarea y ejecute d. Después de completar la tarea, verifique la cola de tareas nuevamente y repita las operaciones de b y c. 3. Event Loop es un concepto muy importante en JavaScript, que permite a JavaScript manejar operaciones asincrónicas y mejora el rendimiento del programa y la experiencia del usuario.

2. Cuénteme sobre su comprensión de BOM. ¿Qué sabe sobre los objetos BOM comunes?

1. BOM se refiere al modelo de objetos del navegador, que proporciona objetos que interactúan con la ventana del navegador independientemente del contenido 2. Su función es interactuar con el navegador, como retroceder, avanzar, actualizar y cambiar la ventana del navegador. , la barra de desplazamiento se desplaza y se obtiene cierta información del cliente, como la versión de la marca del navegador, resolución de pantalla 3, ventana: El objeto principal de la lista de materiales es la ventana, que representa una instancia del navegador. En el navegador, el objeto de ventana Tiene una doble función, que es una interfaz de la ventana del navegador y un objeto global. Por lo tanto, todas las variables y funciones declaradas en el alcance global programarán las propiedades y métodos del objeto de la ventana. 4. local: 5. navigator: main It se utiliza para obtener las propiedades del navegador y distinguir el tipo de navegador. Hay muchos atributos y la compatibilidad es más complicada. 6. pantalla: guarda información puramente de capacidad del cliente, es decir, la información que el cliente muestra fuera de la ventana del navegador, como el ancho y la altura de los píxeles. 7. historial: el El objeto se utiliza principalmente para la operación El historial de la URL del navegador, que puede reenviarse, retroceder o redirigir a la URL especificada a través de parámetros.

3. ¿Cuáles son los núcleos de los navegadores y cuáles son las diferencias?

Los núcleos de navegador comunes son los siguientes:

Kernel Trident: Es un kernel de navegador desarrollado por Microsoft, utilizado principalmente en el navegador Internet Explorer.

Kernel Gecko: Es el kernel del navegador Mozilla Firefox y también es adoptado por otros navegadores.

Kernel WebKit: es un kernel de navegador desarrollado por Apple, utilizado principalmente en el navegador Safari y el navegador Chrome.

Blink kernel: es un kernel de navegador desarrollado por Google basado en el kernel WebKit, utilizado principalmente en el navegador Chrome y Opera. 5. Diferencias: 1. La razón principal es que los motores de renderizado son diferentes, lo que genera diferencias en el rendimiento, la compatibilidad, la seguridad, etc. del navegador. 2. El kernel Trident es relativamente lento en el procesamiento de CSS y JavaScript 3. El kernel Gecko presta más atención a la seguridad y la protección de la privacidad 4. El kernel WebKit es famoso por su rápida velocidad de renderizado y buena compatibilidad 5. El kernel Blink es mejor en mejoras de rendimiento y estabilidad.

4. Cuénteme sobre la diferencia entre mejora progresiva y degradación elegante de los navegadores.

1. Tanto la mejora progresiva como la degradación elegante de los navegadores están diseñadas para resolver problemas de compatibilidad entre diferentes navegadores o dispositivos. 2. La mejora progresiva significa que al diseñar y desarrollar sitios web o aplicaciones, se debe considerar primero la realización de funciones básicas y luego agregar gradualmente más. funciones avanzadas y efectos interactivos para adaptarse a las capacidades de diferentes navegadores y dispositivos 3. La mejora progresiva se centra más en la compatibilidad hacia adelante, incluso en navegadores más antiguos 4. Degradación elegante Significa que al diseñar y desarrollar sitios web o aplicaciones, primero considere la realización de funciones avanzadas y efectos interactivos, y luego reducir gradualmente los requisitos para adaptarse a navegadores y dispositivos más antiguos que no admiten estas funciones. Post-compatibilidad, lo que significa una mejor experiencia de usuario en navegadores más nuevos

5. ¿Cuáles son las soluciones para optimizar el rendimiento de un sitio web?

1. Minimice la cantidad de solicitudes HTTP: combine js, css, etc. 2. Comprima archivos: comprima CSS, JavaScript, HTML y otros archivos para reducir el tamaño del archivo y mejorar la velocidad de carga de la página web. 3. Optimización de imágenes: utilice el formato de imagen adecuado, comprima el tamaño de la imagen, reduzca la cantidad de imágenes y mejore la velocidad de carga de la página web. 4. Aceleración de CDN: utilice CDN (Red de distribución de contenido) para acelerar la velocidad de acceso al sitio web y distribuir el contenido del sitio web a servidores de todo el mundo, de modo que los usuarios puedan obtener contenido del servidor más cercano. 5. Optimización de la caché: utilice la caché del navegador y del servidor para reducir las solicitudes repetidas y mejorar la velocidad de acceso al sitio web. 6. Optimización del front-end: reduzca las solicitudes HTTP, utilice CSS Sprites, combine archivos JavaScript y otras tecnologías para reducir el tiempo de carga de la página. 7. Optimización de la base de datos: optimice las declaraciones de consulta de la base de datos, utilice índices, reduzca el tiempo de consulta de la base de datos y mejore la velocidad de acceso al sitio web. 8. Optimización del servidor: utilice servidores de alto rendimiento, optimice la configuración del servidor y mejore la velocidad de acceso al sitio web. 9. Elimine el código redundante: elimine el código inútil, reduzca el tamaño de la página y mejore la velocidad de acceso al sitio web. 10. Diseño responsivo: al utilizar un diseño responsivo, el sitio web puede adaptarse a diferentes dispositivos y tamaños de pantalla para mejorar la experiencia del usuario.

6. ¿Cuál es la diferencia entre Link y @import?

1. Tanto Link como @import se utilizan para introducir recursos externos 2. Diferencias: 1. El orden de carga es diferente: las etiquetas de enlace cargarán recursos externos al mismo tiempo que se carga la página, mientras que @import solo se cargará después de La página está cargada. Cargará recursos externos 2. Compatibilidad diferente: las etiquetas de enlace son compatibles con todos los navegadores, mientras que @import puede no ser compatible con algunas versiones antiguas de navegadores 3. Alcance diferente: las etiquetas de enlace se pueden usar para introducir varios Varios tipos de recursos , incluidos CSS, JavaScript, imágenes, etc., y @import solo se pueden usar para introducir archivos css 4. Prioridades diferentes: la prioridad de la etiqueta Link es mayor que la de @import, por lo que si la misma hoja de estilo tiene ambos métodos Si se usa, Link anulará el estilo de @import

7. Cuénteme sobre su comprensión de BFC ¿Cuáles son las condiciones desencadenantes?

1. BFC es un contexto de formato a nivel de bloque, que se refiere a un área de representación independiente, en la que los elementos se disponen y representan de acuerdo con ciertas reglas. 2. Características de BFC: 1. Los elementos internos están dispuestos uno tras otro en dirección vertical. para 
formar 
    un flujo vertical 
    2. El área BFC no se superpondrá con elementos flotantes 
    3. El área BFC no se superpondrá con el margen de elementos externos 
    4. El área BFC puede contener elementos flotantes 
    5. El área BFC puede evitar que los elementos queden cubiertos por el borde del elemento principal 
3. Condiciones de activación: 
    1. El elemento raíz o el elemento que contiene el elemento raíz 
    2. El elemento flotante float no es igual a ninguno 
    3. La posición de posicionamiento absoluto es absoluta o fija 
    4. La visualización es inline-block, table-cell, table-caption, flex, inline-flex 
    5. Elementos a nivel de bloque cuyo desbordamiento no es visible

8. ¿Cuál es la diferencia entre nulo e indefinido?

1. En js, tanto nulo como indefinido significan que no hay ningún valor 2. Diferencias: 1. indefinido significa que una variable ha sido declarada pero no se le ha asignado un valor, o la propiedad del objeto no existe 2. nulo significa que una variable tiene se le ha asignado un valor nulo o un objeto Al atributo se le asigna un valor nulo 3. En la declaración condicional, tanto indefinido como nulo se convertirán en falso, pero en el operador de comparación, el comportamiento es diferente. Indefinido es falso cuando comparado con cualquier valor incluido él mismo, pero nulo solo se compara con indefinido es verdadero

9. ¿Cuáles son las formas en que los elementos en CSS se separan del flujo de documentos? ¿Cuáles son los métodos de posicionamiento y las diferencias?

1. Hay varias formas de que los elementos en CSS abandonen el flujo del documento: 1. Flotante (flotante): mueva el elemento fuera del flujo del documento para que pueda mostrarse uno al lado del otro con otros elementos. 2. Posicionamiento absoluto (posición: absoluta): mueve el elemento fuera del flujo de documentos y lo posiciona en relación con su elemento ancestro posicionado más cercano. 3. Posicionamiento fijo (posición: fijo): mueva el elemento fuera del flujo del documento y colóquelo en relación con la ventana del navegador. 4. Diseño flexible (pantalla: flex): al configurar el elemento principal como un contenedor flexible, sus elementos secundarios se pueden separar del flujo de documentos y organizar de acuerdo con ciertas reglas. 5. Diseño de cuadrícula (visualización: cuadrícula): al configurar el elemento principal como un contenedor de cuadrícula, sus elementos secundarios se pueden separar del flujo de documentos y organizar de acuerdo con ciertas reglas. 2. Los métodos de posicionamiento son los siguientes: 1. Posicionamiento relativo (posición: relativo): el posicionamiento relativo a la posición del elemento en el flujo de documentos no afectará la posición de otros elementos. 2. Posicionamiento absoluto (posición: absoluta): el posicionamiento se realiza en relación con el elemento ancestro posicionado más cercano, o en relación con el elemento del cuerpo del documento si no hay un elemento ancestro posicionado. 3. Posicionamiento fijo (posición: fijo): se coloca en relación con la ventana del navegador y no se moverá a medida que se desplaza la página.

3. Diferencia: la diferencia entre el posicionamiento relativo y el posicionamiento absoluto es que el posicionamiento relativo no se separará del flujo de documentos, mientras que el posicionamiento absoluto se separará del flujo de documentos. El posicionamiento fijo es similar al posicionamiento absoluto, pero se coloca en relación con la ventana del navegador y no se mueve a medida que se desplaza la página.

10. ¿Cuál es la diferencia entre sincrónico y asincrónico?

1. Sincrónico y asincrónico significa que las tareas se ejecutan de diferentes maneras durante el procesamiento de la tarea. 2. Tareas sincrónicas significa que las tareas se ejecutan secuencialmente. Cada tarea debe esperar a que se complete la tarea anterior antes de poder ejecutarse. En la ejecución sincrónica, El La ejecución de la tarea está bloqueada, es decir, cuando se ejecuta la tarea, esperará hasta que se complete antes de continuar ejecutando la siguiente tarea 3. La ejecución asincrónica significa que las tareas no se ejecutan en secuencia, y cada una La tarea se puede ejecutar de forma independiente. Espere a que se complete la tarea anterior. En la ejecución de una tarea asincrónica, la ejecución de la tarea no es de bloqueo, es decir, la ejecución de la tarea no esperará a que se complete la tarea, sino que continuará ejecutando la siguiente tarea 4. La diferencia entre síncrona y asincrónica radica en la forma en que se ejecuta la tarea. La ejecución secuencial, mientras que la ejecución asincrónica se ejecuta de forma independiente, sin esperar a que se complete la tarea anterior. En la práctica, la ejecución asincrónica generalmente puede mejorar la velocidad de respuesta y la eficiencia del programa.

11. ¿Cuál es la diferencia entre pseudoclases y pseudoelementos? ¿Cuáles son los nuevos selectores en Css3?

La diferencia entre pseudoclases y pseudoelementos: 1. Las pseudoclases se utilizan para describir algunos estados especiales de elementos, como: hover,: active,: focus, etc., mientras que los pseudoelementos se utilizan para crear algunos elementos. que no están en el árbol del documento, como ::before, ::after, etc. 2. Las pseudoclases se representan con dos puntos (:) en CSS2, y los pseudoelementos se representan con dos puntos dobles (::). 3. Las pseudoclases se pueden utilizar para cualquier elemento, mientras que los pseudoelementos solo se pueden utilizar para algunos elementos específicos. 4. Las pseudoclases se pueden usar en cualquier parte del selector, mientras que los pseudoelementos solo se pueden usar en la última posición del selector. Los nuevos selectores en CSS3 incluyen: 1. Selectores de atributos: [attr=value], [attr~=value], [attr|=value], [attr^=value], [attr$=value], [attr *= valor] 2. Selectores de pseudoclase: :nésimo-niño(), :nésimo-último-niño(), :nésimo-de-tipo(), :nésimo-último-de-tipo(), :primer-niño, :último hijo, :primero de tipo, :último de tipo, :solo hijo, :solo de tipo, :not() 3. Selectores de pseudoelementos: ::antes, :: después, ::primera letra, ::primera línea, ::selección 4. Selectores combinados: AB, A > B, A + B, A ~ B

12. ¿Cuéntame sobre la diferencia entre Promise y async/await?

Las promesas y async/await son formas de manejar operaciones asincrónicas, pero existen algunas diferencias entre ellas.

Sintaxis: Promise es un método de programación asincrónico basado en funciones de devolución de llamada, que utiliza los métodos .then() y .catch() para procesar los resultados de las operaciones asincrónicas. Y async/await es un método de programación asincrónico introducido por ES2017, que utiliza palabras clave async y await para procesar los resultados de las operaciones asincrónicas.

Legibilidad: en comparación con Promise, async/await es más fácil de leer y comprender, y el código es más conciso y claro.

Manejo de errores: en Promise, el manejo de errores requiere el uso del método .catch() para detectar errores. En async/await, las declaraciones try/catch se pueden utilizar para detectar errores.

Llamada en cadena: Promise puede llamar a múltiples operaciones asincrónicas en una cadena, mientras que async/await solo puede pasar a la siguiente operación asincrónica después de que se completa una operación asincrónica. En general, async/await es un método de programación asincrónica más intuitivo, legible y fácil de entender, pero en algunos casos, Promise también es muy útil.

13. ¿Hablar sobre la diferencia entre reorganizar y volver a dibujar? ¿Cuáles son las condiciones desencadenantes?

Redistribuir y repintar son dos conceptos importantes cuando el navegador representa la página. Reflujo significa que cuando cambia el diseño de los elementos en la página, el navegador necesita recalcular la posición y el tamaño de los elementos y reorganizar el diseño de la página. El reflujo hará que la página se vuelva a diseñar y renderizar, lo cual es una operación que requiere relativamente mucho rendimiento. Repintar (repintar) significa que cuando cambia el estilo de un elemento en la página, el navegador necesita volver a pintar el estilo del elemento. Redibujar no cambia el diseño de la página, solo vuelve a dibujar el estilo del elemento, por lo que es menos costoso que redistribuir. Las condiciones que desencadenan el reflujo incluyen: 1. La representación inicial de la página 2. El tamaño de la ventana del navegador cambia 3. La posición, el tamaño y el contenido del elemento cambian 4. El estilo del elemento cambia 5. Las condiciones que desencadenan El redibujado cuando la página se desplaza incluye: 1. El estilo del elemento cambia 2. El color de fondo, el color del borde, el color del texto y otros atributos del elemento cambian 3. La transparencia del elemento cambia 4. El contenido del texto del elemento cambia En general, la reorganización y el rediseño afectarán la página. Por lo tanto, es necesario evitar provocar reorganizaciones y redibujos frecuentes durante el proceso de desarrollo. El rendimiento de la página se puede optimizar mediante un diseño de diseño razonable, utilizando animación CSS3 en lugar de animación JavaScript, etc.

14. ¿Cómo implementa Javascript la herencia?

1. Herencia de cadena de prototipos: la herencia se logra apuntando el objeto prototipo de la subclase al objeto de instancia de la clase principal. 2. Herencia del constructor: se refiere a la realización de la herencia llamando al constructor de la clase principal en el constructor de la subclase. 3. Herencia combinada: la herencia de composición se refiere a un método de herencia que combina la cadena de prototipos y la herencia del constructor. El método de implementación consiste en heredar las propiedades de la clase principal llamando al constructor de la clase principal en el constructor de la subclase y el objeto prototipo de la La clase apunta a un nuevo objeto de instancia de clase principal para heredar el método. 4. Herencia de clases en ES6: herede la clase principal usando la palabra clave extends y use super para llamar al constructor y al método de la clase principal.

15. ¿Qué es el modo estricto y cuáles son las restricciones?

El modo estricto es un modo de ejecución de JavaScript que impone restricciones para ayudar a los desarrolladores a escribir código más sólido. En modo estricto, se prohíben algunos comportamientos inseguros y se generan algunos errores. Las restricciones en modo estricto incluyen: 1. Está prohibido el uso de variables no declaradas. 2. Está prohibido eliminar variables, funciones o parámetros de funciones. 3. Está prohibido utilizar la función eval() para crear variables o funciones. 4. La declaración with está prohibida. 5. Está prohibido utilizar argumentos.callee y argumentos.caller dentro de la función. 6. Está prohibida la asignación a propiedades de sólo lectura. 7. Está prohibido ampliar el prototipo de objetos incorporados. 8. Está prohibido declarar variables repetidamente dentro de la función. El modo estricto se puede habilitar agregando "usar estricto" al comienzo del código. Escribir código en modo estricto puede ayudar a los desarrolladores a evitar algunos errores comunes de JavaScript y mejorar la legibilidad y el mantenimiento del código.

16. ¿Cómo alterar rápidamente el orden de una matriz, como var arr = [1,2,3,4,5,6,7,8,9,10]?

Comenzando con el último elemento de la matriz, recorra la matriz hacia adelante.

Genere aleatoriamente un número entero entre 0 y el valor del índice del recorrido actual.

Intercambia el elemento atravesado actualmente con el elemento correspondiente al índice generado aleatoriamente.

Continúe atravesando la matriz hacia adelante, repitiendo los pasos 2 y 3 hasta que se atraviese el primer elemento de la matriz.

17. ¿Cuáles son las funciones de enlace de comando personalizado de Vue? ¿Qué has hecho con las directivas personalizadas?

Las funciones de enlace de instrucciones personalizadas de Vue incluyen: vincular, insertar, actualizar, actualizar componentes y desvincular. 1. enlazar: se llama solo una vez. Se llama cuando la instrucción está vinculada al elemento por primera vez. Puede realizar una configuración de inicialización única aquí. 2. insertado: se llama cuando el elemento vinculado se inserta en el nodo principal, pero no se puede insertar en el DOM antes de su nodo principal. 3. actualización: se llama cuando se actualiza la plantilla donde se encuentra el elemento vinculado, independientemente de si el valor vinculado cambia. Las actualizaciones innecesarias de la plantilla se pueden ignorar comparando los valores vinculados antes y después de la actualización. 4. componenteActualizado: Se llama cuando la plantilla donde se encuentra el elemento vinculado completa un ciclo de actualización. 5. desvincular: se llama solo una vez, cuando la instrucción se desvincula del elemento. Una vez usé un comando personalizado para implementar una función que hace clic en el área exterior para cerrar la ventana emergente. El método de implementación específico es vincular un evento de clic de un documento en la función de enlace de enlace. Cuando se activa el evento de clic, se juzga si el área en la que se hizo clic está dentro de la ventana emergente y, si no, en la ventana emergente. está cerrado. Desvincular el evento en la función de enlace de desvinculación.

18. Saltar de la página A a la página B, almacenar en caché el componente A, saltar del componente A al componente C, cancelar el caché, ¿cómo lograrlo?

1. Keep-alive puede pasar el BeforeRouter (hacia, desde, siguiente) de la página actual cuando === "B" y desde === "A" El parámetro en el meta de keep-alive es verdadero cuando = == "C” & from ===”A” El parámetro en el meta de keep-alive es falso 2. Ciclo de vida, obtenga this.router.meta para modificar los parámetros en el meta de la página y mantenga vivo decidirá si activar el componente de acuerdo con los parámetros en el metacaché

19. ¿Cuáles son los principios de respuesta y las diferencias entre Vue2 y Vue3?

1. El principio de respuesta en Vue2 y Vue3 se basa en Object.defineProperty. Cuando los datos cambian, se activa automáticamente una actualización de la vista. Sin embargo, Vue3 optimiza el principio de capacidad de respuesta, utilizando objetos proxy Proxy en lugar de Object.defineProperty, lo que hace que el sistema de respuesta sea más eficiente y flexible. 2. El principio de respuesta en Vue2 es que al crear una instancia de un objeto Vue, atravesará recursivamente cada propiedad en los datos, convertirá cada propiedad en un getter y setter, y cuando se acceda o modifique la propiedad, activará los métodos getter y setter. , permitiendo actualizaciones responsivas. 3. El principio de respuesta en Vue3 utiliza un objeto proxy Proxy, que puede interceptar el acceso al objeto y las operaciones de modificación, realizando así actualizaciones de respuesta. El sistema reactivo en Vue3 también admite la función reactiva, que puede convertir un objeto ordinario en un objeto reactivo, lo que permite a los desarrolladores utilizar el sistema reactivo de manera más flexible. 4. En general, el sistema responsivo de Vue3 es más eficiente y flexible que Vue2, pero existen algunas diferencias en el uso que requieren que los desarrolladores aprendan y se ajusten adecuadamente.

20. ¿Cómo implementa Vue la gestión de permisos y cómo lograr permisos a nivel de botón?

1. Divida todos los permisos en permisos de primer nivel y permisos de segundo nivel según el nivel, genere números de árbol relativos, obtenga la identificación de cada permiso, coloque cada identificación en una lista y asigne la clave externa al permiso del rol 2. El permiso del botón es que cada botón está vinculado a un método de procesamiento. Cuando el usuario que inició sesión devuelve una identificación de función que no corresponde al método de permiso del botón, el botón se ocultará.

La primera semana

21. ¿La diferencia entre Vue2 y Vue3 es de al menos 5 puntos?

Optimización del rendimiento: Vue3 ha realizado muchas optimizaciones en términos de rendimiento, incluida la optimización del compilador, la optimización del sistema receptivo, la optimización del DOM virtual, etc., lo que hace que el rendimiento de Vue3 sea más rápido que el de Vue2.

API de composición: Vue3 presenta la API de composición, que es un nuevo estilo de API que puede organizar y reutilizar mejor la lógica de los componentes, haciendo que el código sea más claro y más fácil de mantener.

Compatibilidad con TypeScript: el soporte de Vue3 para TypeScript es más completo, lo que puede realizar mejor la verificación de tipos y sugerencias de código, y mejorar la confiabilidad y la capacidad de mantenimiento del código.

Better Tree-Shaking: Vue3 adopta una sintaxis de módulo ES más moderna, que puede admitir mejor Tree-Shaking y reducir el volumen de empaquetado.

Mejor adaptabilidad: Vue3 tiene una mejor adaptabilidad a la web y a los terminales móviles, y puede admitir mejor tecnologías como PWA y SSR.

Mejor manejo de errores: Vue3 introduce un mecanismo de manejo de errores que facilita a los desarrolladores localizar y resolver errores.

22. ¿El proceso de comunicación de componentes en Vue3 [padre a hijo, hijo a padre]?

1. El proceso de comunicación de componentes en vue3 se divide en dos formas: de padre a hijo y de hijo a padre 
2. Padre a hijo: 
    el componente principal transmite datos al componente secundario a través de accesorios, y el componente secundario transmite datos al componente secundario a través de accesorios. El componente recibe datos a través de accesorios. El componente principal puede usar el componente secundario en la plantilla y pasar los datos al componente secundario a través de la instrucción v-bind, y el componente secundario puede declarar el tipo de datos recibido y el valor predeterminado en props. Enviar eventos al componente principal 
, 
    el El componente principal escucha los eventos enviados por el componente secundario a través del comando v-on, y el componente secundario puede pasar el método $emit al componente principal.

23. ¿Cuál es el principio de Aplicar/llamar/vincular?

1. Aplicar, llamar y vincular son métodos utilizados en JavaScript para cambiar el contexto de ejecución de una función. 2. Las funciones de allpy y call son iguales. Ambas cambian el contexto de ejecución de la función, es decir, cambian el puntero this dentro de la función. La diferencia entre ellas radica en la forma de pasar parámetros. apply recibe una matriz como un parámetro y la llamada recibe múltiples Parámetro 3, el método de vinculación también se usa para cambiar el contexto de ejecución de la función, pero no ejecutará la función inmediatamente, sino que devolverá una nueva función, el esto de esta nueva función apunta al límite El objeto 4, en general, aplicar, llamar y vincular son métodos utilizados para cambiar el contexto de ejecución de una función. La diferencia entre ellos es el método de pasar parámetros y el valor de retorno. apply y call ejecutan la función inmediatamente, mientras que bind devuelve una nueva función.

24. Cuénteme sobre su comprensión del prototipo y la cadena de prototipos.

1. El prototipo es un concepto importante en JavaScript: es un objeto a través del cual otros objetos pueden heredar propiedades y métodos. Cada objeto JavaScript tiene un objeto prototipo, que define las propiedades y métodos de ese objeto. Si no se puede encontrar una propiedad o método en el objeto actual, el motor JavaScript buscará automáticamente el objeto prototipo del objeto hasta que lo encuentre. 2. La cadena de prototipos es una estructura de cadena compuesta por objetos prototipo, que es una forma de implementar la herencia en JavaScript. Cuando un objeto necesita acceder a una propiedad o método de otro objeto, el motor JavaScript busca en la cadena del prototipo hasta que encuentra la propiedad o método. Devuelve indefinido si la propiedad o método no se puede encontrar en toda la cadena del prototipo. 3. En JavaScript, cada objeto tiene un atributo proto , que apunta al objeto prototipo del objeto. Cuando accedemos a una propiedad o método de un objeto, el motor JavaScript primero comprobará si el objeto en sí tiene la propiedad o método y, en caso contrario, buscará en la cadena del prototipo hasta encontrarlo. Devuelve indefinido si la propiedad o método no se puede encontrar en toda la cadena del prototipo. 4. En resumen, el prototipo y la cadena de prototipos son conceptos muy importantes en JavaScript, pueden ayudarnos a realizar la herencia y compartir propiedades y métodos entre objetos.

25. Cuénteme sobre su comprensión de Generator en ES6.

1. El Generador en ES6 es una función especial que puede pausar y guardar el estado actual durante la ejecución, y luego reanudar la ejecución cuando sea necesario. La función Generador implementa la función de suspender y reanudar la ejecución mediante la palabra clave de rendimiento. 2. La función Generador se puede usar para programación asincrónica. Puede usar la palabra clave de rendimiento para suspender la ejecución de la operación asincrónica y esperar a que se complete la operación asincrónica antes de continuar. La función Generador también se puede utilizar para implementar un iterador, que puede devolver un valor a través de la palabra clave de rendimiento y luego continuar la ejecución en la siguiente llamada. 3. Además, la función Generador también puede aceptar parámetros, que se pueden pasar al llamar a la función Generador, y luego estos parámetros se pueden usar dentro de la función. 4. En resumen, la función Generador es una herramienta muy poderosa que se puede utilizar para implementar funciones como programación asincrónica e iteradores, que pueden simplificar enormemente la escritura y el mantenimiento del código.

26. Cuénteme sobre la diferencia entre el bucle de eventos del navegador y el bucle de eventos de nodeJs.

Existen varias diferencias entre el bucle de eventos del navegador y el bucle de eventos de Node.js, como se muestra a continuación: 1. El bucle de eventos del navegador tiene un solo subproceso, mientras que el bucle de eventos de Node.js tiene varios subprocesos. 2. Las tareas en el bucle de eventos del navegador se dividen en macrotareas y microtareas, mientras que el bucle de eventos de Node.js solo tiene macrotareas. 3. Las microtareas en el bucle de eventos del navegador incluyen Promise, MutationObserver y Process.nextTick, mientras que no hay Process.nextTick en el bucle de eventos de Node.js, pero sí setImmediate. 4. Las tareas macro en el bucle de eventos del navegador incluyen script, setTimeout, setInterval, E/S, representación de UI, etc., mientras que las tareas macro en el bucle de eventos de Node.js incluyen E/S, temporizador, setImmediate, etc. 5. La secuencia de ejecución de tareas en el bucle de eventos del navegador es ejecutar todas las microtareas primero y luego ejecutar una macrotarea, mientras que la secuencia de ejecución de tareas en el bucle de eventos de Node.js es ejecutar todas las tareas de E/S y del temporizador primero, y luego ejecute la tarea setImmediate. En general, tanto el bucle de eventos del navegador como el bucle de eventos de Node.js se basan en un modelo controlado por eventos, pero sus métodos de implementación y secuencias de ejecución de tareas son diferentes.

27. Cuénteme sobre su comprensión del mecanismo de almacenamiento en caché del navegador.

El mecanismo de caché del navegador significa que cuando el navegador accede a una página web, almacenará en caché algunos recursos estáticos (como imágenes, CSS, JS, etc.) localmente, de modo que la próxima vez que visite la misma página web, pueda acceder directamente a ella. leer desde el caché local, mejorando así el rendimiento de la página web, la velocidad de carga y la experiencia del usuario. 1. Existen dos tipos de mecanismos de almacenamiento en caché del navegador: almacenamiento en caché fuerte y almacenamiento en caché de negociación. 2. El almacenamiento en caché fuerte significa que cuando el navegador solicita un recurso por primera vez, almacenará localmente el tiempo de caducidad (Expires) o el tiempo máximo de caché (Cache-Control) del recurso y la próxima vez que lo solicite. Primero determine si el caché local ha caducado. Si no ha caducado, el recurso se leerá directamente desde el caché local sin enviar una solicitud al servidor. 3. El almacenamiento en caché de negociación significa que cuando el navegador solicita un recurso por primera vez, almacenará el identificador del recurso (ETag o Última modificación) localmente y enviará una solicitud al servidor para la siguiente solicitud, y el servidor juzgará. el recurso según el identificador del recurso Si hay una actualización, si no hay actualización, se devuelve un código de estado 304 y el navegador lee directamente el recurso del caché local. 4. El mecanismo de almacenamiento en caché del navegador puede reducir efectivamente las solicitudes de red, mejorar la velocidad de carga de la página web y la experiencia del usuario, pero también puede causar que los recursos no se actualicen a tiempo. Es necesario utilizar el mecanismo de almacenamiento en caché de manera razonable durante el desarrollo para evitar problemas.

28. Cuénteme sobre su comprensión del kernel del navegador.

El kernel del navegador se puede dividir en dos partes: motor de renderizado y motor JS 1. Motor de renderizado: responsable de obtener el contenido de la página web (HTML, XML, imágenes, etc.), organizar la información (agregar CSS, etc.), y calcular el modo de visualización de la página web, que luego se envía a un monitor o impresora. Diferentes kernels de navegador tendrán diferentes interpretaciones gramaticales de las páginas web, por lo que el efecto de representación también es diferente. Por lo tanto, elegir un kernel de navegador adecuado es muy importante para el rendimiento del navegador y la experiencia del usuario.

29. Cuénteme sobre su comprensión del principio de respuesta de Vue.

El principio de respuesta de Vue se logra mediante el secuestro de datos. Cuando se crea una instancia de Vue, Vue monitoreará todos sus datos y, cuando los datos cambien, Vue actualizará automáticamente la vista. El método de implementación específico es el siguiente: 1. Vue atravesará el objeto de datos durante la creación de instancias y convertirá cada propiedad en un getter/setter, de modo que Vue pueda monitorear cuándo se accede o modifica la propiedad. 2. Cuando los datos cambien, Vue monitoreará el cambio a través del método setter y notificará a todos los componentes que dependen de los datos para actualizar. 3. Vue usa una clase Dep para administrar todas las dependencias. Cada dato corresponde a una instancia de Dep. Cuando los datos cambian, Dep notificará a todas las instancias de Watcher que dependen de los datos para actualizar. 4. La instancia de Watcher es un concepto importante en Vue: se creará cuando se renderice el componente y se le notificará para que se actualice cuando cambien los datos. Cada instancia de Watcher está asociada con una instancia de Dep y, cuando los datos cambian, Dep notificará a todas las instancias de Watcher asociadas para que se actualicen. En general, el principio de respuesta de Vue se implementa mediante el secuestro de datos, la clase Dep y la instancia de Watcher, que pueden monitorear automáticamente los cambios de datos y actualizar las vistas, lo que simplifica enormemente el proceso de desarrollo.

30. ¿Cuál es la diferencia entre los métodos de observación calculados?

1. Tanto los métodos como el reloj se utilizan en Vue.js para monitorear los cambios de datos 2. Los métodos son una opción en Vue.js, que se usa para definir métodos en los componentes. Puede aceptar parámetros, realizar algunas operaciones y devolver resultados. Cuando los datos en el componente cambian, si es necesario volver a calcular algunos datos, es necesario volver a calcularlos en el método y devolver el resultado. 3. Watch es una opción especial en Vue.js, que se utiliza para monitorear los cambios de datos y realizar algunas operaciones. Puede monitorear el cambio de uno o más datos y ejecutar la función de devolución de llamada especificada cuando los datos cambian. Cuando necesite realizar algunas operaciones asincrónicas o cálculos complejos cuando cambian los datos, debe utilizar watch. 4. La diferencia es: 1. Los métodos se utilizan para definir métodos en componentes, que pueden aceptar parámetros, realizar algunas operaciones y devolver resultados. Y el reloj se utiliza para monitorear los cambios de datos y realizar algunas operaciones, no puede aceptar parámetros ni devolver resultados. 2. Los métodos generalmente se usan para operaciones simples, como calcular atributos o procesar eventos, mientras que las vigilancias generalmente se usan para manejar operaciones o cálculos asincrónicos complejos, o cuando es necesario monitorear múltiples cambios de datos.

Calculado es un atributo calculado en Vue.js, también se puede llamar en la plantilla, pero su implementación es diferente a la de Métodos. El cálculo se basa en el almacenamiento en caché de dependencias, es decir, solo se volverá a calcular cuando cambien los datos dependientes. Si los datos dependientes no han cambiado, Computed devolverá directamente los resultados en el caché, mejorando así el rendimiento.

31. ¿Cuénteme sobre su comprensión de Virtual DOM?

Virtual DOM es una tecnología utilizada para optimizar el rendimiento de las aplicaciones web. Es un objeto JavaScript liviano que simula la jerarquía y las propiedades del DOM real y puede operar en la memoria en lugar de manipular el DOM real directamente. Cuando el DOM virtual cambia, lo comparará con el DOM real y solo actualizará las partes que necesitan actualizarse, reduciendo así la cantidad de operaciones DOM y mejorando el rendimiento de la aplicación. Las ventajas de Virtual DOM incluyen: 1. Mejorar el rendimiento de la aplicación: dado que Virtual DOM solo actualiza las partes que necesitan actualizarse, reduce la cantidad de operaciones DOM y mejora el rendimiento de la aplicación. 2. Simplifique el desarrollo de aplicaciones: dado que Virtual DOM puede operar en la memoria, el desarrollo y las pruebas de aplicaciones se pueden realizar más fácilmente. 3. Mejorar la mantenibilidad de la aplicación: dado que Virtual DOM facilita el desarrollo y las pruebas de aplicaciones, puede mejorar la mantenibilidad de la aplicación. En conclusión, Virtual DOM es una tecnología muy útil que puede ayudarnos a mejorar el rendimiento y la mantenibilidad de las aplicaciones web.

32. Cuénteme sobre su comprensión y función de nextTick.

1. nextTick es un método asincrónico en Vue.js. Su función es ejecutar la función de devolución de llamada especificada después de que finalice el siguiente ciclo de actualización DOM. La función principal de nextTick es realizar algunas operaciones inmediatamente después de que Vue.js actualice el DOM, como obtener el tamaño o la posición del elemento DOM inmediatamente después de actualizar los datos. 2. El principio de implementación de nextTick es utilizar el mecanismo de bucle de eventos de JavaScript. Cuando Vue.js actualiza el DOM, coloca todas las operaciones de actualización del DOM en una cola y espera a que se ejecute el siguiente bucle de eventos. El método nextTick consiste en colocar la función de devolución de llamada especificada en esta cola y esperar la ejecución del siguiente ciclo de eventos. 3. NextTick tiene una amplia gama de escenarios de uso, por ejemplo, usar el método $ nextTick en Vue.js puede realizar algunas operaciones inmediatamente después de que se actualiza el DOM, como obtener el tamaño o la posición del elemento DOM. Además, el uso del método nextTick en Vue.js también puede resolver algunos problemas de actualización de datos asincrónicos, como obtener datos actualizados inmediatamente después de actualizarlos. 4. En resumen, nextTick es un método asincrónico muy importante en Vue.js, que puede ayudarnos a realizar algunas operaciones inmediatamente después de actualizar el DOM, mejorando así el rendimiento y la experiencia del usuario de la aplicación.

33. Cuénteme sobre su comprensión del paquete web.

Webpack es una moderna herramienta de empaquetado de aplicaciones JavaScript. Puede empaquetar múltiples archivos JavaScript, archivos CSS, imágenes y otros recursos estáticos en uno o más archivos de paquete para facilitar su carga y uso en los navegadores.

Las funciones principales de Webpack incluyen: 1. Gestión modular: Webpack admite CommonJS, AMD, ES6 y otras especificaciones modulares, y puede empaquetar varios módulos en un archivo, lo que reduce la cantidad de solicitudes HTTP y mejora la velocidad de carga de la página. 2. Conversión de código: Webpack puede convertir lenguajes de alto nivel como ES6, TypeScript y CoffeeScript en códigos JavaScript que los navegadores puedan reconocer. 3. División de código: Webpack puede dividir la aplicación en varios fragmentos para lograr la carga bajo demanda y mejorar la velocidad de carga de la página. 4. Gestión de recursos: Webpack puede procesar recursos estáticos como CSS, imágenes y fuentes, empaquetarlos en uno o más archivos y realizar operaciones como compresión y optimización en ellos. 5. Sistema de complementos: Webpack proporciona un rico sistema de complementos que puede realizar diversas operaciones automáticas, como compresión de código, copia de archivos, generación de HTML, etc. En resumen, Webpack es una herramienta muy poderosa que puede ayudar a los desarrolladores a administrar y empaquetar mejor aplicaciones JavaScript, mejorar la eficiencia del desarrollo y la experiencia del usuario.

34. ¿Hablar sobre la diferencia entre GET y POST?

1. GET y POST son dos métodos de solicitud comúnmente utilizados en el protocolo HTTP 2. Diferencias: 1. El método de solicitud GET se usa para obtener recursos, mientras que el método de solicitud POST se usa para enviar datos. 2. Los datos del método de solicitud GET se agregarán a la URL, separados por un signo de interrogación "?", y los parámetros estarán separados por un símbolo "&", mientras que los datos del método de solicitud POST se incluirán en el cuerpo de la solicitud. 3. El volumen de transmisión de datos del método de solicitud GET es pequeño, generalmente no más de 2 KB, mientras que el volumen de transmisión de datos del método de solicitud POST es relativamente grande y se pueden transmitir datos de cualquier tamaño. 4. Los datos del método de solicitud GET se pueden almacenar en caché, se pueden marcar como favoritos y se pueden registrar en el historial del navegador, mientras que los datos del método de solicitud POST no se almacenarán en caché, ni se podrán marcar como favoritos, ni se registrarán. en el registro del historial del navegador. 5. La seguridad del método de solicitud GET es baja porque los datos estarán expuestos en la URL, que es fácil de interceptar y manipular, mientras que la seguridad del método de solicitud POST es alta porque los datos no estarán expuestos. en la URL, sólo los datos del cuerpo de la solicitud pueden ser interceptados y manipulados.

35. Hable sobre la diferencia entre HTTP y HTTPS ¿Cuál es el principio de cifrado de HTTPS?

1. HTTP es el protocolo de transferencia de hipertexto, que es un protocolo utilizado para transmitir datos, se transmite en texto claro y los datos son fáciles de espiar y manipular. 2. HTTPS agrega el protocolo SSL/TLS sobre la base de HTTP y garantiza la seguridad de los datos mediante tecnologías de cifrado y autenticación. HTTPS utiliza transmisión cifrada y el cifrado se realiza durante la transmisión de datos para garantizar la confidencialidad e integridad de los datos. 3. Específicamente, HTTPS realizará un protocolo de enlace SSL/TLS antes de transmitir datos, establecerá un canal seguro y luego transmitirá datos. El protocolo SSL / TLS utiliza dos métodos de cifrado: cifrado asimétrico y cifrado simétrico: el cifrado asimétrico se utiliza para establecer un canal seguro y el cifrado simétrico se utiliza para cifrar la transmisión de datos. 4. Durante el proceso de protocolo de enlace SSL/TLS, el servidor enviará su propia clave pública al cliente. El cliente utiliza la clave pública para cifrar un número aleatorio y luego lo envía al servidor. El servidor utiliza su propia clave privada para descifre el número aleatorio y luego use este número aleatorio para generar una clave simétrica para la transmisión de datos cifrados. 5. En comparación con HTTP, HTTPS tiene mayor seguridad y confidencialidad y es adecuado para sitios web que necesitan proteger la privacidad del usuario y la información confidencial, como bancos y sitios web de comercio electrónico.

36. ¿Por qué TCP necesita tres apretones de manos?

El protocolo TCP requiere un protocolo de enlace de tres vías para establecer una conexión, principalmente para garantizar que ambas partes de la comunicación puedan enviar y recibir datos normalmente. Las razones específicas son las siguientes: 1. El primer apretón de manos: el cliente envía un segmento de solicitud de conexión al servidor, y el servidor responderá con un segmento de confirmación después de recibir la solicitud, indicando que se ha recibido la solicitud del cliente. 2. El segundo apretón de manos: después de recibir la solicitud del cliente, el servidor enviará un segmento de mensaje de confirmación al cliente, indicando que ha recibido la solicitud del cliente y que está listo para comunicarse con el cliente. 3. El tercer apretón de manos: después de recibir el segmento de confirmación del servidor, el cliente enviará un segmento de confirmación al servidor, indicando que ha recibido la confirmación del servidor y que está listo para comunicarse con el servidor. 4. A través del protocolo de enlace de tres vías, puede garantizar que ambas partes en la comunicación puedan enviar y recibir datos normalmente y evitar fallas de conexión o errores de transmisión de datos debido a retrasos en la red o pérdida de paquetes. Al mismo tiempo, el protocolo de enlace de tres vías también puede prevenir problemas de seguridad causados por ataques maliciosos o información errónea en la red.

37. ¿Cuéntame sobre el principio de Proxy proxy?

Un proxy es una aplicación web que actúa como intermediario entre un cliente y un servidor. Su principio es establecer un servidor proxy entre el cliente y el servidor. El cliente envía una solicitud al servidor proxy y el servidor proxy reenvía la solicitud al servidor. Después de que el servidor responde, el resultado se devuelve al servidor proxy. y el servidor proxy devuelve el resultado al cliente.

El flujo de trabajo de Proxy es el siguiente: 1. El cliente envía una solicitud al servidor proxy. 2. El servidor proxy recibe la solicitud y la reenvía al servidor. 3. El servidor responde a la solicitud y devuelve el resultado al servidor proxy. 4. El servidor proxy recibe el resultado y lo devuelve al cliente.

La función del agente Proxy incluye principalmente los siguientes aspectos: 1. Mejorar la velocidad de acceso: el servidor proxy puede almacenar en caché los resultados de la solicitud y, cuando se realice la misma solicitud la próxima vez, devolverá directamente los resultados almacenados en caché, mejorando así la velocidad de acceso. . 2. Control de acceso: el servidor proxy puede filtrar y controlar la solicitud del cliente, como restringir el acceso a ciertos sitios web o restringir el acceso de ciertos clientes. 3. Ocultar información del cliente: el servidor proxy puede ocultar la dirección IP real del cliente, protegiendo así la privacidad del cliente. 4. Equilibrio de carga: el servidor proxy puede distribuir solicitudes a múltiples servidores para lograr el equilibrio de carga y mejorar el rendimiento y la confiabilidad del servidor. En resumen, Proxy proxy es una aplicación de red muy útil que puede mejorar la velocidad de acceso, proteger la privacidad, lograr equilibrio de carga y otras funciones.

38. ¿Hablar sobre la comprensión de las pérdidas de memoria? ¿Cuáles son las situaciones de pérdidas de memoria?

La pérdida de memoria se refiere al fenómeno de que el espacio de memoria solicitado no se libera correctamente durante la ejecución del programa, lo que resulta en una reducción continua de la memoria disponible en el sistema, lo que eventualmente conduce a una falla del programa o del sistema. Las pérdidas de memoria generalmente se deben a algunas operaciones incorrectas de administración de memoria en el programa, como no liberar memoria asignada dinámicamente, liberar memoria repetidamente, usar memoria ya liberada, etc.

Hay varios tipos de pérdidas de memoria: 1. La memoria no se libera después de ser asignada dinámicamente: el programa usa la memoria asignada dinámicamente durante la operación, pero no la libera después de su uso, lo que resulta en una pérdida de memoria. 2. Referencia circular: cuando dos o más objetos se refieren entre sí, si la relación de referencia entre ellos no se maneja correctamente, se producirán pérdidas de memoria. 3. El archivo no está cerrado: cuando el programa usa el archivo, si el archivo no se cierra correctamente, provocará una pérdida de memoria. 4. El caché no se borra: cuando el programa usa el caché, si el caché no se limpia correctamente, provocará una pérdida de memoria. 5. Error del programa: hay algunas operaciones de administración de memoria incorrectas en el programa, como usar memoria ya liberada, liberar memoria repetidamente, etc., lo que provocará pérdidas de memoria.

Las pérdidas de memoria ralentizarán la velocidad de ejecución del programa e incluso provocarán que el programa o el sistema fallen, por lo que en el desarrollo de programas es necesario prestar atención a la gestión de la memoria y liberar a tiempo el espacio de memoria no utilizado.

la tercera semana

39. Cuéntame sobre la diferencia entre funciones de flecha y funciones ordinarias.

Las principales diferencias entre las funciones de flecha y las funciones ordinarias son las siguientes: 1. Una función de flecha no tiene su propio this y se hereda del alcance externo. El this de las funciones ordinarias está vinculado dinámicamente cuando se llama a la función, y su valor depende de cómo se llama la función. 2. Las funciones de flecha no pueden usar el objeto de argumentos ni pueden llamarse usando la nueva palabra clave. Las funciones ordinarias pueden usar el objeto de argumentos o pueden llamarse usando la nueva palabra clave. 3. La función de flecha no tiene atributo de prototipo, por lo que no se puede utilizar como constructor. Las funciones ordinarias se pueden utilizar como constructores para crear nuevas instancias de objetos. 4. La sintaxis de la función de flecha es más concisa y se pueden omitir la palabra clave de retorno y las llaves en el cuerpo de la función. Las funciones ordinarias deben usar la palabra clave return para devolver un valor y el cuerpo de la función debe estar entre llaves. 5. En general, las funciones de flecha son adecuadas para funciones simples, lo que puede hacer que el código sea más conciso y fácil de leer. Las funciones ordinarias son más flexibles y pueden manejar varios escenarios.

40. ¿Cómo solucionar la lentitud de carga de la primera pantalla de SPA?

Optimización del código: verifique si hay códigos redundantes, repetidos o innecesarios en el código, reduzca la cantidad de código tanto como sea posible y optimice la estructura del código y el algoritmo para mejorar la velocidad de carga de la página.

Optimización de la imagen: si la imagen es demasiado grande, puede utilizar una herramienta de compresión de imágenes para comprimirla y reducir el tamaño de la imagen, mejorando así la velocidad de carga de la página.

Carga diferida: para recursos como imágenes y videos en la página, la tecnología de carga diferida se puede usar para cargar solo cuando el usuario se desplaza a la posición correspondiente, lo que reduce el tiempo de carga de la primera pantalla.

Aceleración CDN: utilice el servicio de aceleración CDN (Content Delivery Network) para distribuir recursos estáticos en servidores de todo el mundo, mejorando así la velocidad de carga de la página.

Optimización de caché: utilice la tecnología de almacenamiento en caché del navegador para almacenar en caché los recursos estáticos en la página localmente y léalos directamente desde el caché en la próxima visita, lo que reduce las solicitudes del servidor y mejora la velocidad de carga de la página.

Optimización del servidor: en el caso de una respuesta lenta del servidor, puede considerar usar un servidor con una configuración superior o usar tecnología de equilibrio de carga para distribuir solicitudes a múltiples servidores, mejorando así la velocidad de carga de la página.

41. ¿Hablar sobre el cargador común en el paquete web? ¿Qué problema resolvió?

babel-loader: convierte ES6/ES7/JSX y otras sintaxis a sintaxis ES5, lo que resuelve el problema de compatibilidad del navegador.

css-loader: analiza archivos CSS y procesa dependencias, como @import y url (), para que los archivos CSS se puedan empaquetar en archivos JS.

cargador de estilos: inserte código CSS en la etiqueta <estilo> en la página HTML para que el estilo surta efecto.

cargador de archivos: copie el archivo al directorio de salida y devuelva la ruta del archivo, lo que resuelve el problema de la ruta del archivo.

cargador de URL: similar al cargador de archivos, pero puede convertir archivos más pequeños que el tamaño especificado en codificación base64, lo que reduce las solicitudes HTTP y mejora la velocidad de carga de la página.

cargador de imágenes: carga y comprime archivos de imágenes, resolviendo el problema de la carga lenta de imágenes.

json-loader: carga archivos JSON, resolviendo el problema del análisis manual al usar archivos JSON.

xml-loader: carga archivos XML, resolviendo el problema del análisis manual cuando se utilizan archivos XML. Estos cargadores resuelven diferentes problemas, como compatibilidad del navegador, ruta de archivo, inyección de estilo, velocidad de carga de imágenes, etc., de modo que Webpack puede procesar varios tipos de archivos y empaquetarlos en uno o más archivos JS, lo que mejora el rendimiento del programa de la aplicación y mantenibilidad.

42. ¿Cuál es su comprensión del SPA de una sola página, cuáles son sus ventajas y desventajas? ¿Cómo realizar una aplicación SPA?

La aplicación SPA de una sola página significa que toda la aplicación tiene una sola página y todo el contenido de la página se realiza cargando datos de forma asincrónica y actualizando dinámicamente la página. Las aplicaciones SPA generalmente se implementan utilizando marcos front-end (como React, Angular, Vue, etc.). Ventajas: 1. Buena experiencia de usuario: las aplicaciones SPA pueden realizar el cambio de página sin actualizar y la experiencia del usuario es más fluida. 2. Separación de front-end y back-end: las aplicaciones SPA pueden separar el front-end y el back-end. El front-end solo necesita centrarse en la visualización de la página y la lógica de interacción, y el back-end solo necesita proporcionar API interfaces. 3. Mejorar el rendimiento: las aplicaciones SPA pueden reducir las actualizaciones de páginas, reducir la carga del servidor y mejorar el rendimiento. Desventajas: 1. Carga lenta de la primera pantalla: las aplicaciones SPA necesitan cargar todos los códigos y datos de front-end, y el tiempo de carga de la primera pantalla es más largo. 2. No compatible con SEO: dado que la aplicación SPA tiene solo una página, es difícil para los motores de búsqueda rastrear el contenido de la página, lo que no es compatible con SEO. 3. Problemas de compatibilidad del navegador: las aplicaciones SPA necesitan utilizar algunas funciones nuevas de HTML5 y tienen altos requisitos de compatibilidad del navegador. Formas de implementar aplicaciones SPA: 1. Utilice marcos de front-end: utilice marcos de front-end como React, Angular y Vue para implementar rápidamente aplicaciones SPA. 2. Utilice bibliotecas de enrutamiento: utilice bibliotecas de enrutamiento como React Router y Vue Router para lograr el cambio de actualización de página. 3. Utilice la tecnología AJAX: la tecnología AJAX se puede utilizar para cargar datos de forma asincrónica y actualizar dinámicamente el contenido de la página.

43. ¿Cuál es la diferencia entre componentes y complementos en Vue?

La diferencia entre componentes y complementos en Vue es la siguiente: 1. Los componentes son los conceptos básicos en Vue y son bloques de código reutilizables en las aplicaciones de Vue, que se utilizan para encapsular componentes de la interfaz de usuario o lógica empresarial. Los componentes se pueden usar varias veces en una aplicación Vue, pueden recibir datos pasados por el componente principal y también pueden enviar datos al componente principal. 2. Los complementos son funciones extendidas en Vue, que son algunos módulos funcionales opcionales que se utilizan para mejorar las funciones de las aplicaciones Vue. Los complementos pueden agregar métodos o propiedades globales, directivas o filtros globales y métodos o mixins de instancia de Vue. 3. Los componentes y complementos se utilizan de forma diferente. Los componentes deben registrarse en la aplicación Vue antes de poder usarse. Los componentes se pueden registrar mediante el método Vue.component() o el método Vue.extend(). El complemento se puede instalar mediante el método Vue.use() o se puede utilizar directamente en la instancia de Vue. 4. Los componentes y complementos tienen diferentes alcances. Los componentes se utilizan principalmente para encapsular componentes de la interfaz de usuario o lógica empresarial, y el alcance de la acción suele ser local y solo se utiliza dentro de un determinado componente. Los complementos se utilizan principalmente para mejorar las funciones de las aplicaciones Vue, y el alcance de acción suele ser global y se puede utilizar en toda la aplicación Vue.

44. ¿Cuáles son los métodos de comunicación entre los componentes de Vue?

Los métodos de comunicación entre los componentes de Vue son los siguientes: 1. Comunicación del componente padre-hijo: el componente padre pasa datos al componente hijo a través de accesorios, y el componente hijo pasa datos al componente padre a través de eventos. 2. Comunicación de componentes hermanos: los datos se pueden pasar a componentes hermanos a través de un componente principal común como intermediario. 3. Comunicación de componentes entre niveles: puede usar provide/inject para pasar datos hacia abajo, o usar $parent/$root para buscar componentes principales hacia arriba. 4. Comunicación de componentes que no son padres e hijos: puede utilizar Event Bus (Event Bus) o Vuex para lograr la comunicación entre componentes que no son padres e hijos. El bus de eventos es una instancia de Vue vacía que se puede utilizar para activar y escuchar eventos. Vuex es una biblioteca de gestión de estado que puede gestionar datos de forma centralizada y realizar estados compartidos entre componentes.

45. ¿Conoces el algoritmo diff de vue? ¿Dime?

El algoritmo diff de Vue es un algoritmo de comparación de DOM virtual eficiente, que se utiliza para calcular la diferencia entre los dos árboles DOM virtuales antes y después, y aplicar la diferencia al DOM real para minimizar las operaciones DOM. El algoritmo diff de Vue adopta una estrategia de comparación de doble extremo, es decir, la comparación comienza desde la cabeza y la cola del árbol DOM virtual antiguo y nuevo al mismo tiempo, para reducir el número de comparaciones tanto como sea posible. Específicamente, el algoritmo de diferenciación de Vue se divide en los siguientes pasos: 1. Primero compare los nodos raíz de los árboles DOM virtuales antiguos y nuevos. Si los tipos de nodos son diferentes, reemplace todo el nodo directamente; si los tipos de nodos son iguales, vaya al siguiente paso de comparación. 2. Compare los atributos y eventos de los nodos y actualice los atributos y eventos de los nodos si hay algún cambio. 3. Compare los nodos secundarios del nodo. Si el número de nodos secundarios es diferente, reemplace directamente los nodos secundarios de todo el nodo; si el número de nodos secundarios es el mismo, vaya al siguiente paso de comparación. 4. Para nodos secundarios en la misma posición, realice los pasos anteriores de forma recursiva hasta que se comparen todos los nodos secundarios. 5. Para los nodos redundantes en el nuevo árbol DOM virtual, agréguelos directamente al DOM real, para los nodos redundantes en el antiguo árbol DOM virtual, elimínelos directamente del DOM real. A través de los pasos anteriores, el algoritmo de diferenciación de Vue puede calcular de manera eficiente la diferencia entre los dos árboles DOM virtuales antes y después, y aplicar la diferencia al DOM real para minimizar las operaciones DOM.

46. ¿Hablar brevemente sobre Virtual Dom?

1. Virtual Dom es una tecnología que abstrae el estado de la página en un árbol DOM virtual. Es una de las tecnologías centrales de marcos front-end como React y Vue. 2. El principio de funcionamiento de Virtual Dom es que cuando cambia el estado de la página, el marco primero convertirá el nuevo estado en un nuevo árbol DOM virtual y luego comparará el nuevo árbol DOM virtual con el antiguo árbol DOM virtual para encontrar. diferencia entre los dos, y finalmente actualizar solo la parte que necesita ser actualizada, evitando así operaciones DOM innecesarias y mejorando el rendimiento de la página. 3. La ventaja de utilizar Virtual Dom es que permite a los desarrolladores centrarse en la gestión del estado de la página sin preocuparse por los detalles de implementación específicos de la página. Al mismo tiempo, dado que Virtual Dom puede reducir las operaciones DOM, puede mejorar el rendimiento y la capacidad de respuesta de la página.

47. ¿Cuál es la diferencia entre la Api de composición utilizada por Vue3.0 y la Api de opciones utilizada por Vue2.x?

La API de composición utilizada por Vue3.0 es diferente de la API de opciones utilizada por Vue2.x en las siguientes formas: 1. La forma de organizar el código es diferente: la API de composición está basada en funciones, mientras que la API de opciones está basada en objetos. 2. Mayor reutilización: Composition Api puede realizar mejor la reutilización lógica y puede encapsular el código lógico en funciones para facilitar la reutilización en múltiples componentes. 3. Mejor inferencia de tipos: Composition Api puede admitir mejor TypeScript porque utiliza más inferencia de tipos. 4. Mejor legibilidad del código: Composition Api puede organizar mejor el código, hacer que el código sea más claro y fácil de leer y reducir la confusión y la duplicación en Options Api. 5. Mejor capacidad de respuesta: reactivo y ref en Composition Api pueden manejar mejor los datos receptivos, lo que hace que el código sea más conciso y fácil de entender. En resumen, Composition Api tiene grandes ventajas en la organización del código, la reutilización, la inferencia de tipos, la legibilidad del código y la capacidad de respuesta, lo que puede ayudar mejor a los desarrolladores a crear aplicaciones Vue de alta calidad.

48. ¿Hablar sobre el mecanismo de ejecución setState en React?

En React, setState es el método utilizado para actualizar el estado del componente. Cuando se llama al método setState, React fusionará el nuevo objeto de estado con el objeto de estado actual y volverá a representar el componente. El mecanismo de ejecución específico es el siguiente: 1. Al llamar al método setState, React agregará el nuevo objeto de estado a una cola de actualización. 2. Si el método setState se llama varias veces en el mismo bucle de eventos, React combinará estas actualizaciones en una sola actualización y solo realizará una operación de actualización. 3. Cuando se llama al método setState en la función del ciclo de vida del componente y en el controlador de eventos, React agregará la actualización a la cola y realizará la operación de actualización después de que finalice el ciclo de eventos actual. 4. Cuando se llama al método setState en una operación asincrónica, React agregará la actualización a la cola y realizará la operación de actualización en el siguiente bucle de eventos. 5. Antes de ejecutar la operación de actualización, React optimizará la cola de actualizaciones para eliminar actualizaciones duplicadas y actualizaciones no válidas para mejorar el rendimiento. En resumen, el método setState de React es una operación asincrónica que agrega la actualización a la cola y realiza la operación de actualización en el momento adecuado. Al utilizar el método setState, se debe tener cuidado de evitar bucles infinitos y actualizaciones innecesarias para mejorar el rendimiento de los componentes.

49. ¿Hablar sobre la comprensión de los componentes de clase y los componentes de función en React? ¿Cual es la diferencia?

1. Tanto los componentes de clase como los componentes de función son una forma de definir componentes. 2. Los componentes de clase se definen usando la sintaxis de clase en ES6, deben heredar la clase React.Component y deben implementar el método de renderizado para devolver el jsx del componente; los componentes de clase pueden usar métodos de estado y ciclo de vida para administrar el estado y el comportamiento de el componente 3. Los componentes funcionales se definen usando funciones. Solo necesitan devolver JSX. Los componentes funcionales no pueden usar métodos de estado y ciclo de vida, pero puedes usar React Hook para administrar el estado y el comportamiento de los componentes. Diferencias: 1. Gramática: componentes de clase usa la sintaxis de clase, los componentes de función usan la sintaxis de función. 2. Gestión de estado: los componentes de clase pueden usar el estado para administrar el estado de los componentes, mientras que los componentes de función deben usar React Hooks para administrar el estado. 3. Ciclo de vida: los componentes de clase tienen métodos de ciclo de vida, como componenteDidMount () y componenteWillUnmount (), etc., mientras que los componentes de función no tienen métodos de ciclo de vida. 4. Rendimiento: los componentes funcionales suelen ser más livianos que los componentes de clase porque no necesitan heredar la clase React.Component e implementar el método render(). Sin embargo, si necesita administrar el estado y el comportamiento, es posible que los componentes funcionales necesiten usar React Hooks, lo que puede afectar el rendimiento.

50. Cuénteme sobre su comprensión de React Hooks. ¿Qué problema resolvió?

React Hooks es una nueva característica introducida en React 16.8, que nos permite usar el estado y otras características de React sin escribir una clase. Los React Hooks resuelven los siguientes problemas: 1. Es difícil reutilizar la lógica de estado entre componentes. Los React Hooks proporcionan una forma de compartir la lógica de estado llamada Hooks personalizados. 2. Los componentes complejos se vuelven difíciles de entender. React Hooks puede dividir componentes en funciones más pequeñas, cada una de las cuales se centra en una funcionalidad específica. 3. La relación entre los métodos del ciclo de vida y la lógica de estado en el componente Clase no es intuitiva. React Hooks puede separar los métodos del ciclo de vida y la lógica de estado, lo que hace que el código sea más fácil de entender y mantener. 4. Este problema de enlace en el componente Clase. Los componentes funcionales de React Hooks no tienen estos problemas de vinculación, lo que hace que el código sea más conciso y más fácil de mantener. En resumen, React Hooks proporciona una forma más sencilla e intuitiva de escribir componentes de React, lo que hace que el código sea más fácil de entender y mantener.

51. ¿Cómo mejoran el rendimiento UseMemo y useCallback y cuáles son los escenarios de aplicación?

Tanto UseMemo como useCallback se pueden utilizar para optimizar el rendimiento de los componentes de React. UseMemo puede almacenar en caché los resultados de los cálculos para evitar cálculos repetidos, mejorando así el rendimiento de representación de los componentes. Sus escenarios de aplicación incluyen: 1. Valores con alto costo de cálculo, como obtener datos de API y realizar cálculos complejos. 2. Optimice la renderización de subcomponentes para evitar renderizaciones innecesarias. 3. Evite crear nuevos objetos o matrices cada vez que renderice. UseCallback puede almacenar en caché funciones para evitar la creación de nuevas funciones cada vez que se representan, mejorando así el rendimiento de representación de los componentes. Sus escenarios de aplicación incluyen: 1. Evite la representación innecesaria de subcomponentes al pasar funciones como accesorios a subcomponentes. 2. Cuando utilice useEffect, evite la ejecución repetida de useEffect debido a cambios en la referencia de la función. 3. Cuando utilice useMemo, evite el doble cálculo de useMemo debido a cambios de referencia de funciones.

52. ¿Cuál es el principio de implementación de Vue-router?

Vue-router es un complemento de administración de enrutamiento proporcionado oficialmente por Vue.js. Su principio de implementación incluye principalmente los siguientes aspectos: 1. Basado en la idea de desarrollo de componentes de Vue.js, las reglas de enrutamiento se abstraen en componentes y el salto y la actualización de página se realizan mediante el anidamiento y el cambio de componentes. 2. Utilice la API de historial HTML5 para cambiar la dirección URL del navegador a través de los métodos pushState y replaceState, a fin de realizar el salto y la actualización de la ruta del front-end. 3. Utilice el mecanismo de enlace de datos receptivo de Vue.js para almacenar la información de enrutamiento en el atributo de datos de la instancia de Vue y monitorear los cambios de enrutamiento a través del reloj para realizar la actualización dinámica y la respuesta del enrutamiento. 4. Utilice las funciones de enlace del ciclo de vida de Vue.js, como beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave, etc., para implementar la interceptación y el control de rutas, logrando así la gestión de autoridad de ruta y la carga dinámica de la página. En resumen, el principio de implementación de Vue-router se basa en la idea de desarrollo de componentes de Vue.js y el mecanismo de enlace de datos receptivo, utilizando la API de historial HTML5 y la función de enlace del ciclo de vida de Vue.js para realizar el salto de enrutamiento front-end. , refresco, interceptación y control.

53. ¿Cómo empaquetar componentes y usarlos entre diferentes proyectos?

Para empaquetar componentes para su uso en diferentes proyectos, siga estos pasos: 1. Cree un proyecto de biblioteca de componentes independiente que contenga todos los componentes que se van a empaquetar. 2. En el proyecto de la biblioteca de componentes, cree una carpeta separada para cada componente y contenga todo el código y estilos del componente en ella. 3. En cada carpeta de componentes, cree un index.jsarchivo que exportará todo el contenido necesario para el componente, como clases de componentes, estilos y otras dependencias. 4. En el proyecto de biblioteca de componentes, utilice una herramienta de empaquetado como webpack para empaquetar todos los componentes en un único archivo JavaScript. 5. Publique el proyecto de la biblioteca de componentes en npm u otro administrador de paquetes para que otros proyectos puedan usarlo. 6. En otros proyectos, utilice npm installel comando para instalar la biblioteca de componentes. 7. En el archivo que necesita usar los componentes, importe los componentes requeridos y utilícelos.

54. ¿Cuál es la diferencia entre vue, reaccionar y angular?

Vue, React, Angular son todos marcos de JavaScript modernos para crear aplicaciones de una sola página (SPA) y aplicaciones web dinámicas. Las diferencias entre ellos son las siguientes: 1. Vue.js es un marco liviano, fácil de aprender y usar, adecuado para proyectos pequeños. React.js es una biblioteca que proporciona más flexibilidad y personalización, adecuada para proyectos grandes. Angular es un marco completo que proporciona muchas funciones y herramientas, adecuado para grandes proyectos de nivel empresarial. 2. La sintaxis de la plantilla de Vue.js es más simple e intuitiva, fácil de entender y mantener. React.js utiliza la sintaxis JSX, que requiere más aprendizaje y comprensión. Angular utiliza HTML y TypeScript, lo que requiere más aprendizaje y dominio. 3. El rendimiento de Vue.js es mejor porque utiliza DOM virtual y renderizado asincrónico. React.js también usa DOM virtual, pero debe optimizarse manualmente para mejorar el rendimiento. Angular tiene un rendimiento relativamente pobre porque utiliza enlace de datos bidireccional y mucha inyección de dependencia. 4. Tanto Vue.js como React.js son de código abierto, con una comunidad activa y una gran cantidad de complementos y componentes disponibles. Angular también es de código abierto, pero tiene una comunidad relativamente pequeña debido a su complejidad y curva de aprendizaje.

55. ¿Cuénteme sobre su comprensión de Redux? ¿Cómo funciona?

Redux es una biblioteca de administración de estado de JavaScript que nos ayuda a administrar y actualizar el estado de nuestras aplicaciones. El concepto central de Redux es la tienda, que es un objeto JavaScript que contiene el estado de toda la aplicación. Redux usa acciones y reductores para actualizar el estado en la tienda. Cuando ocurre un evento en la aplicación, podemos crear un objeto de acción, que describe el tipo de evento y los datos relacionados. Luego, pasamos este objeto de acción a una función reductora, que actualizará el estado en la tienda según el tipo de acción. La función reductora recibe el estado actual y el objeto de acción como parámetros y devuelve un nuevo objeto de estado. El principio de funcionamiento de Redux se puede resumir en los siguientes pasos: 1. Cree un objeto de tienda que contenga el estado de toda la aplicación. 2. Defina objetos de acción, que describen eventos en la aplicación. 3. Cree una función reductora que actualice el estado en la tienda según el tipo de acción. 4. Pase el objeto de acción a la función reductora, que devolverá un nuevo objeto de estado. 5. Actualice el estado en la tienda para que coincida con el nuevo objeto de estado. 6. Suscríbase a los cambios en la tienda de la aplicación para actualizar la interfaz de usuario cuando cambie el estado.

La ventaja de Redux es que puede ayudarnos a organizar y gestionar mejor el estado de la aplicación, haciendo que la aplicación sea más predecible y mantenible. Al mismo tiempo, Redux también se puede integrar con frameworks y bibliotecas como React, lo que nos facilita su uso para gestionar el estado de la aplicación.

El primer examen semanal 2205A

56. ¿Cuénteme sobre su comprensión del modelo de caja?

El modelo de caja significa que en una página web, cada elemento se considera como un cuadro rectangular, que consta de cuatro bordes, márgenes interiores, márgenes exteriores y áreas de contenido. Este modelo puede ayudarnos a comprender y controlar mejor el diseño y el estilo de los elementos de las páginas web. Específicamente, el modelo de caja incluye las siguientes partes: 1. Área de contenido (contenido): el contenido real del elemento, como texto, imágenes, etc. 2. Relleno: el área en blanco entre el área de contenido y el borde se puede controlar configurando la propiedad de relleno. 3. Borde: las líneas que rodean el área de contenido y el relleno se pueden controlar configurando la propiedad del borde. 4. Margen: el espacio en blanco entre el borde y los elementos adyacentes se puede controlar configurando el atributo de margen. En aplicaciones prácticas, podemos controlar el tamaño, la posición, el estilo del borde, el color de fondo, etc. de los elementos configurando varias propiedades del modelo de caja. Al mismo tiempo, el modelo de caja también es la base del diseño CSS. Si utiliza el modelo de caja de manera razonable, podemos lograr varios efectos de diseño complejos.

57. ¿Cuáles son los selectores de CSS? ¿Prioridad?¿Cuáles se pueden heredar?

Los selectores CSS son los siguientes: 1. Selector de elementos (selector de elementos): seleccione elementos por nombre de elemento, como p, div, a, etc. 2. Selector de clase (selector de clase): seleccione elementos por nombre de clase, comenzando con ".", como .class. 3. Selector de ID (selector de ID): seleccione elementos por ID, comenzando con "#", como #id. 4. Selector de atributos (selector de atributos): seleccione elementos a través de los atributos de los elementos, como [tipo = "texto"]. 5. Selector de pseudoclase (selector de pseudoclase): seleccione elementos por su estado, como: hover,: activo,: visitado, etc. 6. Selector de pseudoelemento (selector de pseudoelemento): se utiliza para seleccionar una determinada parte del elemento, como :: antes, :: después, etc. La prioridad de los selectores CSS de mayor a menor es: 1.! Importante 2. Estilo en línea (atributo de estilo) 3. Selector de ID 4. Selector de clase, selector de atributos, selector de pseudoclase 5. Selector de elementos, las propiedades CSS que pseudo- Los selectores de elementos pueden heredar son los siguientes: 1. Propiedades de la familia de fuentes (familia de fuentes, tamaño de fuente, peso de fuente, etc.) 2. Propiedades de la familia de texto (alineación de texto, sangría de texto, decoración de texto, etc.) 3 Atributos de color (color, color de fondo, etc.) 4. Atributos de lista (tipo-estilo-lista, imagen-estilo-lista, etc.) 5. Atributos de diseño de tabla (colapso de borde, espaciado de borde, etc.) 6. Otros Atributos (visibilidad, cursor, etc.)

58. ¿Cuáles son los métodos para centrar elementos horizontal y verticalmente? ¿Qué pasa si el elemento tiene un ancho y alto variables?

Hay varias formas de centrar elementos horizontal y verticalmente: 1. Utilice el diseño flexible: configure el elemento principal para mostrar: flex; y configure justify-content: center; y align-items: center; para lograr el centrado horizontal y vertical. 2. Utilice posicionamiento absoluto: establezca el elemento principal en posicionamiento relativo, establezca el elemento secundario en posicionamiento absoluto y establezca arriba: 50% e izquierda: 50%; luego use transformar: traducir (-50%, -50%) ; Se puede lograr un centrado horizontal y vertical. 3. Utilice el diseño de la tabla: configure el elemento principal para que muestre: tabla, configure el elemento secundario para que muestre: tabla-celda, y configure vertical-align: middle y text-align: center para lograr el centrado horizontal y vertical.

Si el elemento tiene un ancho y alto variables, puede usar los siguientes métodos: 1. Usar diseño flexible: configurar el elemento principal para mostrar: flex;, y configurar justify-content: center; y align-items: center;, y establezca el elemento secundario en flex: 1; Puede lograr un centrado horizontal y vertical. 2. Utilice posicionamiento absoluto: establezca el elemento principal en posicionamiento relativo, establezca el elemento secundario en posicionamiento absoluto y establezca arriba: 50% e izquierda: 50%; luego use transformar: traducir (-50%, -50%) y ancho máximo: 100% y altura máxima: 100%, puede lograr centrado horizontal y vertical 3. Utilice el diseño de la tabla: configure el elemento principal para mostrar: tabla;, configure el elemento secundario para mostrar: tabla-celda; y establezca vertical-align: middle; y text-align: center;, luego use max-width: 100%; y max-height: 100%; para lograr el centrado horizontal y vertical.

59. ¿Cómo entender el reflujo y el redibujado? ¿En qué circunstancias se activará?

Redistribuir y repintar son dos conceptos importantes cuando el navegador representa la página. Reflujo significa que cuando la posición y el tamaño de los elementos en la página cambian, el navegador necesita volver a calcular la posición y el tamaño del elemento y luego volver a diseñar toda la página. Este proceso se denomina reflujo. El cambio de flujo hará que la página se vuelva a representar, por lo que requerirá más rendimiento. Redibujar significa que cuando cambian los atributos de estilo de los elementos en la página, el navegador solo necesita volver a dibujar los estilos de estos elementos sin volver a calcular la posición y el tamaño de los elementos, este proceso se llama volver a dibujar. Redibujar es menos costoso que redistribuir.

El redistribución y el redibujado se activan en los siguientes escenarios: 1. Cuando la página se carga por primera vez, el navegador necesita redistribuir y volver a dibujar. 2. Cuando la posición, el tamaño, el contenido y otros atributos de los elementos de la página cambian, se activará el redistribución y el redibujado. 3. Cuando el atributo de estilo de un elemento en la página cambia, se activará un nuevo dibujo. 4. Cuando cambie el tamaño de la ventana del navegador, se activará el reflujo y el redibujado. 5. Cuando la página se desplaza, se activa un nuevo dibujo.

Por lo tanto, al escribir páginas, debe intentar evitar el reflujo y el redibujado frecuentes, y puede optimizar el rendimiento de la página de las siguientes maneras: 1. Utilice las propiedades de transformación y opacidad de CSS3 para lograr efectos de animación y evite el uso de propiedades como posición y flotación. 2. Utilice posición: absoluta o fija para posicionar elementos y evite el uso de atributos como margen y relleno. 3. Para evitar modificar con frecuencia los atributos de estilo de los elementos DOM, se pueden combinar varias operaciones de modificación en una sola operación. 4. Utilice técnicas como listas virtuales para optimizar la representación de grandes cantidades de datos.

60. ¿Qué es el diseño responsivo? ¿Cuáles son los principios básicos del diseño responsivo? ¿Cómo hacer?

El diseño responsivo es un método de diseño web que puede hacer que el sitio web presente la mejor experiencia de usuario en diferentes dispositivos (como computadoras de escritorio, tabletas, teléfonos móviles, etc.). El principio básico del diseño responsivo es ajustar automáticamente el diseño, el tamaño de fuente, el tamaño de la imagen y otros elementos de la página web para adaptarse a las pantallas de diferentes dispositivos mediante el uso de tecnologías como la consulta de medios CSS y el diseño de cuadrícula elástica, según el tamaño de la pantalla. y resolución de diferentes tamaños y resoluciones de dispositivos.
Para hacer un buen trabajo en diseño responsivo, debe seguir los siguientes pasos: 1. Diseñe un diseño de cuadrícula elástica: utilice unidades relativas (como porcentaje, em, etc.) para definir el tamaño y la posición de los elementos de la página web a los que adaptarse. los tamaños de pantalla de diferentes dispositivos. 2. Utilice consultas de medios CSS: según el tamaño de la pantalla y la resolución de los diferentes dispositivos, utilice consultas de medios CSS para ajustar el diseño, el tamaño de fuente, el tamaño de la imagen y otros elementos de la página web. 3. Optimice el tamaño de la imagen: utilice el formato de imagen adecuado y técnicas de compresión para reducir el tamaño de la imagen y mejorar la velocidad de carga de la página web. 4. Prueba y optimización: pruebe el efecto del diseño receptivo de la página web en diferentes dispositivos y optimícelo de acuerdo con los resultados de la prueba para mejorar la experiencia del usuario.

61. Cuénteme sobre su comprensión del modelo de caja.

1. El modelo de caja significa que en una página web, cada elemento se considera como un cuadro rectangular, que incluye cuatro partes: contenido, margen interior, borde y margen exterior, entre ellas, el área de contenido es el contenido de visualización real del elemento. área, el relleno es la distancia entre el área de contenido y el borde, que es la línea alrededor del contenido y el relleno, y el margen es la distancia entre el borde y los elementos adyacentes.

2. El tamaño del modelo de caja está determinado por los atributos de altura y ancho del elemento, pero el tamaño real también necesita agregar los valores de margen interior, borde y margen exterior. En CSS, el método de cálculo de la caja El modelo puede ser controlado por el atributo box-sizing. Hay dos valores: cuadro de contenido y cuadro de borde. cuadro de contenido indica que el tamaño del modelo de caja incluye solo el área de contenido, mientras que cuadro de borde indica que el tamaño del modelo de caja incluye el área de contenido, los márgenes internos y los bordes, pero no incluye los márgenes externos.

3. El modelo de caja es muy importante en el diseño de una página web. Se pueden lograr varios efectos de diseño estableciendo los atributos de ancho, alto, margen interior, borde y margen exterior del elemento. Al mismo tiempo, el modelo de caja también puede controlar la posición y la relación jerárquica de los elementos a través de las propiedades de posicionamiento de CSS.

62. ¿Cómo centrar una caja horizontal y verticalmente?¿Cuáles son los métodos?

Utilice el diseño flexible, configure el contenedor principal para mostrar:flex y luego use justify-content:center y align-items:center para lograr el centrado horizontal y vertical.

Usando posicionamiento absoluto, establezca las propiedades izquierda y superior del cuadro en 50% y luego use transform:translate(-50%,-50%) para lograr el centrado horizontal y vertical.

Use el diseño de la tabla, configure el contenedor principal para mostrar: tabla, luego configure el cuadro para mostrar: tabla-celda, use vertical-align:middle y text-align:center para lograr el centrado horizontal y vertical.

63. Cuéntame sobre los tipos de datos en JavaScript y cómo almacenarlos.

JavaScript tiene siete tipos de datos, a saber:

Tipos de datos básicos: Número, Cadena, Booleano, Nulo, Indefinido, Símbolo (nuevo en ES6).

Tipo de datos de referencia: Objeto.

El valor del tipo de datos básico se almacena en la memoria de la pila, mientras que el valor del tipo de datos de referencia se almacena en la memoria del montón y el puntero a los datos reales en la memoria del montón se almacena en la memoria de la pila.

Cuando creamos una variable de un tipo de datos básico, se asignará un espacio en la memoria de la pila y el valor se almacenará en este espacio;

Cuando creamos una variable de un tipo de datos de referencia, se asigna un espacio en la memoria de la pila, que almacena un puntero a los datos reales en la memoria del montón, y los datos reales se almacenan en la memoria del montón.

64. ¿Cómo entender la capacidad de respuesta? ¿Cuáles son las formas de lograrlo? ¿Cual es la diferencia?

1. El sitio web responsivo es un tipo de diseño de página de red. El diseño y desarrollo de la página debe responder y ajustarse de acuerdo con el comportamiento del usuario y el entorno del dispositivo (plataforma del sistema, tamaño de pantalla, orientación de la pantalla, etc.)

2. Consulta de medios: utilice @media para definir diferentes estilos según los diferentes tamaños de pantalla

3. Porcentaje: en relación con la unidad de medida del bloque contenedor, establezca el porcentaje en la propiedad para adaptarse a diferentes pantallas.

4. vw/vh: Unidad de ventana gráfica, que se puede adaptar según el tamaño de la ventana del navegador.

5. rem: se refiere a la unidad relativa al tamaño de fuente del elemento raíz, rem es solo una unidad relativa

65. ¿Cuáles son los métodos comunes de optimización del rendimiento de Css y cómo lograrlos?

1. Evite restricciones excesivas

2. Evite los selectores descendientes

3. Utilice una sintaxis compacta

4. Evite espacios de nombres innecesarios

5. Evite repeticiones innecesarias

6. Es mejor utilizar nombres semánticos para definir

7. ¡Evita !importante, puedes elegir otros selectores

8. Optimice las reglas tanto como sea posible y combine diferentes tipos de reglas repetidas.

66. ¿Cuáles son los métodos para juzgar el tipo de datos? ¿Cual es la diferencia?

1. tipo de:

a. Puede juzgar el tipo de datos, devuelve una cadena que representa el tipo de datos, el resultado devuelto solo puede incluir número, booleano, cadena, función, objeto, indefinido

B. Puede utilizar typeof para determinar si existe una variable.

c. El problema con el operador typeof es que devuelve un objeto sin importar el tipo de objeto al que se hace referencia.

2, método de instancia:

Generalmente se usa para detectar el tipo de datos de referencia, la expresión es: Una instancia de B, para determinar si A es una instancia de B, si A es una instancia de B, devuelve verdadero; de lo contrario, devuelve falso, el tipo de datos está determinado por la construcción tipo

3, método constructor:

constructor es un atributo en el objeto prototipo, que apunta al constructor,

4. Método invencible y omnipotente: jquery.type()

Si el objeto no está definido o es nulo, devuelve "indefinido" o "nulo" en consecuencia.

Si el objeto tiene una [[Clase]] interna que es la misma que el objeto integrado de un navegador [[Clase]], devolvemos el nombre de [[Clase]] correspondiente

67. ¿Cuál es la diferencia entre Vincular, Llamar y Aplicar? ¿Cómo implementar un método de vinculación?

1. call,, applyla bindfunción es cambiar el contexto cuando se ejecuta la función, en resumen, es cambiar thisel apuntamiento de la función cuando se está ejecutando

2. applyAcepta dos parámetros. El primer parámetro es thisel puntero y el segundo parámetro es el parámetro aceptado por la función, que se pasa en forma de matriz. thisDespués de cambiar el puntero, la función original se ejecutará inmediatamente. y este método sólo cambia temporalmente thisel puntero una vez

3. callEl primer parámetro del método también es thisel puntero, y luego se pasa una lista de parámetros. La función original se ejecutará inmediatamente después de applycambiar thisel puntero, y este método solo cambia temporalmente thisel puntero una vez. Cuando el primer parámetro es null, undefinedtiempo, el valor predeterminado apunta a window(en el navegador)

4. El método de vinculación es muy similar a la llamada. El primer parámetro también es thisel puntero, y más adelante también se pasa una lista de parámetros (pero esta lista de parámetros se puede pasar varias veces). thisDespués de cambiar el puntero, no será ejecutado inmediatamente, pero devolverá un cambio permanente thisa la función apuntada

5. Diferencia:

Los tres pueden cambiar thisel objeto señalado por la función.

El primer parámetro de los tres es thisel objeto al que apuntar. Si no existe tal parámetro o el parámetro es undefinedo null, apuntará al global de forma predeterminada.window

Los tres pueden pasar parámetros, pero applyes una matriz, callpero una lista de parámetros, applyy callla suma es un parámetro entrante único, pero bindse puede dividir en múltiples entrantes.

bindes devolver la función después de vincular esto, applyes callejecutar inmediatamente

modificar thispunto
Pasar parámetros dinámicamente

// Método 1: pasar solo parámetros de función en bind 
fn.bind(obj,1,2)() 
//
Método 2: pasar parámetros de función en bind y también pasar parámetros en la función de retorno 
fn.bind(obj, 1 )(2)

newpalabra clave compatible

El código de implementación general es el siguiente:

Function.prototype.myBind = function (context) { 
    // Determinar si el objeto que llama es una función 
    if (typeof this! == "function") { 
        throw new TypeError("Error"); 
    } 
//
    Obtener parámetros 
    const args = [...argumentos].slice(1), 
          fn = this; 
return
    function Fn() { 
//
        Dependiendo del método de llamada, pasa diferentes valores de enlace 
        return fn.apply(esta instancia de Fn? new fn(... argumentos): contexto, args.concat(...argumentos)); 
    } 
}

68. ¿Cómo entender el cierre? ¿Cuál es el escenario de aplicación del cierre?

1. Una función está empaquetada con referencias a su estado circundante (entorno léxico, entorno léxico) (o la función está rodeada de referencias), dicha combinación es un cierre (cierre), es decir, un cierre le permite acceder al alcance de su función externa en una función interna

2. Escenarios de aplicación:

crear variables privadas,

Extender la vida útil de las variables.

datos de caché

Implementar la función de devolución de llamada.

69. Hable brevemente sobre ¿qué es un proxy de evento?

1. Delegación de eventos (Event Delegation), también conocida como delegación de eventos. es una técnica común para vincular eventos comúnmente utilizada en JavaScript. Como sugiere el nombre, el "proxy de eventos" consiste en delegar los eventos de respuesta (clic, pulsación de tecla...) que originalmente deben vincularse a los elementos secundarios al elemento principal y dejar que el elemento principal asuma la función de monitoreo de eventos. . El principio del proxy de eventos es la propagación de eventos de elementos DOM.

70. ¿Qué son antivibración y estrangulamiento? ¿Cual es la diferencia? ¿Como alcanzar?

1. Anti-vibración significa que después de que se activa el evento, nla devolución de llamada se ejecuta después de un retraso de segundos. Si nel evento se activa nuevamente dentro de este segundo, el tiempo se reiniciará.

2. La limitación significa que el evento se ejecuta después de n segundos. Si se activa repetidamente en n segundos, el tiempo se volverá a cronometrar, lo que puede reducir la frecuencia de activación del evento dentro de un período de tiempo.

3. Diferencia:

Mismo punto:

se puede setTimeoutlograr usando

El propósito es reducir la frecuencia de ejecución de devoluciones de llamada. Ahorra recursos informáticos.

diferencia:

Función anti-vibración, después de un período de operación continua, maneja la devolución de llamada, úsala clearTimeoute setTimeoutimplementa. Limitación de funciones, en una operación continua, que solo se ejecuta una vez por período de tiempo, y se utiliza en eventos de alta frecuencia para mejorar el rendimiento.

La función antivibración se centra en eventos que se activan continuamente durante un cierto período de tiempo y solo se ejecuta una vez al final, mientras que la función de limitación solo se ejecuta una vez en un período de tiempo.

Por ejemplo, la frecuencia de tiempo se establece en 500 ms y, en 2 segundos, la función se activa, acelera y ejecuta con frecuencia cada 500 ms. Anti-vibración, no importa cuántas veces se llame al método, solo se ejecutará una vez después de 2 segundos.

4. Escenarios de aplicación:

En el caso continuo de antivibración, solo es necesario activar una devolución de llamada en los siguientes escenarios:

Cuadro de búsqueda Entrada de búsqueda. Sólo el usuario necesita ingresar la última vez antes de enviar la solicitud.

Número de teléfono móvil, detección de entrada de verificación de correo electrónico

tamaño de ventana resize. Simplemente calcule el tamaño de la ventana una vez finalizado el cambio de tamaño. Evite volver a renderizar.

Los escenarios en los que la limitación ejecuta una devolución de llamada a intervalos incluyen:

Desplácese para cargar, cargue más o desplácese hacia abajo para escuchar

Cuadro de búsqueda, función de asociación de búsqueda

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

1. Encuentre la variable requerida en el alcance actual, pero 该作用域没有esta variable, entonces esta variable es 自由变量. Si encuentra y busca en 自己作用域找不到esta variable , finalizará hasta que acceda al objeto de la ventana. La relación capa por capa es去父级作用域查依次向上级作用域作用域链。

2. La función de la cadena de alcance es garantizar el acceso ordenado a todas las variables y funciones a las que tiene acceso el entorno de ejecución.A través de la cadena de alcance se puede acceder a las variables y funciones del entorno externo. La cadena de alcance es esencialmente una lista de punteros a objetos variables. Un objeto variable es un objeto que contiene todas las variables y funciones en el entorno de ejecución. El extremo frontal de la cadena de alcance es siempre el objeto variable del contexto de ejecución actual.

72. ¿Hablar sobre la comprensión del prototipo y la cadena de prototipos?

1. Prototipo:

Cuando JS declara un constructor (una función utilizada para crear instancias de un objeto), creará un objeto correspondiente en la memoria, que es el prototipo de la función original. El constructor tiene un atributo de prototipo por defecto y el valor del prototipo apunta al prototipo de la función. Al mismo tiempo, también hay un atributo de constructor en el prototipo, y el valor del constructor apunta al objeto de función.

El objeto instanciado a través del constructor no tiene el atributo prototipo, tiene un atributo proto por defecto y el valor de proto apunta al prototipo del constructor. Las propiedades agregadas o modificadas en el objeto prototipo se pueden compartir en todos los objetos instanciados.

Función: compartir datos, ahorrar espacio en la memoria; realizar herencia

2. Cadena de prototipos :

Al acceder a una propiedad en un objeto instanciado, primero buscará dentro del objeto (su propia propiedad). Si no puede encontrarlo, lo buscará en el prototipo señalado por su proto . Si aún no puede encontrarlo, Continuará buscándolo en el prototipo, busque en el prototipo superior señalado por proto hasta encontrar u Object.prototype.proto (el valor es nulo), este proceso de cadena es la cadena de prototipo.

Función: encontrar el método de atributo del objeto.

73. ¿Cuáles son el ciclo de vida y el significado de vue?

1. El ciclo de vida de vue se refiere a una serie de procesos desde el inicio de la creación, la inicialización de datos, la compilación de plantillas, la suspensión en DOM y el renderizado, la actualización del renderizado y la desinstalación.

2. beforeCreate(): antes de la creación, después de una nueva instancia de vue, solo hay algunos enlaces de ciclo de vida predeterminados y eventos predeterminados, y otras cosas aún no se han creado. Cuando se ejecuta este ciclo de vida, los datos en datos y métodos no se han inicializado. Los datos en datos y los métodos en métodos no se pueden utilizar en esta etapa.

3. creado (): creado, los datos y métodos se han inicializado y se pueden llamar

4. BeforeMount (): antes del montaje, la plantilla se compiló en la memoria, pero no se montó en la página, en este momento la página aún es antigua

5. montado (): montado, la instancia de Vue se ha inicializado. En este punto, el componente sale de la fase de creación y entra en la fase de ejecución. Si queremos manipular los nodos DOM en la página a través de complementos, podemos hacerlo en esta etapa lo antes posible.

6. beforeupdate (): antes de la actualización, los datos que se muestran en la página aún son antiguos, los datos en los datos están actualizados y la página no se ha sincronizado con los datos más recientes.

7. actualizado (): actualización, los datos que se muestran en la página y los datos en los datos se han mantenido sincronizados y todos están actualizados

8. beforeDestory(): Antes de la destrucción, la instancia de Vue ingresa a la etapa de destrucción desde la etapa de ejecución, en este momento todos los datos y métodos, instrucciones, filtros ... están disponibles. realmente no han sido destruidos todavía

9. Destoryed(): Destruida, la instancia de Vue entra a la etapa de destrucción desde la etapa de ejecución, en este momento todos los datos y métodos, instrucciones, filtros ... están disponibles. realmente no han sido destruidos todavía

74. ¿Cuáles son las funciones de enlace de las instrucciones personalizadas de vue?

bind: se llama solo una vez, cuando la directiva está vinculada al elemento por primera vez. Aquí se pueden realizar ajustes de inicialización únicos.

insertado: se llama cuando el elemento vinculado se inserta en el nodo principal (solo se garantiza que existe el nodo principal, pero no necesariamente se inserta en el documento).

actualización: se llama cuando se actualiza el VNode del componente, pero puede ocurrir antes de la actualización de su VNode secundario. El valor de la directiva puede haber cambiado o no. Pero puede ignorar las actualizaciones innecesarias de la plantilla comparando los valores antes y después de la actualización (consulte a continuación los parámetros detallados de la función de enlace).

componenteActualizado: Se llama después de que se actualicen el VNode del componente donde se encuentra el comando y sus VNodes secundarios.

desvincular: se llama solo una vez, cuando la instrucción no está vinculada al elemento.

75. ¿Qué es el almacenamiento local de JavaScript? ¿Diferencias y escenarios de uso?

1. javaScriptDescribimos principalmente los siguientes cuatro métodos de almacenamiento en caché local:

Galleta

sesiónAlmacenamiento

almacenamiento local

indexadoDB

2. Las principales diferencias entre cookie, sessionStoragey localStorageson las siguientes:

Tamaño de almacenamiento: cookieel tamaño de los datos no puede exceder 4k, sessionStoragey localStorageaunque también hay un límite de tamaño de almacenamiento, es cookiemucho mayor que eso y puede alcanzar los 5 M o más.

Tiempo efectivo: localStoragealmacene datos persistentes, los datos no se perderán después de cerrar el navegador a menos que se eliminen activamente; los datos sessionStoragese eliminarán automáticamente después de cerrar la ventana actual del navegador; serán válidos hasta cookieel cookietiempo de vencimiento establecido, incluso si la ventana o el navegador está cerrado

En la interacción entre los datos y el servidor, cookielos datos se transmitirán automáticamente al servidor y el servidor también se puede cookieescribir en el cliente; sessionStoragey localStoragelos datos no se enviarán automáticamente al servidor, solo se guardarán localmente.

3. Utilice opciones para escenarios incorrectos:

Se recomienda su uso al marcar usuarios y rastrear el comportamiento del usuario.cookie

Adecuado para el almacenamiento a largo plazo de datos locales (tokens), recomendadolocalStorage

Se recomienda iniciar sesión una sola vez para cuentas confidencialessessionStorage

Se recomienda su uso cuando se almacena una gran cantidad de datos y cuando se guarda el historial de edición en documentos en línea (editores de texto enriquecido).indexedDB

Examen mensual 111

76. Cuénteme sobre su comprensión de la recursividad. ¿Encapsular un método para lograr la encapsulación de la estructura de árbol con recursividad?

1. La recursión es una implementación de un algoritmo o función, que resuelve problemas llamándose a sí mismo. Durante la recursividad, cada invocación divide el problema en subproblemas más pequeños hasta que el problema se divide en partes lo suficientemente pequeñas como para resolverse directamente.

2. La recursividad generalmente se puede utilizar para resolver problemas con estructuras recursivas, como estructuras de árbol y estructuras de gráficos.

77. ¿Cuál es la diferencia entre Link y @import?

1. Link y @import son métodos para introducir recursos externos, pero existen diferencias

la diferencia:

1. Tiempo de carga: las etiquetas de enlace se cargan cuando se carga la página; @import se carga después de cargar la página.

2. Compatibilidad: la etiqueta Link es una etiqueta HTML con buena compatibilidad, @import es una sintaxis CSS que no es compatible con navegadores antiguos.

3. Ámbito de acción: las etiquetas de enlace pueden importar varios tipos de archivos, como CSS, JS, imágenes, etc., mientras que @import solo puede importar archivos CSS.

4. Peso: el peso del archivo CSS importado por la etiqueta Link es mayor que el del archivo CSS importado por @import, por lo que cuando los estilos entran en conflicto, el estilo introducido por la etiqueta Link anulará el estilo introducido por @import

78. ¿Qué es la FOUC? ¿Cómo evitarlo?

1. FOUC es una falla temporal del estilo del documento, lo que significa que cuando se carga la página web, el archivo CSS no se carga a tiempo, lo que resulta en un contenido estilizado a corto plazo en la página.

Como evitar:

1. Coloque el archivo CSS al principio del documento HTML para asegurarse de que el archivo CSS se cargue primero cuando se carga la página.

2. Utilice el estilo CSS en línea para incrustar el estilo CSS directamente en el documento HTML, para evitar demoras cuando se carga el precio de CSS.

3. El uso de preprocesadores CSS, como Sass y Less, puede compilar archivos CSS en un solo archivo CSS, reduciendo así la cantidad de solicitudes HTTP.

4. Utilice el caché del navegador para almacenar CSS localmente, lo que puede reducir el tiempo de carga de la página.

5. Utilice JavaScript para detectar si el archivo CSS se ha cargado cuando se carga la página. Si la carga no se completa, la representación de la página puede retrasarse hasta que se cargue el archivo CSS.

79. Cuénteme sobre su comprensión de los precompiladores.

1. Un precompilador es un programa que procesa el código fuente antes de compilarlo y puede realizar algunas operaciones de preprocesamiento, como reemplazo de macros, compilación condicional, inclusión de archivos de encabezado, etc. El precompilador es parte del compilador y se puede ejecutar automáticamente durante la compilación o mediante comando.

2. La función principal del precompilador es reemplazar la definición de macro en el código fuente con el código real e insertar el contenido del archivo de encabezado en el código fuente. Esto reduce la duplicación de código y mejora la legibilidad y el mantenimiento del código.

3. El precompilador también puede realizar una compilación condicional y generar diferentes códigos según las diferentes opciones de compilación condicional. De esta manera, se pueden generar diferentes códigos según diferentes requisitos y se puede mejorar la flexibilidad y portabilidad del código.

80. ¿Cuál es la función de mustcomponentUpdate?

1. mustComponentUpdate es uno de los métodos del ciclo de vida de React y se utiliza para controlar si es necesario volver a renderizar el componente. Su función es determinar si los accesorios y el estado del componente han cambiado antes de volver a renderizar el componente. Si no hay cambios, devuelve falso; de lo contrario, devuelve verdadero, indicándole a React que el componente debe volver a renderizarse.

2. El uso de mustComponentUpdate puede mejorar el rendimiento de las aplicaciones React porque puede evitar una repetición innecesaria. Cuando los accesorios o el estado del componente cambian, React volverá a renderizar el componente. Si los accesorios o el estado del componente no han cambiado, entonces no es necesario volver a renderizar. En este momento, se puede utilizar shouldComponentUpdate para evitar re-renderizaciones innecesarias. representación.

81. ¿Describir la lógica de procesamiento de transacciones en React?

La lógica de procesamiento de transacciones en React significa que en el ciclo de vida de un componente de React, React creará automáticamente un objeto de transacción para administrar el proceso de actualización del componente. El objeto de transacción contiene una serie de funciones de enlace de ciclo de vida para realizar operaciones específicas durante las actualizaciones de componentes.

82. ¿Cuál es la división de los componentes de React en componentes comerciales y componentes técnicos?

1. Los componentes de React se pueden dividir en componentes comerciales y componentes técnicos según sus funciones y usos.

2. Los componentes comerciales se refieren a componentes relacionados con el negocio, como cuadros de inicio de sesión, carritos de compras, listas de productos, etc. Estos componentes suelen ser funcionales y pueden ser compartidos por varias páginas o aplicaciones. Los componentes comerciales suelen estar compuestos por varios componentes técnicos, como formularios, botones, listas, etc.

3. Los componentes técnicos se refieren a componentes relacionados con la tecnología, como formularios, botones, listas, etc. Estos componentes suelen tener funciones comunes y pueden ser compartidos por varios componentes empresariales. Los componentes técnicos suelen estar compuestos de código HTML, CSS y JavaScript con el que se puede interactuar a través de accesorios y propiedades de estado.

83. ¿Qué función periódica es la optimización del rendimiento de React?

La optimización del rendimiento de React se realiza en la función de ciclo de vida shouldComponentUpdate. Esta función se llama antes de actualizar el componente y puede devolver false para evitar que el componente se vuelva a representar, mejorando así el rendimiento de la aplicación. En esta función, puede decidir si volver a renderizar el componente comparando los accesorios y el estado antes y después.

84. ¿Hablar sobre la comprensión y los escenarios de aplicación de la arquitectura Fiber?

1. La arquitectura Fiber es un modelo de concurrencia liviano basado en corrutinas, que puede lograr altas capacidades de procesamiento concurrente en un solo subproceso.

2. La idea central de la arquitectura Fiber es descomponer una tarea a largo plazo en varias tareas pequeñas y luego alternar entre estas pequeñas tareas para lograr un procesamiento concurrente.

Los escenarios de aplicación de la arquitectura Fiber incluyen principalmente los siguientes aspectos:
1. Aplicaciones de red altamente concurrentes: la arquitectura de fibra puede manejar una gran cantidad de solicitudes de red en un solo subproceso, mejorando así las capacidades de procesamiento concurrente de las aplicaciones. 
2. Acceso a la base de datos de alto rendimiento: la arquitectura de fibra puede procesar múltiples solicitudes de bases de datos en un solo subproceso, mejorando así el rendimiento del acceso a la base de datos. 
3. Procesamiento de datos a gran escala: la arquitectura de fibra puede descomponer las tareas de procesamiento de datos a gran escala en múltiples tareas pequeñas, mejorando así la eficiencia del procesamiento de datos. 
4. Procesamiento de datos en tiempo real: la arquitectura de fibra puede realizar el procesamiento de datos en tiempo real, como monitoreo en tiempo real, procesamiento de registros en tiempo real, etc.

85. ¿Reaccionar solución de optimización del rendimiento?

Utilice PureComponent o deberíaComponentUpdate: PureComponent es un componente de rendimiento optimizado proporcionado por React. Automáticamente realizará una comparación superficial. Si los accesorios y el estado no han cambiado, el componente no se volverá a renderizar. Si está utilizando un componente común, puede implementar manualmente el método shouldComponentUpdate para realizar una lógica de comparación personalizada.

Utilice React.memo: React.memo es un componente de alto nivel proporcionado por React. Puede almacenar en caché el resultado de renderizado del componente. Si los accesorios no han cambiado, devolverá directamente el resultado almacenado en caché sin volver a renderizar el componente.

Evite realizar cálculos y operaciones complejos en el método de renderizado: el método de renderizado se llamará cada vez que se actualice el componente. Si se realizan cálculos y operaciones complejos en él, afectará el rendimiento del componente. Estos cálculos y operaciones se pueden colocar en el método del ciclo de vida del componente o almacenarse en caché utilizando tecnología de memorización.

Utilice React.lazy y Suspense: React.lazy es un componente de carga diferida proporcionado por React, que puede retrasar la carga de componentes hasta que sea necesario utilizarlos. El suspenso es un componente proporcionado por React, que puede mostrar un estado de carga cuando se carga el componente y esperar a que se cargue antes de mostrarlo.

Pruebas de rendimiento con mustComponentUpdate y React.memo: puede usar la herramienta de prueba de rendimiento de React para probar, descubrir qué componentes deben optimizarse y luego usar shouldComponentUpdate o React.memo para optimizar.

Utilice la herramienta Profiler de React para el análisis de rendimiento: React proporciona una herramienta Profiler que puede ayudar a los desarrolladores a analizar el rendimiento de renderizado de los componentes y descubrir qué componentes deben optimizarse.

86. Describe brevemente el proceso de renderizado flux y css.

Flux es un patrón arquitectónico para crear aplicaciones web escalables. Su idea central es el flujo de datos unidireccional, es decir, los datos solo pueden fluir de un lugar a otro, lo que puede evitar confusión e inconsistencia en los datos.

El proceso de renderizado CSS consiste en combinar documentos HTML y hojas de estilo CSS para generar páginas web visuales. El proceso específico es el siguiente:
1. El navegador analiza el documento HTML y crea un árbol DOM. 
1. El navegador analiza la hoja de estilos CSS y crea un árbol CSSOM. 
1. Combine el árbol DOM y el árbol CSSOM para generar un árbol de representación. 
1. Según la información del nodo en el árbol de renderizado, calcule la posición y el tamaño de cada nodo. 
1. Dibuja los nodos en el árbol de renderizado en la pantalla para generar la página web final.

87. ¿Cuál es la diferencia entre el procesamiento de eventos DOM0, DOM2 y DOM3?

DOM0, DOM2 y DOM3 se refieren a diferentes versiones de las especificaciones de procesamiento de eventos DOM (Document Object Model) de JavaScript.

1. Procesamiento de eventos DOM0: en el procesamiento de eventos DOM0, el controlador de eventos se asigna directamente al atributo del elemento DOM.

2. Manejo de eventos DOM2: la especificación de manejo de eventos DOM2 introduce los métodos addEventListener() y removeEventListener(), que permiten agregar múltiples controladores de eventos al mismo elemento.

3. Manejo de eventos DOM3: la especificación de manejo de eventos DOM3 introduce más tipos de eventos y más opciones de controlador de eventos.

88. ¿Cómo juzgar que la página se desplaza hacia abajo y cómo juzgar si los elementos de la página ingresan al área de visualización?

Juzgar que la página se desplaza hasta el final se puede hacer de las siguientes maneras:

Obtenga la altura de desplazamiento de la página scrollTop, la altura visible de la página clientHeight y la altura total de la página scrollHeight.

Determine si scrollTop + clientHeight es igual a scrollHeight. Si son iguales, significa que la página se ha desplazado hasta el final.

Juzgar si los elementos de la página ingresan al área visual se puede hacer de las siguientes maneras:

1. Obtenga la información de posición del elemento, incluidos offsetTop, offsetLeft, offsetWidth y offsetHeight del elemento.

Obtenga la altura de desplazamiento de la página scrollTop y la altura visible de la página clientHeight.

Determine si la información de posición del elemento está entre scrollTop y scrollTop + clientHeight, si es así, significa que el elemento ha ingresado al área de visualización.

89. Cuénteme sobre la diferencia entre el Event Loop del navegador y el Event Loop en nodejs.

1. La principal diferencia entre el Event Loop del navegador y el Event Loop en nodejs radica en su implementación y entorno operativo.

2. El Event Loop del navegador se implementa en base a un motor JavaScript de un solo subproceso, que es responsable de manejar la ejecución del código JavaScript y el procesamiento de eventos.

3. El bucle de eventos en el navegador incluye principalmente dos tipos de colas de tareas: macrotareas y microtareas. Las tareas macro incluyen setTimeout, setInterval, eventos DOM, etc., mientras que las microtareas incluyen Promise, MutationObserver, etc. En cada bucle de eventos, primero se ejecutan todas las microtareas, luego se ejecuta una macrotarea y luego se ejecutan todas las microtareas, y así sucesivamente.

4. El bucle de eventos en nodejs se implementa en base a C++ multiproceso, que es responsable de la ejecución del código JavaScript y el procesamiento de las operaciones de E/S.

5. El bucle de eventos en nodejs incluye principalmente seis etapas: temporizadores, devoluciones de llamada pendientes, inactivo, preparación, sondeo y verificación. En cada etapa, Event Loop ejecutará la cola de tareas correspondiente hasta que se ejecuten todas las tareas.

90. ¿Cuénteme sobre el principio de implementación subyacente de vue-router?

1. El principio de implementación subyacente de Vue-router se basa principalmente en el sistema responsivo de Vue.js y el modo hash o modo histórico de enrutamiento.

2. En Vue.js, cada componente tiene un objeto de estado receptivo. Cuando el estado cambia, Vue.js actualizará automáticamente la vista. Vue-router utiliza esta función para almacenar información de enrutamiento en un objeto de estado receptivo. Cuando el enrutamiento cambia, Vue.js actualizará automáticamente la vista.

3. En modo hash, Vue-router escucha el evento de cambio de hash del navegador. Cuando el hash cambia, Vue-router actualizará el objeto de estado de enrutamiento de acuerdo con el nuevo valor hash y activará la actualización de la vista.

4. En el modo de historial, Vue-router utiliza la API de historial HTML5 para cambiar la URL del navegador a través de los métodos pushState y replaceState, actualizar el objeto de estado de enrutamiento al mismo tiempo y activar la actualización de la vista.

5. Para evitar que el usuario modifique manualmente la URL, lo que resultará en una inconsistencia entre el objeto de estado de enrutamiento y la vista, Vue-router también usa el evento popstate para monitorear las operaciones de avance y retroceso del navegador, a fin de actualizar el Objeto de estado de enrutamiento y visualización en el tiempo.

6. Además, Vue-router también proporciona protecciones de enrutamiento, enrutamiento dinámico, enrutamiento anidado y otras funciones. La realización de estas funciones también se basa en las características del sistema de respuesta y el modo de enrutamiento de Vue.js.

91. ¿Cuéntame sobre el principio de realización de vuex? ¿Cómo se implementan los métodos de confirmación y envío?

1. Vuex es una biblioteca de gestión estatal y su principio de implementación se basa en el sistema receptivo y el modo de flujo de datos unidireccional de Vue.js.

2. Vuex almacena el estado de la aplicación en un repositorio central llamado tienda. Los componentes pueden acceder y modificar el estado en la tienda mediante captadores y mutaciones, y las acciones se pueden utilizar para operaciones asincrónicas.

4. El método de confirmación es un método para enviar una mutación, que recibe dos parámetros: el nombre de la mutación y la carga útil (opcional). Cuando se llama al método de confirmación, Vuex buscará la mutación correspondiente en la tienda y la ejecutará, modificando así el estado en la tienda.

5. El método de envío se utiliza para desencadenar la acción, que recibe dos parámetros: el nombre de la acción y la carga útil (opcional). Cuando se llama al método de envío, Vuex buscará la acción correspondiente en la tienda y la ejecutará, lo que desencadenará una operación asincrónica u otros efectos secundarios.

92. Hay tres componentes A, B y C. Un componente salta al caché del componente B y un componente A salta al componente C sin almacenamiento en caché, ¿cómo lograrlo?

1. Puede utilizar etiquetas en la configuración de enrutamiento <keep-alive>para implementar el almacenamiento en caché de componentes.

2. En la configuración de enrutamiento, incluya el componente que debe almacenarse en caché en <keep-alive>una etiqueta y establezca includela propiedad en el nombre del componente que debe almacenarse en caché.

3. En el componente, utilice enlaces de ciclo de activatedvida deactivatedpara determinar si se requiere almacenamiento en caché. Si se requiere almacenamiento en caché, configúrelo en activatedel gancho , configúrelo en el gancho$route.meta.keepAlivetruedeactivatedfalse

4. Al saltar, juzgue si es necesario el almacenamiento en caché de acuerdo con el nombre del componente que debe almacenarse en caché. $route.meta.keepAliveSi se requiere almacenamiento en caché, se establece en al saltar true; de lo contrario, se establece enfalse

La segunda semana del sexto grado.

93. ¿Comprensión de MVVM?

1. MVVM es un patrón de arquitectura de software que divide la aplicación en tres partes: modelo Modelo, vista Vista y vista modelo ModelView. Entre ellos, el modelo representa los datos y la lógica empresarial de la aplicación, la vista representa la interfaz de usuario y el modelo de vista es el middleware que conecta el modelo y la vista.

2. En MVVM, el modelo de vista es responsable de convertir los datos en el modelo a un formato que la vista pueda usar y convertir las operaciones del usuario en la vista a un modo que el modelo pueda entender. Manejar la comunicación entre la vista y el modelo. Por ejemplo, como enlace de datos, enlace de comandos, etc.

3. ¿Cuáles son las ventajas de MVVM?

1. Separación de preocupaciones: separe los datos y la lógica empresarial de la aplicación de la interfaz de usuario, lo que hace que el código sea más claro y fácil de entender.

2. Capacidad de prueba: dado que la comunicación entre el modelo de vista y la vista y el modelo se realiza mediante el enlace de datos y el enlace de comandos, es más fácil realizar una prueba unitaria del modelo de vista.

3. Mantenibilidad: dado que MVVM divide la aplicación en tres partes, es más fácil mantener y expandir la aplicación.

94. Explique en detalle su comprensión del ciclo de vida de vue.

El ciclo de vida de vue se refiere al proceso completo de una instancia de vue desde la creación hasta la destrucción y se divide en ocho etapas:

1. beforeCreate: se llama antes de que se cree la instancia. En este momento, los datos y métodos de la instancia no se han inicializado y no se puede acceder a atributos como datos, cálculos y métodos.

2. creado: llamado después de que se crea la instancia, en este momento los datos y métodos de la instancia se han inicializado, pero el DOM no se ha renderizado y no se puede acceder a los elementos DOM.

3. beforeMount: Se llama antes de montar el DOM, en este momento la plantilla se ha compilado, pero no se ha montado en la página.

4. montado: se llama después de que se completa el montaje DOM. En este momento, la instancia se ha montado en la página y se puede acceder a los elementos DOM.

5. beforeUpdate: se llama antes de que se actualicen los datos. En este momento, los datos se han actualizado, pero el DOM no se ha vuelto a representar.

6. actualizado: se llama después de que se completa la actualización de datos. En este momento, los datos se actualizaron y el DOM se volvió a representar.

7. beforeDestroy: se llama antes de que se destruya la instancia, en este momento la instancia no ha sido destruida y se pueden realizar algunos trabajos de limpieza.

8. destruido: se llama después de que se destruye la instancia, en este momento la instancia ha sido destruida y no se puede acceder a los datos y métodos de la instancia.

95. ¿Cuáles son los métodos de transferencia de datos entre componentes de vue?

Hay varias formas de transferir datos entre componentes de Vue:

Los componentes padre-hijo pasan datos: el componente padre pasa datos al componente hijo a través de accesorios, y el componente hijo pasa datos al componente padre a través del evento desencadenante $emit.

Los componentes hermanos pasan datos: los datos se pueden pasar a componentes hermanos a través de un componente principal común como intermediario.

Utilice Vuex para la gestión de datos: Vuex es la biblioteca de gestión de estado de Vue, que puede almacenar datos en un almacén global, y cada componente puede obtener y modificar datos mediante captadores y mutaciones.

Utilice el bus de eventos para la transferencia de datos: puede utilizar la instancia de Vue como bus de eventos para transferir datos entre componentes a través de los métodos $on y $emit.

Utilice proporcionar e inyectar para la transferencia de datos: el componente principal proporciona datos al componente secundario a través de proporcionar, y el componente secundario inyecta datos a través de inyectar.

Utilice $refs para la transferencia de datos: puede obtener la instancia del subcomponente a través de $refs para acceder directamente a los datos y métodos del subcomponente.

96. Implementación de enrutamiento de vue: ¿principios del modo hash y del modo histórico?

Existen principalmente dos modos para la implementación de enrutamiento del UE: modo hash y modo historial.

Modo hash En el modo hash, el contenido detrás del símbolo # en la URL se denomina valor hash, que no se enviará al servidor, sino que se procesará en el cliente. Cuando el valor hash en la URL cambia, el navegador activará el evento hashchange y podemos cambiar de ruta escuchando este evento.

Por ejemplo, cuando visitamos Dominio de ejemplo , el navegador utilizará el contenido después de # como valor hash, es decir, /home. Cuando hacemos clic en el enlace de la página para cambiar a otra ruta, en realidad modificamos el valor hash en la URL en lugar de enviar una nueva solicitud.

Modo historial En el modo historial, el símbolo # ya no es necesario en la URL, pero se utiliza directamente la ruta URL normal.

Cuando visitamos http://example.com/home , el navegador enviará una solicitud al servidor y el servidor devolverá el contenido de la página correspondiente. Cuando hacemos clic en el enlace de la página para cambiar a otra ruta, en realidad usamos la API de historial de HTML5 para modificar el historial del navegador a través del método pushState o replaceState, y también modificamos la ruta URL.

97. ¿Cuáles son las funciones de enlace del enrutamiento vue?

Las funciones de enlace del enrutamiento de Vue incluyen:

beforeEach(to, from, next): se ejecuta antes de los saltos de enrutamiento, que se puede utilizar para la interceptación de enrutamiento global y el control de permisos.

afterEach(to, from): se ejecuta después de que la ruta salta y se puede utilizar para realizar operaciones como estadísticas de página y registros de registro.

beforeRouteEnter (a, desde, siguiente): se ejecuta antes de ingresar a la ruta y se puede usar para la adquisición de datos asincrónica y la inicialización de páginas y otras operaciones.

beforeRouteUpdate (a, desde, siguiente): se ejecuta cuando se actualiza la ruta actual y se puede utilizar para actualizar componentes y sincronizar datos.

beforeRouteLeave(to, from, next): se ejecuta antes de abandonar la ruta actual, que se puede utilizar para guardar datos y confirmar páginas.

98. ¿Cuál es la diferencia entre v-if y v-show?

Tanto v-if como v-show se utilizan para controlar la visualización y ocultación de elementos.

1. v-if decide si representar el elemento de acuerdo con el valor de la expresión. Si el valor de la expresión es falso, el elemento no se representará en la página. Si el valor de la expresión es verdadero, el elemento se representará en la mitad de la página.

2. v-if tiene una alta sobrecarga de rendimiento de conmutación al cambiar, porque volverá a representar el elemento y sus subcomponentes cada vez que cambie. v-show también determina si el elemento se muestra en función del valor de la expresión

3. Pero la diferencia es que v-show solo controla el valor de la propiedad CSS de visualización del elemento. Si el valor de la expresión es falso, la propiedad de visualización del elemento se establece en ninguno y el elemento aún existe en el DOM. Si el valor de la expresión es verdadero, la propiedad de visualización del elemento se establece en su valor original y el elemento aún existe en el DOM.

4. v-show no tiene una sobrecarga de rendimiento adicional al cambiar, porque el elemento siempre existe en el DOM y solo controla su visualización y ocultación.

99. ¿Cuál es la diferencia entre $ruta y $router?

Tanto $route como $router son objetos relacionados con el enrutamiento en Vue.js, pero sus funciones y usos son diferentes.

$ ruta es el objeto de información de enrutamiento en Vue.js, que contiene información sobre el enrutamiento actual, como ruta de enrutamiento, parámetros, parámetros de consulta, etc.

Se puede acceder al objeto $route a través de this.$route en el componente.

$router es un objeto de instancia de enrutamiento en Vue.js, que es responsable de administrar los saltos de enrutamiento y la navegación.

Se puede acceder al objeto $router a través de this.$router en el componente. A través del objeto $router podemos realizar operaciones como enrutamiento de saltos y navegación.

100. ¿Cómo hacer que CSS solo funcione en el componente actual?

Modularización CSS Usando la modularización CSS, los archivos CSS se pueden separar de los archivos componentes. Cada componente tiene su propio archivo CSS, lo que puede evitar conflictos de estilo CSS. En React, la biblioteca de módulos CSS se puede usar para lograr la modularización CSS.

Los pasos para utilizar Módulos CSS son los siguientes: 1. Introduzca el archivo CSS en el archivo componente y cambie el nombre del archivo CSS a "nombredearchivo.módulo.css". 2. Cuando utilice un nombre de clase CSS en un componente, debe utilizar "nombre de estilos.clase" para hacer referencia a él.

Usar estilos en componentes

Para usar el archivo less, solo necesita asegurarse de que los nombres de clase de los contenedores más externos no sean los mismos

101. `<keep-alive></keep-alive>`¿Cuál es la función de la función?

<keep-alive></keep-alive>Es un componente integrado en Vue.js y su función es almacenar en caché las instancias de los componentes para evitar la representación y destrucción repetidas.

Cuando un componente está envuelto en <keep-alive></keep-alive>una etiqueta, no se destruye sino que se almacena en caché hasta que se vuelve a utilizar.

Esto mejora el rendimiento de su aplicación porque no es necesario volver a renderizar e inicializar el componente cada vez.

Cuando está en uso <keep-alive></keep-alive>, puede controlar qué componentes deben almacenarse en caché y cuáles no a través de configuraciones includey propiedades.exclude

102. ¿Pasos para usar complementos en vue?

Los pasos para usar complementos en Vue son los siguientes:

Instalar complementos: utilice herramientas de administración de paquetes como npm o Yarn para instalar los complementos necesarios.

Importar complementos: introduzca complementos en el archivo de entrada (como main.js) del proyecto Vue.

Registro de complementos: registre complementos utilizando el método Vue.use().

Uso de complementos: utilice la funcionalidad proporcionada por los complementos en los componentes de Vue.

103. Enumere tres funciones de enlace de ciclo de vida comunes en vue.

creado: se llama inmediatamente después de que se crea la instancia y en esta etapa se pueden realizar operaciones como la inicialización de datos y la definición de métodos.

montado: se llama inmediatamente después de que la instancia se monta en el elemento DOM. En esta etapa se pueden realizar operaciones DOM y solicitudes asincrónicas.

actualizado: cuando los datos cambien, el componente se volverá a representar y se llamará a la función de enlace actualizada en este momento, y en esta etapa se pueden realizar operaciones como operaciones DOM y actualizaciones de datos.

104. ¿Qué es Vue SSR?

Vue SSR se refiere al proceso de representar los componentes de Vue en cadenas HTML en el lado del servidor y luego enviarlos al lado del navegador para su visualización.

ventaja

Mejor SEO: la representación tradicional del lado del cliente no es compatible con SEO ya que los rastreadores de los motores de búsqueda no pueden ejecutar JavaScript. Y SSR puede generar una página HTML completa en el lado del servidor, lo que favorece el rastreo y la indexación por parte de los motores de búsqueda.

Velocidad de carga de primera pantalla más rápida: la renderización tradicional del lado del cliente necesita descargar archivos JavaScript antes de renderizar, lo que dará como resultado velocidades de carga de primera pantalla más lentas. Sin embargo, SSR puede generar una página HTML completa en el lado del servidor, reduciendo el tiempo de renderizado en el lado del cliente y mejorando así la velocidad de carga de la primera pantalla.

Mejor experiencia de usuario: dado que SSR puede generar una página HTML completa en el lado del servidor, los usuarios pueden ver el contenido de la página más rápido, lo que reduce el tiempo de espera y mejora la experiencia del usuario.

105. ¿Cuáles son las ventajas de Proxy sobre la propiedad definida?

1. Más flexible: el proxy puede representar todo el objeto, en lugar de solo una determinada propiedad del objeto como la propiedad definida, lo que hace que el proxy sea más flexible y pueda manejar más escenarios.

2. Más potente: el proxy puede interceptar más operaciones, como llamadas a funciones, constructores, etc., mientras que la propiedad definida solo puede interceptar las operaciones de lectura y escritura de las propiedades del objeto.

3. Más intuitiva: la API del proxy es más intuitiva y fácil de entender y usar, mientras que la API de la propiedad definida es más complicada y requiere una comprensión más profunda del mecanismo interno del objeto.

4. Más seguro: el proxy puede evitar algunas vulnerabilidades de seguridad comunes, como la manipulación de las propiedades del objeto, la eliminación de las propiedades del objeto, etc., pero la propiedad definida no puede resolver completamente estos problemas.

5. Más eficiente: el rendimiento del proxy es mejor que el de la propiedad definida, porque el proxy se puede optimizar en la implementación subyacente, mientras que la implementación de la propiedad definida es más complicada y su rendimiento es relativamente pobre.

106. ¿Qué es vuex? ¿cómo utilizar? ¿Qué escenarios funcionales lo utilizan?

Vuex es una biblioteca de gestión de estado especialmente diseñada para vuejs. Puede gestionar de forma centralizada el estado de todos los componentes de la aplicación vue. Los conceptos centrales de vuex incluyen estado, mutación, captadores, acciones y módulos.

estado: almacena los datos de estado de la aplicación, a los que se puede acceder a través de this.$store.state.

mutaciones: se utiliza para modificar los datos en el estado, solo se pueden realizar operaciones sincrónicas y se pueden llamar a través del método this.$store.commit().

acciones: se utiliza para manejar operaciones asincrónicas, que pueden ser llamadas mediante este método.$store.dispatch().

getters: se utiliza para derivar algún estado del estado, al que se puede acceder a través de this.$store.getters.

módulos: divide el estado de la aplicación en varios módulos, cada uno con su propio estado, mutaciones, acciones y captadores.

Para usar Vuex, primero debe instalarlo en la aplicación Vue, que se puede importar a través de npm o CDN. Luego cree un objeto de tienda en la aplicación Vue, pase elementos de configuración como estado, mutaciones, acciones, captadores y módulos, y finalmente inyecte el objeto de tienda en la instancia de Vue.

Los escenarios para usar Vuex incluyen: - Hay varios componentes en la aplicación que necesitan compartir datos de estado. - Existe una lógica de estado compleja en la aplicación, que requiere una gestión centralizada. -Hay una gran cantidad de operaciones asincrónicas en la aplicación que deben gestionarse de manera uniforme.

107. ¿Principio de respuesta de Vue2.x?

El principio de respuesta de vue2.x se implementa mediante el secuestro de datos y el modo de publicación-suscripción.

Secuestro de datos: Vue2.x implementa el secuestro de datos a través del método Object.defineProperty (), es decir, cuando se accede o modifica los datos, se pueden activar las operaciones correspondientes. En Vue2.x, cada instancia de componente tiene una instancia de Watcher correspondiente. Cuando los datos del componente cambian, la instancia de Watcher notificará al componente que se vuelva a renderizar.

Modo de publicación-suscripción: Vue2.x utiliza el modo de publicación-suscripción para implementar la capacidad de respuesta de los datos. En Vue2.x, cada instancia de componente tiene una instancia Dep correspondiente, que se utiliza para almacenar la instancia de Watcher. Cuando los datos en el componente cambian, la instancia de Dep notificará a todas las instancias de Watcher para que se actualicen.

El proceso de implementación específico es el siguiente:

En Vue2.x, el secuestro de datos se implementa a través del método Object.defineProperty (), es decir, cuando se accede o modifica los datos, se pueden activar las operaciones correspondientes.

Cuando se crea una instancia de componente, se recorrerán todos los datos del componente, se creará una instancia de Dep correspondiente para cada dato y todas las instancias de Watcher de los datos se almacenarán en la instancia de Dep.

Cuando los datos en el componente cambian, se activará el método de establecimiento de los datos correspondientes y el método de establecimiento notificará a la instancia de Dep correspondiente a los datos a actualizar.

La instancia de Dep atravesará todas las instancias de Watcher almacenadas en ella y les notificará que se actualicen. 5. Después de que la instancia de Watcher reciba la notificación de actualización, activará la nueva representación del componente.

108. ¿Cuál es la diferencia entre ES5, ES6 y ES2015?

ES5 es la abreviatura de ECMAScript 5, la quinta versión de JavaScript, lanzada en 2009.

ES6 es la abreviatura de ECMAScript 6, también conocido como ES2015, es la sexta versión de JavaScript, lanzada en 2015.

En comparación con ES5, ES6 ha agregado muchas sintaxis y características nuevas, incluidas funciones de flecha, palabras clave let y const, cadenas de plantilla, asignaciones de desestructuración, clases y módulos, etc.

Estas nuevas características hacen que JavaScript sea más moderno, fácil de leer y escribir y más fácil de mantener.

ES2015 es otro nombre para ES6 porque en el momento de la publicación, el comité ECMAScript decidió cambiar el nombre de ES6 a ES2015 para reflejar el año en que se lanzó. Desde ES2015, ECMAScript ha lanzado una nueva versión cada año, por lo que ES6 también puede considerarse como la primera versión de ES2015.

109、let有什么作用，有了var为什么还要使用let？

let和var都是用来声明变量的关键字，但它们有一些不同之处。

作用域：使用var声明的变量是函数作用域或全局作用域，而使用let声明的变量是块级作用域。块级作用域指的是在if语句、for循环、函数等花括号内部声明的变量只在该花括号内部有效。

变量提升：使用var声明的变量会发生变量提升，即变量可以在声明之前使用，但是值为undefined。而使用let声明的变量不会发生变量提升，即在声明之前使用会报错。

重复声明：使用var声明的变量可以重复声明，后面的声明会覆盖前面的声明。而使用let声明的变量在同一作用域内不能重复声明。

110、举一些ES6对于String字符串做的常用升级优化？

模板字符串：使用反引号（`）来创建字符串模板，可以在其中插入变量或表达式，更加方便易读。

字符串扩展方法：ES6提供了许多新的字符串方法，如startsWith()、endsWith()、includes()、repeat()等，使字符串的操作更加方便。

解构赋值：可以使用解构赋值来将字符串拆分成单个字符或子串，更加灵活。

字符串的遍历器接口：ES6为字符串添加了遍历器接口，可以使用for...of循环遍历字符串中的每个字符。

Unicode支持：ES6支持Unicode字符集，可以使用\u或\u{}来表示Unicode字符，同时也提供了一些新的Unicode相关方法，如codePointAt()、String.fromCodePoint()等。

正则表达式升级：ES6对正则表达式进行了升级，添加了u修饰符，支持处理Unicode字符，同时也提供了新的正则表达式方法，如sticky、flags等。

111、举一些ES6对于Array数组类型做的常用升级优化？

扩展运算符（Spread Operator）：可以将一个数组展开成多个参数，或者将多个参数组合成一个数组。

Array.from()方法：可以将类数组对象或可迭代对象转换成数组。

Método Array.of(): puede convertir un conjunto de valores en una matriz.

Métodos find() y findIndex(): puede encontrar un elemento calificado en una matriz y devolver su valor o índice.

Método incluye (): puede determinar si un elemento está contenido en la matriz.

Método fill(): todos los elementos de la matriz se pueden rellenar con el valor especificado.

Métodos flat() y flatMap(): puede expandir matrices anidadas en matrices unidimensionales y realizar operaciones específicas en cada elemento.

El parámetro de valor inicial del método reduce(): puede especificar el valor inicial del método reduce() para evitar errores cuando la matriz está vacía.

Función de flecha y método forEach(): pueden simplificar la operación transversal de la matriz. 10. El valor de retorno de los métodos map(), filter() y reduce(): estos métodos se pueden llamar en cadena para hacer que el código sea más conciso y fácil de leer.

React y las preguntas comunes de las entrevistas iniciales (leer esta es suficiente) se actualizan continuamente...

versión 1.0

1. Cuénteme sobre su comprensión de React. ¿Cuáles son las características?