El acuerdo cubre puntos de conocimiento front-end muy completos y extensos.

HTML, relacionado con CSS

Nuevas funciones y semántica de HTML5

Mecanismo de representación del navegador, redibujado y reorganización

Proceso de generación de páginas web:

Reordenamiento (también llamado reflujo): cuando los cambios de DOM afectan la información geométrica del elemento (la posición y el tamaño del objeto DOM). tamaño), el navegador necesita recalcular las propiedades geométricas del elemento para colocarlo en la posición correcta en la interfaz, un proceso llamado reordenamiento. Desencadenante:

Redibujar: cuando la apariencia de un elemento cambia, pero el diseño no cambia, el proceso de volver a dibujar la apariencia del elemento se llama redibujar. Desencadenante:

Sugerencias de optimización de reordenamiento:

la transformación no se volverá a dibujar ni a distribuir, porque la transformación es una propiedad compuesta y cuando la transición/animación se anima en la propiedad compuesta, se crea una propiedad compuesta. Se crea la capa. Esto permite que los elementos animados se representen en capas separadas. Cuando el contenido del elemento no ha cambiado, no es necesario volver a dibujarlo. El navegador los recombinará para crear fotogramas de animación.

Modelo de caja CSS

Todos los elementos HTML pueden considerarse cajas y, en CSS, el término "modelo de caja" se utiliza con fines de diseño y disposición. El modelo de cuadro CSS es esencialmente un cuadro que encapsula los elementos HTML circundantes, incluidos márgenes, bordes, relleno y el contenido real. El modelo de caja nos permite colocar elementos en el espacio entre otros elementos y el borde del elemento circundante.

prioridad de estilo css

!importantgt; stylegt; idgt; class

¿Qué es BFC y cuáles son las reglas de diseño de BFC? ¿Cómo crear un BFC?

BFC es la abreviatura de Block Formatting Context. BFC es un concepto en diseño CSS, un entorno donde los elementos internos no afectan a los elementos externos. Reglas de diseño: el cuadro es el objeto y la unidad básica del diseño CSS, y la página se compone de varios cuadros. El tipo y las propiedades de visualización del elemento determinan el tipo de cuadro. Diferentes tipos de cuadros participarán en diferentes contextos de formato. Creación: visualización de elementos flotantes: posición del bloque en línea: absoluta Aplicación: 1. Pertenece a diferentes BFC, lo que puede evitar que los márgenes de la página se superpongan 2. Borrar elementos flotantes internos 3. Diseño adaptable de varias columnas

DOM, BOM objetos

BOM (Browser Object Model) es un modelo de objetos del navegador que permite el acceso y manipulación de las ventanas del navegador. Con la BOM, los desarrolladores pueden mover ventanas, cambiar texto en la barra de estado y realizar otras operaciones que no están directamente relacionadas con el contenido de la página. Le da a JavaScript la capacidad de "hablar" con el navegador. DOM (Modelo de objetos de documento) es el modelo de objetos de documento a través del cual se puede acceder a todos los elementos de un documento HTML. DOM es un estándar del W3C (World Wide Web Consortium). DOM define un estándar para acceder a documentos HTML y XML: "El Modelo de Objetos de Documento (DOM) del W3C es una interfaz neutral en cuanto a plataforma y lenguaje que permite a los programas y scripts acceder y actualizar dinámicamente el contenido, la estructura y el estilo de un documento. " El estándar DOM del W3C se divide en tres partes diferenciadas:

¿Qué es XML DOM? El DOM XML define los objetos y atributos de todos los elementos XML, así como los métodos para acceder a ellos. ¿Qué es HTML DOM? El DOM HTML define los objetos y propiedades de todos los elementos HTML y los métodos para acceder a ellos.

Relacionado con JS

tipo de datos js, tipo de, instancia de, conversión de tipo

Cierre (HF)

El cierre es una función que tiene acceso a variables en el alcance de otra función - Programación avanzada de JavaScript

Se crea un cierre cuando una función puede recordar y acceder al alcance léxico en el que se encuentra

Incluso si. la función se ejecuta fuera del alcance léxico actual - JavaScript que no conoces

Prototipo, cadena de prototipos (alta frecuencia)

Prototipo: inherente al objeto_ El atributo _proto__ apunta al atributo prototipo del objeto.

Cadena de prototipos: Cuando accedemos a las propiedades de un objeto, si la propiedad no existe dentro del objeto, irá a su objeto prototipo, que a su vez tiene su propio prototipo, y así sucesivamente. Este es el concepto de cadena prototipo. El final de la cadena de prototipos suele ser Object.prototype, por lo que nuestros nuevos objetos pueden utilizar métodos como toString().

Características: los objetos JavaScript se pasan por referencia y cada nueva entidad de objeto que creamos no tiene una copia de su propio prototipo. Cuando cambiamos un prototipo, los objetos relacionados con él heredarán el prototipo modificado.

esto apunta a la nueva palabra clave

Este objeto es un atributo en el contexto de ejecución, que apunta al objeto en el que se llamó por última vez al método. En una función global, esto es igual a ventana, y cuando la función se llama como un objeto, esto es igual al objeto. En la práctica, existen cuatro patrones de llamadas que determinan hacia dónde apunta esto.

nuevo

Alcance, cadena de alcance y promoción de variables

Herencia (usando es6) y métodos de herencia múltiple

(1) El primero es implementar la herencia a través de la cadena de prototipos, pero la desventaja de esta implementación es que cuando contiene datos de tipo de referencia, todos los objetos de instancia los destruirán, lo que puede generar confusión en las modificaciones. Además, no puede pasar parámetros a un supertipo al crear un subtipo.

(2) El segundo método es utilizar el método constructor prestado, es decir, llamar al constructor de supertipo en la función de subtipo. Este método resuelve la deficiencia de no poder pasar parámetros al supertipo. Uno de los problemas es que las funciones y los métodos no se pueden reutilizar y no se puede acceder a los métodos definidos por prototipos de subtipos de supertipo.

(3) La tercera forma es la herencia combinada, que es una combinación de cadena prototipo y constructor prestado. Las propiedades de un tipo se heredan tomando prestado un constructor, y los métodos se heredan estableciendo el prototipo del subtipo en una instancia del supertipo. Este enfoque resuelve el problema de usar solo los dos patrones anteriores, pero dado que usamos una instancia del supertipo como prototipo del subtipo, tenemos que llamar al constructor del supertipo dos veces, lo que genera una gran cantidad de imprecisiones en el prototipo. del subtipo. Atributos requeridos.

(4) El cuarto método es la herencia prototípica. La idea principal de la herencia prototípica es crear un nuevo objeto basado en un objeto existente. Se implementa pasando un objeto a una función y luego devolviendo un objeto prototipo. La idea principal de este tipo de herencia no es implementar la creación de nuevos tipos, sino implementar la herencia simple de un objeto. El método Object.create () definido por ES5 es la implementación de la herencia prototípica. Las desventajas son las mismas que las del enfoque de cadena de prototipos.

(5) El quinto método es la herencia parasitaria. La idea de la herencia parasitaria es crear una función que encapsule el proceso de herencia pasando un objeto, luego haciendo una copia del objeto, luego extendiendo el objeto y finalmente devolviendo el objeto. Este proceso de expansión puede entenderse como una especie de herencia. La ventaja de este método de herencia es que si el objeto no es nuestro tipo personalizado, también se puede lograr la herencia para un objeto simple. La desventaja es que las funciones no se pueden reutilizar.

(6) La sexta forma es la herencia combinada parasitaria. La desventaja de la herencia composicional es que utiliza una instancia de la superclase como prototipo de la subclase, agregando así propiedades de prototipo innecesarias. La herencia compositiva parasitaria utiliza una copia del prototipo del supertipo como prototipo del subtipo, evitando así la creación de propiedades innecesarias.

Event Loop

JS es de un solo subproceso. Para evitar que el tiempo de ejecución de la función sea demasiado largo y bloquee el código posterior, el código sincrónico se inserta en la pila de ejecución y se ejecuta en orden, y el código asincrónico se inserta en la cola asincrónica, que se divide en cola de tareas macro. y cola de microtareas. Las colas de microtareas tienen una prioridad más alta que las colas de macrotareas porque las colas de macrotareas tardan más en ejecutarse. Las colas de microtareas están representadas por Promise.then y MutationObserver, y las macrotareas están representadas por setImmediate setTimeout setInterval

Ajax nativo

Ajax es un método de comunicación asincrónica que se utiliza para obtener información del servidor. Procesamiento:

Burbuja de eventos, captura (delegada)

event.stopPropagation() o es decir, método event.cancelBubble = true; event.stopPropagation() o event.cancelBubble = true; .stopPropagation() o es decir, método cancelBubble = true; //detener la propagación del evento

ES6

Vue

Breve descripción de MVVM

Los resultados de las propiedades se almacenan en caché, y cuando las propiedades de las que depende la función de cálculo no han cambiado, los resultados se leen del caché cuando se llama a la función actual. A menos que las propiedades de la respuesta dependiente cambien, los resultados se volverán a calcular, principalmente como propiedades. La función en calculado debe devolver el resultado final, devolver calculado es más eficiente y más popular

Escenario de uso calculado: se usa cuando un atributo se ve afectado por múltiples atributos, por ejemplo: observación de pago del carrito de compras: cuando un dato Se utiliza cuando afecta a varios datos, como los datos de búsqueda

El papel de las palabras clave en v-for

Cómo se comunican los componentes de vue

Comunicación de los componentes padre-hijo

Parent-gt; child props, child-gt; parent $on, $emit ` Obtener instancias de componentes padre e hijo parent, parent, child Ref Obtener instancias es una forma de llamar a las propiedades o métodos de los componentes Proporcionar, objeto ` Oficial no recomendado, pero se usa comúnmente al escribir bibliotecas de componentes

Comunicación de componentes hermanos

El bus de eventos implementa la comunicación entre componentes Vue.bus = new Vue() Vuex

Comunicación de componentes entre niveles

$attrs, $listeners Proporcionar, objeto

Instrucciones comunes

Implementación de enlace bidireccional

Cuándo creando una instancia de Vue. Vue recorre las propiedades de la opción de datos, convirtiéndolas en captadores/definidores usando Object.defineProperty, y rastrea internamente las dependencias, notificando cambios cuando se accede y se modifican las propiedades. Cada instancia de componente tiene una instancia de programa observador correspondiente, que registra propiedades como dependencias durante la representación del componente y luego, cuando se llama, notifica al observador que vuelva a calcular el definidor de dependencias, actualizando así su componente asociado.

¿Qué es la implementación de v-model y cómo funciona?

Implementación de nextTick

Comprensión de vnode, compilador y proceso de parcheo

Todo el proceso después del nuevo Vue

Pensamiento: ¿Por qué inyectar? primero y proporcionar después

Respuesta: 1. Los datos de la instancia actual se juzgan y combinan, por lo que las initInjections de los datos inyectados deben estar por encima de InitState. 2. El contenido inyectado desde la capa superior se revertirá en el componente actual y se proporcionará a los descendientes, por lo que los datos inyectados también deben estar en la capa superior.

vm.[Error de procesamiento matemático]mount(vm.mount(vm.options.el): Monta la instancia.

Implementación de keep-alive

Función: implementar el almacenamiento en caché de componentes

Función de enlace:

Principio: Vue.js abstrae internamente el nodo DOM en un único nodo VNode y el caché del componente keep-alive se basa en el nodo VNode almacena directamente la estructura DOM. Almacena en caché los componentes que cumplen las condiciones (pruneCache y pruneCache) en el objeto de caché, luego extrae el nodo VNode del objeto de caché y lo representa cuando es necesario volver a renderizarlo.

Propiedades de configuración:

Solo se almacenarán en caché los componentes con un nombre coincidente.

No se almacenará en caché ningún componente con un nombre coincidente. p> número máximo, el número máximo de instancias de componentes que se pueden almacenar en caché

vuex, principio de implementación del vue-router

vuex está especialmente desarrollado para la biblioteca de administración de estado de aplicaciones vue.js. conceptos:

¿Cómo entender el algoritmo diff en Vue?

En js, la sobrecarga de renderizar el DOM real es muy alta, por ejemplo, si modificamos algo de datos, si renderizarlo directamente en el DOM real hará que todo el árbol DOM se vuelva a dibujar y reorganizar. Entonces, ¿es posible actualizar solo la pequeña parte del DOM que modificamos sin actualizar todo el DOM en este momento? dom virtual basado en el dom real Cuando los datos de un determinado nodo en el dom virtual cambian, se generará un nuevo Vnode y luego compare el nuevo Vnode con el antiguo. Si encuentra alguna diferencia, puede compararlos directamente. Se modifica el DOM real y luego el valor del Vnode antiguo es el valor del nuevo Vnode.

Diff es el proceso de llamar a la función de parche para comparar los nodos antiguos y nuevos, y parchear el real. DOM en el proceso Al comparar nodos antiguos y nuevos, la comparación solo se realiza en el mismo nivel. Si el nuevo Vnode no existe, el antiguo Vnode se elimina; si el antiguo Vnode no existe, se agrega el nuevo Vnode. Cuando se determina que es necesario realizar el algoritmo de diferencia, la comparación de los dos Vnodes incluye tres tipos de operaciones: actualización de atributos, actualización de texto y actualización de nodos secundarios, si el nodo antiguo no tiene nodos secundarios, y el nuevo. El nodo tiene nodos secundarios, borre el texto del nodo anterior y luego agregue un nuevo nodo secundario si el nuevo nodo no tiene nodos secundarios, y si el nodo anterior tiene nodos secundarios, elimine todos los nodos secundarios del nodo. el nuevo nodo no tiene nodos secundarios y el nodo antiguo tiene nodos secundarios; realice el reemplazo de texto

updateChildren extrae los nodos secundarios Vch de Vnode y los nodos secundarios de oldVnode.

oldCh y vCh tienen cada uno dos variables iniciales y finales, StartIdx y EndIdx, y sus dos variables se compararán entre sí de 4 maneras ****. Si ninguno de los cuatro métodos de comparación coincide y la clave está configurada, la clave se utiliza para la comparación. Durante el proceso de comparación, la variable se moverá hacia el centro. Una vez que StartIdxgt indique que se ha atravesado al menos uno de oldCh y vCh. , termina la comparación.

¿Qué optimizaciones habéis realizado para el rendimiento de Vue?

¿Sabes qué novedades tiene Vue3? ¿Qué impacto tendrán?

Más pequeño y más rápido Soporte para renderizadores personalizados Soporte para optimización de shake tree: una optimización que elimina código inútil al empaquetar Soporte para fragmentos y renderizado entre componentes

Sintaxis de plantilla 99 Manténgala consistente Variable admite de forma nativa componentes basados ​​en clases sin ninguna compilación y varias etapas de funcionalidad diseñadas teniendo en cuenta los tipos de TypeScript. La función de inferencia de tipos de TypeScript reescribe el DOM virtual para esperar más sugerencias en tiempo de compilación, reduciendo así la sobrecarga de tiempo de ejecución. Generación de ranuras de optimización. Representa los componentes principal y secundario por separado. Mejoras en el árbol estático. Reduce los costos de representación. El mecanismo de observador basado en proxy ahorra sobrecarga de memoria.

El mecanismo de detección es un seguimiento de respuesta más completo, preciso, eficiente y depurable

Implementa enlace bidireccional.

¿Cuáles son las ventajas y desventajas de implementar el enlace bidireccional y el Proxy en comparación con Object.defineProperty?

React

1. ¿Cuál es el papel de la clave en reaccionar? ¿Cuál es la diferencia entre tener una clave y no tenerla? ¿Qué significa comparar nodos de la misma? ¿nivel?

2. Su comprensión del DOM virtual y el algoritmo de diferenciación, y la implementación de funciones de representación.

El DOM virtual es esencialmente un objeto JavaScript y una representación abstracta del DOM real. Cuando cambie el estado, se registrarán las diferencias entre el árbol nuevo y el árbol antiguo y, finalmente, estas diferencias se actualizarán a la función de renderizado del DOM real:

3. ¿Cómo se comunican los componentes de React? ¿entre sí?

Los contextos proporcionan una forma de pasar datos entre árboles de componentes sin tener que agregar manualmente accesorios para cada nivel de componentes. Si simplemente desea evitar pasar propiedades de una capa a la siguiente, la composición de componentes a veces es una mejor solución que el contexto. 5. Desventajas de la composición de componentes: complicará los componentes de alto nivel

4. Cómo analizar jsx

5. ¿Cuáles son los ciclos de vida y qué se hace en qué etapas? ¿Por qué algunos ciclos de vida deberían quedar obsoletos?

componenteWillMount, componenteWillReceiveProps, componenteWillUpdate están obsoletos en la versión 16 y se eliminarán en la versión 17. Para fines de compatibilidad con versiones anteriores, se requiere el prefijo UNSAVE_ para usarlos.

6. Método de optimización en reaccionar

Utilice return null en lugar de CSS display: none para controlar la visualización de los nodos que se ocultarán. Asegúrese de que la página tenga la menor cantidad de nodos DOM posible al mismo tiempo.

No utilice subíndices de matriz como claves. Utilice deberíaComponentUpdate y PureComponent. Evite el uso de demasiadas funciones de representación; minimice la cantidad de nuevas variables y funciones vinculadas dentro de la representación y minimice la cantidad de argumentos pasados.

Intente mantener los accesorios y los estados lo más planos posible y pase solo los accesorios requeridos por el componente (pasar demasiados o demasiado profundos aumentará la carga de comparación de datos dentro de shouldComponentUpdate) y preste atención a pasar componentes como accesorios

babel-plugin -import optimiza la introducción de componentes comerciales para lograr la carga bajo demanda. Utilice SplitChunksPlugin para dividir el código **** público y utilice la importación dinámica para cargar componentes de React de forma diferida.

7. Varias formas de vincular este método

8. Comprensión de la fibra óptica

9. ¿setState es síncrono o asíncrono?

10. Redux, React-Redux

Proceso de implementación de Redux

El comportamiento de la página del usuario desencadena una Acción, y luego la Tienda llama al Reductor y pasa dos parámetros: el estado actual y la acción recibida. El restaurador devuelve el nuevo estado. Cada vez que se actualiza el estado, la vista activa una nueva representación basada en el estado.

React-Redux:

Proveedor: Encapsula toda la aplicación desde el exterior y pasa almacenamiento al módulo de conexión. Conexión:

11. Comprender los componentes de orden superior

Un componente de orden superior (HOC) es una función que toma un componente como parámetro y devuelve un nuevo componente. Los HOC son funciones puras sin efectos secundarios. HOC es común en bibliotecas de terceros para React, como el componente de conexión de Redux.

El papel de los componentes de alto orden:

12. ¿De qué manera se pueden crear los componentes de React?

React.createClass(), clases ES6 y funciones sin estado

13. ¿Cuál es la diferencia entre elementos y componentes de React?

Los componentes están compuestos por elementos. La estructura de datos de un elemento es un objeto normal, mientras que la estructura de datos de un componente es una clase o función pura.

¿Vue versus React?

Flujo de datos:

reaccionar aboga por la programación funcional, por lo que aboga por componentes puros, datos inmutables y flujo de datos unidireccional

La idea de​ ​vue es una fórmula de respuesta, es decir, se basa en la idea de que los datos son variables, creando un monitor para cada atributo a monitorear, y cuando el atributo cambia, el DOM virtual correspondiente se actualiza de manera receptiva.

Implemente principios escuchando cambios en los datos:

Comunicación de componentes: la diferencia entre plantillas jsx y .vue.

Optimización del rendimiento

¿Cuál es la diferencia entre vuex y redux?

En términos de principios de implementación, las dos diferencias más importantes son:

Redux usa datos inmutables, mientras que los datos de Vuex son mutables.

Redux reemplaza el estado anterior con un estado nuevo cada vez, mientras que Vuex modifica directamente el estado anterior.

Redux usa diff para comparar diferencias al detectar cambios de datos, mientras que Vuex en realidad compara diferencias a través de captadores/definidores como Vue. (Si observa el código fuente de Vuex, verá que en realidad crea una instancia de Vue internamente para rastrear los cambios de datos)

¿Qué sucede cuando el navegador pasa de escribir una URL a mostrar la página?

Seguridad de red, protocolo HTTP

La diferencia entre TCP y UDP

La diferencia entre Http y HTTPS (HF)

La diferencia entre GET y POST (HF)

Comprenda cómo funcionan los ataques XSS, CSRF y DDOS y cómo evitarlos

XSS (Cross-Site Scripting Attack) es un tipo de ataque de inyección de código . El atacante inyecta código malicioso en el sitio web de destino. Cuando el atacante inicia sesión en el sitio web, se ejecutará el código malicioso. Estos scripts pueden leer cookies, tokens de sesión u otra información confidencial del sitio web, realizar phishing y defraudar a los usuarios, e incluso lanzar gusanos. ataque.

CSRF (falsificación de solicitudes entre sitios) Falsificación de solicitudes entre sitios: un atacante atrae a una víctima a un sitio web de terceros donde envía una solicitud entre sitios al sitio web comprometido. El atacante utiliza las credenciales de registro de la víctima en el sitio web comprometido para eludir la autenticación del usuario backend y hacerse pasar por el usuario para realizar acciones en el sitio web comprometido.

Evite XSS:

Evite CSRF:

DDoS también se denomina denegación de servicio distribuida. Su principio es utilizar una gran cantidad de solicitudes para provocar una sobrecarga de recursos. , lo que resulta en una falla en el uso del servicio.